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. |
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. |
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. |
| 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⭐ |
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 |
The following events are available on a map instance:
| Event | Params | Description | Output |
|---|---|---|---|
| pm:globaleditmodetoggled | e | Fired when Edit Mode is toggled. | enabled, map |
You can also listen to specific Edit Mode events on the map instance like this:
map.on("pm:globaleditmodetoggled", (e) => {
console.log(e);
});