tadwohlrapp / style-switcher

Mapbox GL JS Style Switcher

Mapbox GL JS Style Switcher

Adds a style switcher to mapbox-gl

Installation:

npm i mapbox-gl-style-switcher --save

Demo:

• codesandbox

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'))

Screenshots