Leaflet-Geoman vs Leaflet.draw

Migrate a Leaflet.draw editor to Geoman

Keep Leaflet and your application's GeoJSON storage. Replace the drawing control and event handlers, then test drawing, editing, deleting and saving. Remove the Leaflet.draw toolbar while testing Geoman so the two plugins do not compete for the same input.

1. Install leaflet and @geoman-io/leaflet-geoman-free.
2. Create a map container with an explicit height, such as <div id="map" style="height: 480px"></div>.
3. Use this module in a browser bundle such as Vite. In an SSR framework, initialize it after the component mounts.

import L from "leaflet"
import "leaflet/dist/leaflet.css"
import "@geoman-io/leaflet-geoman-free"
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css"

export function createEditor(
  container,
  initialData = { type: "FeatureCollection", features: [] },
) {
  const map = L.map(container).setView([0, 0], 2)
  // Add your application's tile layer here.
  const editableLayers = L.featureGroup().addTo(map)
  L.geoJSON(initialData).eachLayer((layer) => editableLayers.addLayer(layer))

  map.pm.setGlobalOptions({ layerGroup: editableLayers, snappable: true })
  map.pm.addControls({
    drawMarker: false,
    drawCircleMarker: false,
    drawCircle: false,
    drawText: false,
    cutPolygon: false,
    rotateMode: false,
  })
  map.on("pm:remove", ({ layer }) => editableLayers.removeLayer(layer))

  return { map, getData: () => editableLayers.toGeoJSON() }
}

Call const editor = createEditor("map", savedGeoJson), where savedGeoJson is your existing FeatureCollection. Call editor.getData() from your Save action and persist the result through your own API. The example uses a blank background; add your application's tile layer for geographic context.

The toolbar enables drawing and editing. For polygon drawing from your own button, use editor.map.pm.enableDraw("Polygon"). To edit existing geometry, use editor.map.pm.enableGlobalEditMode(). Call editor.map.remove() when your component unmounts.

Update your event handlers

• draw:created becomes the map's pm:create event.
• For edits, attach pm:edit to each imported or newly created layer. This fires during editing; debounce automatic saves if needed.
• Use pm:remove for removal through Geoman. Programmatic changes in your application should also update your persistence layer.

This example keeps a feature group as the export boundary and turns off circle drawing: standard GeoJSON does not preserve a Leaflet circle's radius. Check feature IDs, custom properties, multi-geometries and any custom shapes in your own round-trip tests.

Continue with the installation guide, drawing API and editing events.