maplibre-gl-inspect

Inspect vector tile features

Maintained by acalcutt

A development tool for MapLibre GL JS that lets you inspect vector tile features, view properties, and debug map data interactively.

Live demo

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

Loading the map…

Demo code

import MaplibreInspect from "@maplibre/maplibre-gl-inspect";
import "@maplibre/maplibre-gl-inspect/dist/maplibre-gl-inspect.css";
import type { PluginDemo } from "../types";

export default {
  center: [-122.4194, 37.7749], // San Francisco
  zoom: 14,
  run({ map, maplibregl }) {
    map.addControl(
      new MaplibreInspect({
        // Start in inspect mode: every vector feature drawn in a color per source layer.
        showInspectMap: true,
        // Hover a feature to see its properties.
        popup: new maplibregl.Popup({ closeButton: false, closeOnClick: false }),
      }),
    );

    // The control learns the style and its sources from load events, which have
    // already fired here: reload the style once so it sees them.
    map.setStyle(map.getStyle(), { diff: false });
  },
} satisfies PluginDemo;