@deepuppeds/leaflet-geoman v2.14.1

Opt-In

If you want to use Leaflet-Geoman as opt-in, call the following function right after importing:

L.PM.setOptIn(true);

And to disable it:

L.PM.setOptIn(false);

If you have enabled opt-in before you init the map, you need to specify pmIgnore: false in the map options:

const map = L.map('map', { pmIgnore: false });

All layers will be ignored by Leaflet-Geoman, unless you specify pmIgnore: false on a layer:

L.marker([51.50915, -0.096112], { pmIgnore: false }).addTo(map);

Newly drawn layers will be ignored as well.

To prevent this you can add the following event handler:

map.on('pm:create', (e) => {
  e.layer.options.pmIgnore = false;
  L.PM.reInitLayer(e.layer);
});

Leaflet-Geoman Toolbar

Draw Mode

Use Draw Mode on a map like this:

// enable polygon Draw Mode
map.pm.enableDraw('Polygon', {
  snappable: true,
  snapDistance: 20,
});

// disable Draw Mode
map.pm.disableDraw();

Currently available shapes are Marker, CircleMarker, Circle, Line, Rectangle, Polygon, Text, Cut, CutCircle⭐ and Split⭐.

The following methods are available on map.pm:

See the available options in the table below.

This options can only set over map.pm.setGlobalOptions({}):

You can listen to map events to hook into the drawing procedure like this:

map.on('pm:drawstart', (e) => {
  console.log(e);
});

Here's a list of map events you can listen to:

There are also several events for layers during draw. Register an event like this:

// listen to vertexes being added to currently drawn layer (called workingLayer)
map.on('pm:drawstart', ({ workingLayer }) => {
  workingLayer.on('pm:vertexadded', (e) => {
    console.log(e);
  });
});

Here's a list of layer events you can listen to:

For making the snapping to other layers selective, you can add the "snapIgnore" option to your layers to disable the snapping to them during drawing.

//This layer will be ignored by the snapping engine during drawing
L.geoJSON(data, {
  snapIgnore: true,
});

Edit Mode

You can enable Edit Mode for all layers on a map like this:

// enable global Edit Mode
map.pm.enableGlobalEditMode(options);

The following methods are available on map.pm:

Enable Edit Mode only for one layer:

// enable Edit Mode
layer.pm.enable({
  allowSelfIntersection: false,
});

The following methods are available for layers under layer.pm:

See the available options in the table below.

You can listen to events related to editing on events like this:

// listen to when a layer is changed in Edit Mode
layer.on('pm:edit', (e) => {
  console.log(e);
});

The following events are available on a layer instance:

The following events are available on a map instance:

You can also listen to specific Edit Mode events on the map instance like this:

map.on('pm:globaleditmodetoggled', (e) => {
  console.log(e);
});

Drag Mode

You can enable Drag Mode for all layers on a map like this:

// enable Drag Mode like this:
map.pm.enableGlobalDragMode();

Or you enable dragging for a specific layer:

layer.pm.enableLayerDrag();

The following methods are available on layer.pm:

The following methods are available on map.pm:

The following events are available on a layer instance:

The following events are available on a map instance:

You can also listen to specific Drag Mode events on the map instance like this:

map.on('pm:globaldragmodetoggled', (e) => {
  console.log(e);
});

Removal Mode

You can enable Removal Mode for all layers on a map like this:

// enable removal mode like this:
map.pm.enableGlobalRemovalMode();

The following methods are available on map.pm:

The following events are available on a layer instance:

The following events are available on a map instance:

You can also listen to specific removal mode events on the map instance like this:

map.on('pm:globalremovalmodetoggled', (e) => {
  console.log(e);
});

Cut Mode

Enables drawing for the shape "Cut" to draw a polygon that gets subtracted from all underlying polygons. This way you can create holes, cut polygons or polylines in half or remove parts of it.

Important: the cutted layer will be replaced, not updated. Listen to the pm:cut event to update your layer references in your code. The pm:cut event will provide you with the original layer and returns the resulting layer(s) that is/are added to the map as a Polygon / MultiPolygon or Polyline / MultiPolyline.

// enable cutting mode
map.pm.enableGlobalCutMode({
  allowSelfIntersection: false,
});

Available options are the same as in Draw Mode. If the option layersToCut: [layer1, layer2] is passed, only this certain layers will be cutted.

In the Pro-Version ⭐ is the option allowCircleCut available, which makes it possible to cut Circles.

Over the Global Options you enable cutting in shape form of a Circle cutAsCircle: true for the cut-button. Else you can enable CutCircle over map.pm.enableDraw('CutCircle')

The following methods are available on map.pm:

The following events are available on a layer instance:

The following events are available on a map instance:

Rotation Mode

The rotation is clockwise. It starts in the North with 0° and goes over East (90°) and South (180°) to West (270°). The rotation center is the center (layer.getCenter()) of a Polygon with the LatLngs of the layer.

Rotation of Rectangles:

If a rotated rectangle is created programmatically, it is important to set the initial angle with setInitAngle(degrees).

const rect = L.rectangle(coords).addTo(map); // the Leaflet constructor always creates a non-rotated rectangle
rect.setLatLngs(coords); // setting the rotated coordinates
rect.pm.setInitAngle(angle);

You can enable Rotate Mode for all layers on a map like this:

map.pm.enableGlobalRotateMode();

The following methods are available on map.pm:

The following methods are available for layers under layer.pm:

The following events are available on a layer instance:

The following events are available on a map instance:

Split Mode ⭐

Enable drawing for the shape "Split" to draw a line that splits all underlying Polygons and Polylines.

Important: the splitted layer will be replaced, not updated. Listen to the pm:split event to update your layer references in your code. The pm:split event will provide you with the original layer and returns the resulting layer(s) that is/are added to the map as a Polygon / MultiPolygon or Polyline / MultiPolyline.

// enable cutting mode
map.pm.enableGlobalSplitMode({
  allowSelfIntersection: false,
});

Available options are the same as in Draw Mode and in table below:

The following methods are available on map.pm:

The following events are available on a layer instance:

The following events are available on a map instance:

Scale Mode ⭐

You can enable Scale Mode for all layers on a map like this:

map.pm.enableGlobalScaleMode();

With the option centerScaling the scale origin cen be the center of the layer or the opposite corner of the dragged marker. If false Alt-Key can be used. The option uniformScaling the scales the width and the height with the same ratio. If false Shift-Key can be used.

The following methods are available on map.pm:

The following methods are available for layers under layer.pm:

The following events are available on a layer instance:

The following events are available on a map instance: