Skip to main content

CRS.Simple Maps

Using Leaflet-Geoman with L.CRS.Simple​

Leaflet-Geoman works with maps that use Leaflet's L.CRS.Simple coordinate reference system. This is useful for floor plans, game maps, scanned documents, and other images that do not use geographic latitude and longitude.

Create the Leaflet map with crs: L.CRS.Simple, add the image overlay, and then add Geoman's controls as usual:

const map = L.map("map", {
  crs: L.CRS.Simple,
  minZoom: -2,
});

// The image uses a 1000-by-1000 coordinate space.
const bounds = L.latLngBounds([0, 0], [1000, 1000]);

L.imageOverlay("/images/floor-plan.png", bounds).addTo(map);
map.fitBounds(bounds);

map.pm.addControls({
  position: "topleft",
  drawCircle: false,
});

Drawing, editing, dragging, cutting, rotating, snapping, and removal then operate on Leaflet layers in that same coordinate space:

map.pm.enableDraw("Polygon");

map.on("pm:create", ({ layer }) => {
  console.log(layer.toGeoJSON());
});

Coordinate and measurement notes​

L.CRS.Simple coordinates are image or grid units, not longitude/latitude degrees. Leaflet still represents them with L.LatLng, so the array order is [y, x]: the first value is exposed as lat, and the second as lng. Using L.latLng(y, x) can make that order explicit.

Choose bounds that match the coordinate system you want to edit. They do not have to match the image's pixel dimensions, but the image overlay and every layer must use the same bounds. If the image has padding or represents only part of a larger grid, account for that when defining the bounds.

Lengths, radii, and areas are expressed in this simple coordinate system. They are not real-world meters or square meters unless one map unit represents a meter in your application. Convert displayed or exported measurements when your image uses another scale.