maplibre-gl-terradraw

Drawing and measuring toolbar on Terra Draw

Maintained by Water GIS

A MapLibre GL JS control that puts Terra Draw behind a ready-made toolbar: points, lines, polygons, circles, freehand and text, with select, undo, GeoJSON download, and a measuring variant.

Live demo

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

Loading the map…

Demo code

import { MaplibreTerradrawControl } from "@watergis/maplibre-gl-terradraw";
import "@watergis/maplibre-gl-terradraw/dist/maplibre-gl-terradraw.css";
import type { PluginDemo } from "../types";

export default {
  center: [4.8897, 52.3731], // Amsterdam
  zoom: 14,
  run({ map }) {
    // A drawing toolbar (points, lines, polygons, circles, freehand, select, undo, download).
    const draw = new MaplibreTerradrawControl({ open: true });
    map.addControl(draw, "top-left");

    // One polygon to start with: pick the select tool to drag or reshape it.
    draw.getTerraDrawInstance()?.addFeatures([
      {
        type: "Feature",
        properties: { mode: "polygon" },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [4.8835, 52.3755],
              [4.8945, 52.3765],
              [4.8965, 52.3712],
              [4.8855, 52.3702],
              [4.8835, 52.3755],
            ],
          ],
        },
      },
    ]);
  },
} satisfies PluginDemo;