mapbox-gl-layers
v1.2.0
Published
[](https://circleci.com/gh/developmentseed/mapbox-gl-layers)
Downloads
6
Readme
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')
new Layers({
layers: {
'ALL PARKS': ['national_park', 'parks'],
'National Parks': 'national_park',
'Other Parks': 'parks'
}
}).addTo(map) // map is the mapbox gl map instanceStandalone 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
optionsObject=options.typestring= Selection type:multipleto allow independently toggling each layer/group,singleto only choose one at a time. (optional, default'multiple')options.layersObject= 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.positionstring= A string indicating position on the map. Options aretop-right,top-left,bottom-right,bottom-left. (optional, default'top-right')options.onChangefunction= 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 toindex.jsand friends.