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

Readme

Keywords

Package Sidebar

Install

npm i @digidem/mapbox-gl-layers

Weekly Downloads

0

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