leaflet-geoman-tiny v0.1.0

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.setStyle({ 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 and Cut.

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.

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.

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:

Options

You have many options available when drawing and editing your layers (described above).
You can set the options per layer as described above, or you can set them globally for all layers. This is especially useful when you use the toolbar and can't change the options programmatically.

Examples:

layer.pm.enable({ pinning: true, snappable: false });

map.pm.setGlobalOptions({ pinning: true, snappable: false });

The following options are additionally to the Draw and Edit Mode options.

Some details about a few more powerful options:

Snapping

Snap the dragged marker/vertex to other layers for precision drawing.
Snapping can be disabled for layers with the layer option snapIgnore: true. With snapIgnore: false it will be always snappable, also if pmIgnore is set. Can also be disabled by holding the ALT key.

Pinning ⭐

When dragging a vertex/marker, you can pin all other Markers/Vertices that have the same latlng to the dragged marker. Exclusive for Leaflet-Geoman Pro ⭐

Measurement ⭐

Calculates the measurement of a layer while drawing and editing. Exclusive for Leaflet-Geoman Pro ⭐

map.pm.setGlobalOptions({ measurements: { measurement: true, displayFormat: 'metric', ... } })

See the available options in the table below.