0.1.8 • Published 6 years ago
stimulus-mapbox-gl v0.1.8
Stimulus Controllers for Mapbox GL
You need to create a controller which extends MapboxController
.
For example controllers/mapController.js
:
import { MapboxController } from "stimulus-mapbox-gl";
export default class extends MapboxController {
// Optional
defaultConfig() {
return {
/* your specific mapbox configuration */
}
}
// Optional. Will expand from the "style" config value.
// If this callback is not present, the "style" needs to have a full URL.
getStyleUrl(style) {
return "https://some.tileserver.org/styles/"+style"/style.json";
}
// Do something when the map has loaded.
onMapLoaded(map) {
}
// Cleanup if needed
onMapUnloaded(map) {
}
}
<div data-controller="mapboxgl" data-map-config="json"></div>
The JSON configuration object is similar to the object you'll pass to mapboxgl.Map()
, with a few notable additions:
accessToken
,style
can be expanded by thegetStyleUrl()
callback,sources
can be an array of multiples sources you'd normally add withmap.addSource
(plus the ID field),layers
can be an array of multiples layers you'd normally add withmap.addLayer
(plus the ID field),controls
can be an object to add an configure the different controls. Unset a key to disable the control:- with an extra option
position
: the position of the control, passed as a second argument to map.addControl
- with an extra option
{
…
"controls": {
"scale": {},
"geolocate": {"trackUserLocation": false}
}
}