[![Circle CI](](
Last updated 5 years ago by anandthakker .
MIT · Original npm · Tarball · package.json
$ cnpm install mapbox-gl-layers 
SYNC missed versions from official npm registry.

Circle CI


Layer toggle for Mapbox GL JS


npm install mapbox-gl-layers

(Note the peer dependency on mapbox-gl!)



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:

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



Creates a layer toggle control


  • 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


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


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


  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.

Current Tags

  • 1.2.0                                ...           latest (5 years ago)

6 Versions

  • 1.2.0                                ...           5 years ago
  • 1.1.3                                ...           5 years ago
  • 1.1.2                                ...           5 years ago
  • 1.1.1                                ...           5 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (2)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
Dev Dependencies (10)
Dependents (0)

Copyright 2014 - 2016 © |