maplibre-gl-measures

Distance and area measurement

Maintained by jdsantos

A measurement plugin for MapLibre GL JS that lets users interactively measure distances and areas on the map.

Live demo

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

Loading the map…

Demo code

import MeasuresExport from "maplibre-gl-measures";
import type { PluginDemo } from "../types";

export default {
  center: [-73.9855, 40.758], // Midtown Manhattan
  zoom: 14,
  run({ map }) {
    // The package ships only a UMD build, and bundlers disagree on where its class lands.
    const MeasuresControl: typeof MeasuresExport =
      (MeasuresExport as unknown as { default?: typeof MeasuresExport }).default ?? MeasuresExport;

    // Pick the ruler or the polygon tool, then click on the map to measure.
    map.addControl(
      new MeasuresControl({
        units: "metric",
        // A font the basemap's glyph server has (OpenFreeMap serves Noto Sans).
        style: {
          text: { font: "Noto Sans Bold", color: "#D20C0C", haloColor: "#fff", haloWidth: 1 },
        },
      }),
      "top-left",
    );
  },
} satisfies PluginDemo;