maplibre-geoman

Drawing and geometry editing

Maintained by Geoman

A powerful drawing and editing plugin for MapLibre GL JS. Draw polygons, lines, markers, and complex shapes with snapping and editing capabilities.

Live demo

maplibre-geoman running on MapLibre GL JS in your browser

Loading the map…

Demo code

import { Geoman } from "@geoman-io/maplibre-geoman-free";
import "@geoman-io/maplibre-geoman-free/dist/maplibre-geoman.css";
import type { PluginDemo } from "../types";

export default {
  center: [2.3376, 48.8606], // the Louvre, Paris
  zoom: 15,
  async run({ map }) {
    const geoman = new Geoman(map);
    await geoman.waitForGeomanLoaded();

    // A polygon to edit: pick a tool on the left, then drag, cut, rotate or snap to it.
    await geoman.features.importGeoJson({
      type: "Feature",
      properties: {},
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [2.3325, 48.8625],
            [2.3405, 48.8637],
            [2.3425, 48.8597],
            [2.3345, 48.8585],
            [2.3325, 48.8625],
          ],
        ],
      },
    });
  },
} satisfies PluginDemo;