@digidem/mapbox-gl-layers
v2.0.1
Published
[![Circle CI](https://circleci.com/gh/developmentseed/mapbox-gl-layers.svg?style=svg)](https://circleci.com/gh/developmentseed/mapbox-gl-layers)
Downloads
10
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')
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 aretop-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:
- Clone the repo and run
npm install
. - Start test server with
npm start
, open http://localhost:9966/example.html, and start make changes toindex.js
and friends.