maplibre-style-control

Style switcher control with thumbnails

A MapLibre GL JS control that lets users switch map styles from a thumbnail panel. It ships Maptoolkit's styles as defaults and accepts any style URL or inline style.

Live demo

maplibre-style-control running on MapLibre GL JS in your browser

Loading the map…

Demo code

import { StyleControl } from "@maptoolkit/maplibre-style-control";
import "@maptoolkit/maplibre-style-control/style.css";
import type { PluginDemo } from "../types";

export default {
  center: [16.37, 48.21], // Vienna
  zoom: 12,
  run({ map }) {
    // The default style list: Maptoolkit's free, keyless styles (Summer is switched on first).
    const control = new StyleControl();
    map.addControl(control);

    // Open the thumbnail panel; pick another style to switch.
    control.open();
  },
} satisfies PluginDemo;