mapbox-gl-datadriven

    1.4.0 • Public • Published

    CircleCI

    js-standard-style

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

    Install

    npm install mapbox-gl-datadriven
    

    Usage

    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.

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

    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, 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.)

    createLayerStack

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

    Parameters

    • 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

    Examples

    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()

    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 = require('mapbox-gl-datadriven/create-dds-filter')
    var filter = createDDSFilter(null, {property: 'foo', stops: [[0, 'red'], [1, 'blue'], [2, 'green']]}, 2)
    console.log(filter)
    // outputs: ['all', ['foo', '>=', 2]]

    Returns Array A mapbox-gl style filter.

    Install

    npm i mapbox-gl-datadriven

    DownloadsWeekly Downloads

    0

    Version

    1.4.0

    License

    none

    Last publish

    Collaborators

    • anandthakker