Edit Mode

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:

Method	Returns	Description
enableGlobalEditMode(options)	-	Enables global Edit Mode.
disableGlobalEditMode()	-	Disables global Edit Mode.
toggleGlobalEditMode(options)	-	Toggles global Edit Mode.
globalEditModeEnabled()	Boolean	Returns true if global Edit Mode is enabled. false when disabled.
cancelGlobalDragMode()	-	Reverts the layers to the state before changing. ⭐

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:

Method	Returns	Description
enable(options)	-	Enables Edit Mode. The passed options are preserved, even when the mode is enabled via the Toolbar. options is optional.
disable()	-	Disables Edit Mode.
toggleEdit(options)	-	Toggles Edit Mode. Passed options are preserved. options is optional.
enabled()	Boolean	Returns true if Edit Mode is enabled. false when disabled.
hasSelfIntersection()	Boolean	Returns true if Line or Polygon has a self intersection.
remove()	-	Removes the layer with the same checks as GlobalRemovalMode.
getShape()	String	Returns the shape of the layer.
setOptions(options)	-	Set the options on the layer.
getOptions()	Object	Returns the options of the layer.
cancel()	-	Reverts the layer to the state before changing. ⭐

Edit Mode Options

See the available options in the table below.

Option	Default	Description
snappable	true	Enable snapping to other layers vertices for precision drawing. Can be disabled by holding the ALT key.
snapDistance	20	The distance to another vertex when a snap should happen.
snapMiddle	false	Allow snapping in the middle of two vertices (middleMarker).
snapSegment	true	Allow snapping between two vertices.
snapVertex	true	Allow snapping to vertices.
allowSelfIntersection	true	Allow/Disallow self-intersections on Polygons and Polylines.
allowSelfIntersectionEdit	false	Allow/Disallow to change vertices they are connected to a intersecting line. Only working if allowSelfIntersection is true and the layer is already self-intersecting while enabling Edit Mode.
preventMarkerRemoval	false	Disable the removal of markers/vertexes via right click.
removeLayerBelowMinVertexCount	true	If true, vertex removal that cause a layer to fall below their minimum required vertices will remove the entire layer. If false, these vertices can't be removed. Minimum vertices are 2 for Lines and 3 for Polygons.
syncLayersOnDrag	false	Defines which layers should dragged with this layer together. true syncs all layers in the same LayerGroup(s) or you pass an Array of layers to sync.
allowEditing	true	Edit-Mode for the layer can disabled (pm.enable()).
allowRemoval	true	Removing can be disabled for the layer.
allowCutting	true	Layer can be prevented from cutting.
allowRotation	true	Layer can be prevented from rotation.
draggable	true	Dragging can be disabled for the layer.
addVertexOn	click	Leaflet layer event to add a vertex to a Line or Polygon, like 'dblclick'. Here's a list.
addVertexValidation	undefined	A function for validation if a vertex (of a Line / Polygon) is allowed to add. It passes a object with [layer, marker, event}. For example to check if the layer has a certain property or if the Ctrl key is pressed.
removeVertexOn	contextmenu	Leaflet layer event to remove a vertex from a Line or Polygon, like 'dblclick'. Here's a list.
removeVertexValidation	undefined	A function for validation if a vertex (of a Line / Polygon) is allowed to remove. It passes a object with [layer, marker, event}. For example to check if the layer has a certain property or if the Ctrl key is pressed.
moveVertexValidation	undefined	A function for validation if a vertex / helper-marker is allowed to move / drag. It passes a object with [layer, marker, event}. For example to check if the layer has a certain property or if the Ctrl key is pressed.
limitMarkersToCount	-1	Shows only n markers closest to the cursor. Use -1 for no limit.
limitMarkersToZoom	-1	Shows markers when under the given zoom level. ⭐
limitMarkersToViewport	false	Shows only markers in the viewport. ⭐
limitMarkersToClick	false	Shows markers only after the layer was clicked. ⭐
pinning	false	Pin shared vertices/markers together during edit Details. ⭐
allowPinning	true	Layer can be prevented from pinning.⭐
allowScale	true	Layer can be prevented from scaling.⭐
centerScaling	true	Scale origin is the center, else it is the opposite corner. If false Alt-Key can be used. Scale Mode. ⭐
uniformScaling	true	Width and height are scaled with the same ratio. If false Shift-Key can be used. Scale Mode. ⭐
allowAutoTracing	true	Layer can be prevented from auto tracing.⭐
addVertexOnClick	false	Add Vertices while clicking on the line of Polyline or Polygon⭐
showSnapGuides	false	Enables the Snap guides.⭐
snapGuidesStyle	-	Styles the Snap Guides.⭐
allowUnion	true	Layer can be prevented from used in Union Mode.⭐
allowDifference	true	Layer can be prevented from used in Difference Mode.⭐
lassoSelectable	true	Selecting via Lasso can be disabled for the layer.⭐
requireContainment	true	While editing the layer needs to be contained in one of the layers in the Array.⭐
preventIntersection	true	While editing the layer can't intersect with the layers in the Array.⭐

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:

Event	Params	Description	Output
pm:edit	e	Fired when a layer is edited.	layer, shape
pm:update	e	Fired when Edit Mode is disabled and a layer is edited and its coordinates have changed.	layer, shape
pm:enable	e	Fired when Edit Mode on a layer is enabled.	layer, shape
pm:disable	e	Fired when Edit Mode on a layer is disabled.	layer, shape
pm:vertexadded	e	Fired when a vertex is added.	layer, indexPath, latlng, marker, shape
pm:vertexremoved	e	Fired when a vertex is removed.	layer, indexPath, marker, shape
pm:vertexclick	e	Fired when a vertex is clicked.	layer, indexPath, markerEvent, shape
pm:markerdragstart	e	Fired when dragging of a marker which corresponds to a vertex starts.	layer, indexPath, markerEvent, shape
pm:markerdrag	e	Fired when dragging a vertex-marker.	layer, indexPath, markerEvent, shape
pm:markerdragend	e	Fired when dragging of a vertex-marker ends.	layer, indexPath, markerEvent, shape, intersectionReset
pm:layerreset	e	Fired when coords of a layer are reset. E.g. by self-intersection.	layer, indexPath, markerEvent, shape
pm:snapdrag	e	Fired during a marker move/drag. Payload includes info about involved layers and snapping calculation.	shape, distance, layer = workingLayer, marker, layerInteractedWith, segment, snapLatLng
pm:snap	e	Fired when a vertex-marker is snapped to another vertex. Also fired on the marker itself.	shape, distance, layer = workingLayer, marker, layerInteractedWith, segment, snapLatLng
pm:unsnap	e	Fired when a vertex-marker is unsnapped from a vertex. Also fired on the marker itself.	shape, distance, layer = workingLayer, marker, layerInteractedWith, segment, snapLatLng
pm:intersect	e	When allowSelfIntersection: false, this event is fired as soon as a self-intersection is detected.	layer, intersection, shape
pm:centerplaced	e	Fired when the center of a circle is moved.	layer, latlng, shape
pm:change	e	Fired coordinates of the layer changed.	layer, latlngs, shape
pm:cancel	e	Fired when the layer changes are canceled. ⭐	layer

The following events are available on a map instance:

Event	Params	Description	Output
pm:globaleditmodetoggled	e	Fired when Edit Mode is toggled.	enabled, map
pm:globalcancel	e	Fired when cancel of a Mode is called. ⭐	map
pm:error	e	Fired when an error is thrown. ⭐	source, message, payload

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

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

Example

Loading...