var Layers = require('mapbox-gl-layers')

new Layers({
  layers: {
    'ALL PARKS': ['national_park', 'parks'],
    'National Parks': 'national_park',
    'Other Parks': 'parks'
  }
}).addTo(map) // 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 () {
  new MapboxGLLayers({
    layers: {
      'ALL PARKS': ['national_park', 'parks'],
      'National Parks': 'national_park',
      'Other Parks': 'parks'
    }
  }).addTo(map) // 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

Examples

(new Layers({ 'National Parks': 'national_park', 'Other Parks': 'parks' }))
.addTo(map)

Contributing

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

Steps:

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

Keywords

mapbox

mapbox-gl

plugin

FAQs

What is mapbox-gl-layers?

Is mapbox-gl-layers well maintained?

Package last updated on 27 Apr 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

mapbox-gl-layers

mapbox-gl-layers

Install

Use

CommonJS

Standalone script

API

Layers

Contributing

Keywords

Related posts

Introducing Custom Pull Request Alert Comment Headers

Rust Support Now in Beta