Skip to content
Make with
m

maplibre-gl-basemaps

Basemap style switcher

Maintained by ka7eh

Source ↗

A raster basemap switcher control for MapLibre GL JS with thumbnail previews and easy style toggling.

Live demo

maplibre-gl-basemaps running on MapLibre GL JS in your browser

Loading the map…

Demo code
import BasemapsControl from "maplibre-gl-basemaps";
import "maplibre-gl-basemaps/lib/basemaps.css";
import type { PluginDemo } from "../types";

export default {
  center: [135.768, 35.004], // Kyoto
  zoom: 13,
  run({ map }) {
    // Free raster basemaps from the Geospatial Information Authority of Japan (GSI).
    const gsi = (layer: string, ext = "png") => ({
      id: `gsi-${layer}`,
      tiles: [`https://cyberjapandata.gsi.go.jp/xyz/${layer}/{z}/{x}/{y}.${ext}`],
      // minzoom 2: the control's thumbnail is tile {minzoom}/0/0, and GSI starts some layers at zoom 2.
      sourceExtraParams: {
        tileSize: 256,
        minzoom: 2,
        attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">GSI Japan</a>',
      },
    });
    map.addControl(
      new BasemapsControl({
        basemaps: [gsi("std"), gsi("pale"), gsi("seamlessphoto", "jpg")],
        initialBasemap: "gsi-seamlessphoto",
        expandDirection: "top",
      }),
      "bottom-left",
    );

    // The control adds its layers on the map's "load" event, which has already fired here.
    map.fire("load");
  },
} satisfies PluginDemo;