Get started with mapbox-gl-style-switcher CDN

GPL-3.0 licensed

Mapbox-gl-style-switcher: Switch Mapbox styles easily.

Tags:
  • mapbox
  • mapbox-gl-js
  • style-switcher

Stable version

Copied!

How to start using mapbox-gl-style-switcher CDN


<!DOCTYPE html>
<html>
<head>
  <link href="https://api.mapbox.com/styles/v1/mapbox/light-v10/classes/mapbox-terrain/{z}/{x}/{y}.png?access_token=YOUR_ACCESS_TOKEN" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/mapbox-gl@2.1.1/dist/mapbox-gl.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/mapbox-gl@2.1.1/dist/mapbox-gl.js"></script>
  <script src="https://cdn.cdnhub.io/mapbox-gl-style-switcher/1.0.11/index.js"></script>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <button id="styleSwitcher">Switch Style</button>
  <script>
    mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v10',
    });

    const styleSwitcher = new MapboxGlStyleSwitcher({
      container: document.getElementById('map'),
      styles: [
        {
          name: 'Light',
          style: 'mapbox://styles/mapbox/light-v10',
        },
        {
          name: 'Dark',
          style: 'mapbox://styles/mapbox/dark-v10',
        },
      ],
      defaultStyle: 'Light',
    });

    document.getElementById('styleSwitcher').addEventListener('click', () => {
      styleSwitcher.toggleStyle();
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!

All versions