mapbox-gl-layers's Introduction

mapbox-gl-layers

Install

npm install mapbox-gl-layers

(Note the peer dependency on mapbox-gl!)

Use

CommonJS

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.

Recommend Projects