1.4.0 • Public • Published



A stopgap to mimic data-driven styles in mapbox-gl-js; hopefully obsolete very soon!


npm install mapbox-gl-datadriven


mapboxgl.datadriven(map, {
  source: {
    type: 'vector',
    url: 'mapbox://user/tileset'
  'source-layer': 'my-layer',
  paint: {
    'fill-color': '#ff8800'
  styleProperty: 'fill-opacity',
  styleFunction: {
    property: 'my-property',
    stops: [
      [0, 0],
      [10, 0.25],
      [30, 0.5],
      [100, 0.75],
      [300, 1]

See also example.html and example-relative.html.



Add layers that mimic 'data-driven' style properties for Mapbox GL JS. Access with require('mapbox-gl-datadriven') or mapboxgl.datadriven.


  • map Map The mapbox-gl-js map instance
  • options object
    • options.source (object | string) The source id or source definition object
    • options.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 properties
    • options.paint [object] Common paint properties

Returns Array<String> List of layers constituting the data-driven style that was created/added


A mapbox-gl style function. See


  • 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, the datavalue 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 between stops[i][0] (inclusive) and stops[i+1][0] are mapped to style value stops[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 in stops 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.)


Creates a stack of layers that simulate a data-driven style.


  • options object
    • options.styleFunction StyleFunction The style function to mimic
    • options.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 The source for the created layers
    • options.source-layer string The source-layer for the created layers
    • options.prefix [string] A prefix for layer ids. Defaults to [source, source-layer].join('-')
    • options.layout [object] Layout properites to use in the created layers
    • options.paint [object] Paint properties to use in the created layers
    • options.filter [object] Filter to use in the craeted layers


var createLayerStack = require('mapbox-gl-datadriven/create-layer-stack')
var layers = createLayerStack({
  styleFunction: {property: 'foo', stops: [[0, 'red'], [1, 'blue'], [2, 'green']]},
  styleProperty: 'fill-color',
  source: 'my-source',
  'source-layer': 'my-layer',
  paint: { 'fill-opacity': 0.5 }
// Output:
    "id": "my-source-0",
    "type": "fill",
    "layout": {},
    "paint": { "fill-color": "red", "fill-opacity": 0.5 },
    "filter": [ "all", [ ">=", "foo", 0 ], [ "<", "foo", 1 ] ]
    "id": "undefined-1",
    "type": "fill",
    "layout": {},
    "paint": { "fill-color": "blue", "fill-opacity": 0.5 },
    "filter": [ "all", [ ">=", "foo", 1 ], [ "<", "foo", 2 ] ]
    "id": "undefined-2",
    "type": "fill",
    "layout": {},
    "paint": { "fill-color": "green", "fill-opacity": 0.5 },
    "filter": [ "all", [ ">=", "foo", 2 ] ]

Returns Array<object> An array of layer definitions, suitable for adding to the map with map.addLayer()


Creates a style filter to make a layer mimic one level/stop of a data-driven style.


  • 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.


var createDDSFilter = require('mapbox-gl-datadriven/create-dds-filter')
var filter = createDDSFilter(null, {property: 'foo', stops: [[0, 'red'], [1, 'blue'], [2, 'green']]}, 2)
// outputs: ['all', ['foo', '>=', 2]]

Returns Array A mapbox-gl style filter.

Package Sidebar


npm i mapbox-gl-datadriven

Weekly Downloads






Last publish


  • anandthakker