Mapbox GL JS Style Switcher
Adds a style switcher to mapbox-gl
Installation:
npm i mapbox-gl-style-switcher --save
Demo:
Usage:
import { MapboxStyleSwitcherControl } from 'mapbox-gl-style-switcher'
import { Map as MapboxMap } from 'mapbox-gl'
import 'mapbox-gl-style-switcher/styles.css'
const map = new MapboxMap()
map.addControl(new MapboxStyleSwitcherControl())
Options:
If you want to supply your own list of styles, pass them in the constructor.
import {
MapboxStyleDefinition,
MapboxStyleSwitcherControl,
} from 'mapbox-gl-style-switcher'
const styles: MapboxStyleDefinition[] = [
{
title: 'Dark',
uri: 'mapbox://styles/mapbox/dark-v9',
},
{
title: 'Light',
uri: 'mapbox://styles/mapbox/light-v9',
},
]
// Pass options (optional)
const options: MapboxStyleSwitcherOptions = {
defaultStyle: 'Dark',
eventListeners: {
onChange: (event, style) => {
// Example: Get current active Style title and uri
console.log(style.title)
console.log(style.uri)
return true
},
},
}
map.addControl(new MapboxStyleSwitcherControl(styles, options))
If you want to specify a default style, pass them in the constructor as second argument.
map.addControl(new MapboxStyleSwitcherControl(styles, 'Dark'))