A stopgap to mimic data-driven styles in mapbox-gl-js; hopefully obsolete very soon!
Install
npm install mapbox-gl-datadriven
Usage
mapboxgl
See also example.html and example-relative.html.
API
datadriven
Add layers that mimic 'data-driven' style properties for Mapbox GL JS.
Access with require('mapbox-gl-datadriven')
or mapboxgl.datadriven
.
Parameters
map
Map The mapbox-gl-js map instanceoptions
objectoptions.source
(object | string) The source id or source definition objectoptions.source-layer
[string] The source layer to use -- needed for vector layers.options.prefix
[string] Prefix to use for source and style-layer ids that are created.options.styleProperty
string The paint property to style based on data values.options.styleFunction
StyleFunction A "style function" object defining the data-value -> paint-property-value mapping.options.layout
[object] Common layout propertiesoptions.paint
[object] Common paint properties
Returns Array<String> List of layers constituting the data-driven style that was created/added
StyleFunction
A mapbox-gl style function. See https://www.mapbox.com/mapbox-gl-style-spec/#types-function.
Properties
property
string The data property to use.stops
Array The "stops" for the style function; each item is an array of [datavalue, stylevalue]. For a small performance improvement that's not needed or supported by "real" gl style functions, thedatavalue
for a categorical function may be an array of values.type
string Function type. Controls how data values are mapped to style values:-'interval'
(default): a simple step function -- data values betweenstops[i][0]
(inclusive) andstops[i+1][0]
are mapped to style valuestops[i][1]
.'categorical'
:stops
define specific categorical values rather than ranges:stops[i][0]
must directly match (if it's primitive) or contain (if it's an array) the feature property value.'relative'
: Like 'interval', but data values instops
are interpreted as percentiles (between 0 and 1), and the style values are re-scaled on map move to be relative to the data that's on the screen. (Note that this type is not a supported mapbox-gl style function type, and requires this plugin to do extra computations each time the map moves.)
createLayerStack
Creates a stack of layers that simulate a data-driven style.
Parameters
options
objectoptions.styleFunction
StyleFunction The style function to mimicoptions.styleProperty
string The property (e.g. fill-color) on which to apply the function.options.stylePropertyType
[string] The type of the style property (paint or layout). (optional, default'paint'
)options.source
string Thesource
for the created layersoptions.source-layer
string Thesource-layer
for the created layersoptions.prefix
[string] A prefix for layerid
s. Defaults to [source, source-layer].join('-')options.layout
[object] Layout properites to use in the created layersoptions.paint
[object] Paint properties to use in the created layersoptions.filter
[object] Filter to use in the craeted layers
Examples
var createLayerStack = var layers = // Output: "id": "my-source-0" "type": "fill" "layout": {} "paint": "fill-color": "red" "fill-opacity": 05 "filter": "all" ">=" "foo" 0 "<" "foo" 1 "id": "undefined-1" "type": "fill" "layout": {} "paint": "fill-color": "blue" "fill-opacity": 05 "filter": "all" ">=" "foo" 1 "<" "foo" 2 "id": "undefined-2" "type": "fill" "layout": {} "paint": "fill-color": "green" "fill-opacity": 05 "filter": "all" ">=" "foo" 2
Returns Array<object> An array of layer definitions, suitable for adding to the map with map.addLayer()
createDDSFilter
Creates a style filter
to make a layer mimic one level/stop of a
data-driven style.
Parameters
prevFilter
object The layer's existing filter, if it exists. If provided, the returned filter will be combined with this one.styleFunction
StyleFunction The style function for which data-driven should be mimicked.i
number The zero-based index of the level/stop to use.
Examples
var createDDSFilter = var filter = console// outputs: ['all', ['foo', '>=', 2]]
Returns Array A mapbox-gl style filter.