@digidem/mapbox-gl-layers

    2.0.1 • Public • Published

    Circle CI

    mapbox-gl-layers

    Layer toggle for Mapbox GL JS

    Install

    npm install mapbox-gl-layers

    (Note the peer dependency on mapbox-gl!)

    Use

    CommonJS

    var Layers = require('mapbox-gl-layers')
     
    map.addControl(new Layers({
      layers: {
        'ALL PARKS': ['national_park', 'parks'],
        'National Parks': 'national_park',
        'Other Parks': 'parks'
      }
    })) // map is the mapbox gl map instance

    Standalone script

    Add to <head>:

    <script src='dist/mapbox-gl-layers.js'></script>
    <link href='dist/mapbox-gl-layers.css' rel='stylesheet' />

    And then:

    <script>
    map.on('style.load', function () {
      map.addControl(new MapboxGLLayers({
        layers: {
          'ALL PARKS': ['national_park', 'parks'],
          'National Parks': 'national_park',
          'Other Parks': 'parks'
        }
      })) // map is the mapbox gl map instance
    })
    </script> 

    API

    Layers

    Creates a layer toggle control

    Parameters

    • options Object=
      • options.type string= Selection type: multiple to allow independently toggling each layer/group, single to only choose one at a time. (optional, default 'multiple')
      • options.layers Object= An object determining which layers to include. Each key is a display name (what's shown in the UI), and each value is the corresponding layer id in the map style (or an array of layer ids).
      • options.position string= A string indicating position on the map. Options are top-right, top-left, bottom-right, bottom-left. (optional, default 'top-right')
      • options.onChange function= Optional callback called with {name: dispayName, layerIds: [...], active: true|false } for the clicked layer

    Contributing

    This is an OPEN open source project. Contributions are welcome!

    Steps:

    1. Clone the repo and run npm install.
    2. Start test server with npm start, open http://localhost:9966/example.html, and start make changes to index.js and friends.

    Install

    npm i @digidem/mapbox-gl-layers

    DownloadsWeekly Downloads

    3

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    19.4 kB

    Total Files

    13

    Last publish

    Collaborators

    • andrew_chou
    • substack
    • karissa
    • digidem-admin
    • gmaclennan
    • noffle