make use of style spec

[incanus]

As https://github.com/mapbox/mapbox-gl-style-spec takes shape, we should leverage it in the Cocoa styling bindings to avoid duplications of logic such as these:

https://github.com/mapbox/mapbox-gl-cocoa/blob/51a38c8e570684b8f4fd9315ec72cb76f07013d7/mapbox-gl-cocoa/MGLMapView.mm#L909

[incanus]

Happening in style-spec.

[incanus]

Here is the sort of API I'm currently working towards with this. Functional and strongly typed:

NSLog(@"style sources: %@", self.mapView.style.sources); // @{ @"mapbox": @{ ... } }
NSLog(@"first style source type: %@", self.mapView.style.sources[0].type); // [MGLStyleSourceType vectorType]
NSLog(@"style constants: %@", self.mapView.style.constants; // @{ @"red": [UIColor redColor] }
NSLog(@"style layers: %@", self.mapView.style.layers); // @[ @{ @"id": @"wood", @"source": ... } ]
NSLog(@"style layer IDs: %@", self.mapView.style.layers.find(@"id")); // @[ @"bg", @"park", ... ]
NSLog(@"third layer type: %@", self.mapView.style.layers[2].type); // [MGLStyleLayerType fillType]

self.mapView.style.layers.find({ @"id": @"wood" }).style.fillColor = [UIColor greenColor];
NSLog(@"waterway color: %@", self.mapView.style.layers.find(@{ @"id": @"waterway" }).style.lineColor); // [UIColor colorWithRed:0 green:0 blue:0.75]

The idea is that using the style spec, the runtime can auto-create/query these values, as well as validate runtime settings applied to them.

Overall goal is a Cocoa developer being able to easily change layer style properties (90% use case) at runtime to highlight interactions and make transitions.

[incanus]

Still chipping away at this. I have a Node script that parses the style spec and produces valid, strongly-typed Objective-C code. Just hitting the edge cases now.

Examples:

Source in the spec:

  "source": {
    "type": {
      "required": true,
      "type": "enum",
      "values": [
        "vector",
        "raster",
        "geojson",
        "video"
      ],
      "doc": "The data type of the source."
    },
    "url": {
      "required": true,
      "type": "string",
      "doc": "A URL, or URL template to retrive the source data."
    },
    "tileSize": {
      "type": "number",
      "default": 512,
      "doc": "The minimum visual size (in px) to display tiles for this layer. Only configurable for raster layers."
    },
    "minZoom": {
      "type": "number",
      "default": 0,
      "doc": "Minimum zoom level for which tiles are available."
    },
    "maxZoom": {
      "type": "number",
      "default": 22,
      "doc": "Maximum zoom level for which tiles are available. Data from tiles at the maxZoom are used when displaying the map at higher zoom levels."
    },
    "*": {
      "type": "*",
      "doc": "Other keys to configure the data source."
    }
  },

Sources in Objective-C:

@interface MGLStyleSource : MGLStyleObject

/** The data type of the source. */
typedef NS_ENUM(NSUInteger, MGLStylePropertySourceType) {
    MGLStylePropertySourceTypeVector,
    MGLStylePropertySourceTypeRaster,
    MGLStylePropertySourceTypeGeojson,
    MGLStylePropertySourceTypeVideo,
};

@property (nonatomic) MGLStylePropertySourceType type;

/** A URL, or URL template to retrive the source data. */
@property (nonatomic) NSString *url;

/** The minimum visual size (in px) to display tiles for this layer. Only configurable for raster layers. */
@property (nonatomic) NSNumber *tileSize;

/** Minimum zoom level for which tiles are available. */
@property (nonatomic) NSNumber *minZoom;

/** Maximum zoom level for which tiles are available. Data from tiles at the maxZoom are used when displaying the map at higher zoom levels. */
@property (nonatomic) NSNumber *maxZoom;

/** DOC GOES HERE */
- (NSDictionary *)keyedValues;

@end

Raster symbolizer in the spec:

  "class_raster": {
    "raster-opacity": {
      "type": "number",
      "default": 1,
      "transition": true
    },
    "raster-hue-rotate": {
      "type": "number",
      "default": 0,
      "function": true,
      "transition": true,
      "doc": "Rotates hues around the color wheel by the specified number of degrees."
    },
    "raster-brightness": {
      "type": "array",
      "value": "number",
      "length": 2,
      "default": [
        0,
        1
      ],
      "function": true,
      "transition": true
    },
    "raster-saturation": {
      "type": "number",
      "default": 0,
      "function": true,
      "transition": true
    },
    "raster-contrast": {
      "type": "number",
      "default": 0,
      "function": true,
      "transition": true
    },
    "raster-fade": {
      "type": "number",
      "default": 0,
      "function": true,
      "transition": true,
      "doc": "Duration of the fade when a new tile is added. @TODO rename?"
    }
  },

Raster symbolizer in Objective-C:

@interface MGLStyleClassRaster : MGLStyleObject

/** TODO */
@property (nonatomic) NSNumber<MGLStylePropertyTransitionable> *rasterOpacity;

/** Rotates hues around the color wheel by the specified number of degrees. */
@property (nonatomic) NSNumber<MGLStylePropertyTransitionable, MGLStylePropertyFunctionAvailable> *rasterHueRotate;

/** TODO */
@property (nonatomic) NSArray<MGLStylePropertyTransitionable, MGLStylePropertyFunctionAvailable> *rasterBrightness;

/** TODO */
@property (nonatomic) NSNumber<MGLStylePropertyTransitionable, MGLStylePropertyFunctionAvailable> *rasterSaturation;

/** TODO */
@property (nonatomic) NSNumber<MGLStylePropertyTransitionable, MGLStylePropertyFunctionAvailable> *rasterContrast;

/** Duration of the fade when a new tile is added. @TODO rename? */
@property (nonatomic) NSNumber<MGLStylePropertyTransitionable, MGLStylePropertyFunctionAvailable> *rasterFade;

@end

Transitions in the spec:

  "transition": {
    "duration": {
      "type": "number",
      "default": 300,
      "doc": "Time in milliseconds that it takes for transitions to complete."
    },
    "delay": {
      "type": "number",
      "default": 0,
      "doc": "Time in milliseconds before a transition begins."
    }
  }

Transitions in Objective-C:

@interface MGLStyleTransition : MGLStyleObject

/** Time in milliseconds that it takes for transitions to complete. */
@property (nonatomic) NSNumber *duration;

/** Time in milliseconds before a transition begins. */
@property (nonatomic) NSNumber *delay;

@end

[incanus]

👉 mapbox/mapbox-gl-native#837