Leaflet Plugin For Creating And Editing Geometry Layers
Draw, Edit, Drag, Cut, Rotate, Split⭐, Scale⭐, Measure⭐, Snap and Pin⭐ Layers
Supports Markers, CircleMarkers, Polylines, Polygons, Circles, Rectangles, ImageOverlays, LayerGroups, GeoJSON, MultiLineStrings and MultiPolygons
## [👉 Live Demo 👈](https://geoman.io/leaflet-geoman)
### Using Leaflet-Geoman in production?
[Please consider sponsoring its development](https://github.com/sponsors/codeofsumit)
#### Leaflet-Geoman Pro ⭐
Features marked with ⭐ in this documentation are available in Leaflet-Geoman Pro. [Purchase Pro](https://geoman.io/leaflet-geoman-pro#pricing) or [get in touch](mailto:sumit@geoman.io)
## Documentation
- [Installation](#installation)
- [Getting Started](#getting-started)
- [Draw Mode](#draw-mode)
- [Edit Mode](#edit-mode)
- [Drag Mode](#drag-mode)
- [Removal Mode](#removal-mode)
- [Cut Mode](#cut-mode)
- [Rotation Mode](#rotation-mode)
- [Split Mode ⭐](#split-mode-)
- [Scale Mode ⭐](#scale-mode-)
- [Text Layer](#text-layer)
- [Options](#options)
- [Snapping](#snapping)
- [Pinning ⭐](#pinning-)
- [Measurement ⭐](#measurement-)
- [AutoTracing ⭐](#autotracing-)
- [LayerGroup](#layergroup)
- [Customization](#customize)
- [Toolbar](#toolbar)
- [Utils](#utils)
- [Lazy loading](#lazy-loading)
- [Need a feature? | Existing Feature Requests](https://github.com/geoman-io/Leaflet-Geoman/issues?q=is%3Aissue+is%3Aclosed+label%3A%22feature+request%22+sort%3Areactions-%2B1-desc)
### Installation
#### Migrate from Leaflet.PM
```
npm uninstall leaflet.pm
npm i @geoman-io/leaflet-geoman-free
```
That's it.
#### Install via npm
```
npm i @geoman-io/leaflet-geoman-free
```
#### Install Manually
Download
[`leaflet-geoman.css`](https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css) and
[`leaflet-geoman.min.js`](https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js)
and include them in your project.
#### Include via CDN
CSS
```html
```
JS
```html
```
#### Include as ES6 Module
```js
import '@geoman-io/leaflet-geoman-free';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
```
### Getting Started
#### Init Leaflet-Geoman
Just include `leaflet-geoman.min.js` right after Leaflet. It initializes itself. If
you want certain layers to be ignored by Leaflet-Geoman, pass `pmIgnore: true` to
their options when creating them. Example:
```js
L.marker([51.50915, -0.096112], { pmIgnore: true }).addTo(map);
```
Enable Leaflet-Geoman on an ignored layer:
```js
layer.options.pmIgnore = false;
L.PM.reInitLayer(layer);
```
If `Opt-In` (look below) is `true`, a layers `pmIgnore` property has to be set to `false` to get initiated.
#### Opt-In
If you want to use Leaflet-Geoman as opt-in, call the following function right after importing:
```js
L.PM.setOptIn(true);
```
And to disable it:
```js
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:
```js
const map = L.map('map', { pmIgnore: false });
```
All layers will be ignored by Leaflet-Geoman, unless you specify `pmIgnore: false` on a layer:
```js
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:
```js
map.on('pm:create', (e) => {
e.layer.options.pmIgnore = false;
L.PM.reInitLayer(e.layer);
});
```
#### Leaflet-Geoman Toolbar
You can add a toolbar to the map to use Leaflet-Geoman features via a user interface.
```js
// add Leaflet-Geoman controls with some options to the map
map.pm.addControls({
position: 'topleft',
drawCircle: false,
});
```
The following methods are available on `map.pm`:
| Method | Returns | Description |
| :---------------------------- | :-------- | :------------------------------------------------------------------------------------------------------------ |
| addControls(`options`) | - | Adds the Toolbar to the map. The `options` are optional. Buttons can be removed with setting them to `false`. |
| removeControls() | - | Removes the Toolbar from the map. |
| toggleControls() | - | Toggle the visiblity of the Toolbar. |
| controlsVisible() | `Boolean` | Returns `true` if the Toolbar is visible on the map. |
See the available options in the table below.
| Option | Default | Description |
| :----------------- | :---------- | :----------------------------------------------------------------------------------------------- |
| position | `'topleft'` | Toolbar position, possible values are `'topleft'`, `'topright'`, `'bottomleft'`, `'bottomright'` |
| positions | `Object` | The position of each block (`draw`, `edit`, `custom`, `options`⭐) can be customized. If not set, the value from `position` is taken. Default: `{draw: '', edit: '', options: '', custom: ''}` [Block Position](#toolbar-block-position) |
| drawMarker | `true` | Adds button to draw Markers. |
| drawCircleMarker | `true` | Adds button to draw CircleMarkers. |
| drawPolyline | `true` | Adds button to draw Line. |
| drawRectangle | `true` | Adds button to draw Rectangle. |
| drawPolygon | `true` | Adds button to draw Polygon. |
| drawCircle | `true` | Adds button to draw Circle. |
| drawText | `true` | Adds button to draw Text. |
| editMode | `true` | Adds button to toggle Edit Mode for all layers. |
| dragMode | `true` | Adds button to toggle Drag Mode for all layers. |
| cutPolygon | `true` | Adds button to cut a hole in a Polygon or Line. |
| removalMode | `true` | Adds a button to remove layers. |
| rotateMode | `true` | Adds a button to rotate layers. |
| oneBlock | `false` | All buttons will be displayed as one block [Customize Controls](#customize-controls). |
| drawControls | `true` | Shows all draw buttons / buttons in the `draw` block. |
| editControls | `true` | Shows all edit buttons / buttons in the `edit` block. |
| customControls | `true` | Shows all buttons in the `custom` block. |
| optionsControls | `true` | Shows all options buttons / buttons in the `option` block ⭐. |
| pinningOption | `true` | Adds a button to toggle the Pinning Option ⭐. |
| snappingOption | `true` | Adds a button to toggle the Snapping Option ⭐. |
| splitMode | `true` | Adds a button to toggle the Split Mode for all layers ⭐. |
| scaleMode | `true` | Adds a button to toggle the Scale Mode for all layers ⭐. |
| autoTracingOption | `false` | Adds a button to toggle the Auto Tracing Option ⭐. |
To pass options to the buttons you have two ways:
```js
// make polygon not snappable during draw
map.pm.enableDraw('Polygon',{ snappable: false });
map.pm.disableDraw();
```
```js
// make all layers not snappable during draw
map.pm.setGlobalOptions({ snappable: false });
```
The options will persist, even when the mode is enabled/disabled via the toolbar.
All available options for drawing and editing are specified in the sections below.
### Draw Mode
Use Draw Mode on a map like this:
```js
// 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`:
| Method | Returns | Description |
| :------------------------------------------- | :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| enableDraw(`shape`,`options`) | - | Enable Draw Mode with the passed shape. The `options` are optional. |
| disableDraw() | - | Disable Draw Mode. |
| Draw.getShapes() | `Array` | Array of available shapes. |
| Draw.getActiveShape() | `String` | Returns the active shape. |
| globalDrawModeEnabled() | `Boolean` | Returns `true` if global Draw Mode is enabled. `false` when disabled. |
| setPathOptions(`options`, `optionsModifier`) | - | Customize the style of the drawn layer. Only for L.Path layers. Shapes can be excluded with a `ignoreShapes` array or merged with the current style with `merge: true` in `optionsModifier` [Details](#customize-style). |
| setGlobalOptions(`options`) | - | Set `globalOptions` and apply them. |
| applyGlobalOptions() | - | Apply the current `globalOptions` to all existing layers. |
| getGlobalOptions() | `Object` | Returns the `globalOptions`. |
| getGeomanLayers(`Boolean`) | `Array` | Returns all Leaflet-Geoman layers on the map as array. Pass `true` to get a L.FeatureGroup. |
| getGeomanDrawLayers(`Boolean`) | `Array` | Returns all drawn Leaflet-Geoman layers on the map as array. Pass `true` to get a L.FeatureGroup. |
| Draw..setOptions(`options`) | - | Applies the options to the drawing shape and calls `setStyle`. `map.pm.Draw.Line.setOptions(options)`. |
| Draw..setStyle(`options`) | - | Applies the styles (`templineStyle`, `hintlineStyle`, `pathOptions`, `markerStyle`) to the drawing layer. `map.pm.Draw.Line.setStlye(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. |
| requireSnapToFinish | `false` | Require the last point of a shape to be snapped. |
| tooltips | `true` | Show helpful tooltips for your user. |
| allowSelfIntersection | `true` | Allow self intersections. |
| templineStyle | `{ color: '#3388ff' },` | [Leaflet path options](https://leafletjs.com/reference.html#path) for the lines between drawn vertices/markers. |
| hintlineStyle | `{ color: '#3388ff', dashArray: [5, 5] }` | [Leaflet path options](https://leafletjs.com/reference.html#path) for the helper line between last drawn vertex and the cursor. |
| pathOptions | `null` | [Leaflet path options](https://leafletjs.com/reference.html#path) for the drawn layer (Only for L.Path layers). |
| markerStyle | `{ draggable: true }` | [Leaflet marker options](https://leafletjs.com/reference.html#marker-icon) (only for drawing markers). |
| cursorMarker | `true` | Show a marker at the cursor. |
| finishOn | `null` | Leaflet layer event to finish the drawn shape, like `'dblclick'`. [Here's a list](http://leafletjs.com/reference.html#interactive-layer-click). `snap` is also an option for Line, Polygon and Rectangle. |
| hideMiddleMarkers | `false` | Hide the middle Markers in Edit Mode from Polyline and Polygon. |
| minRadiusCircle | `null` | Set the min radius of a `Circle`. |
| maxRadiusCircle | `null` | Set the max radius of a `Circle`. |
| minRadiusCircleMarker | `null` | Set the min radius of a `CircleMarker` when editable is active. |
| maxRadiusCircleMarker | `null` | Set the max radius of a `CircleMarker` when editable is active. |
| editable | `false` | Makes a `CircleMarker` editable like a `Circle`. |
| markerEditable | `true` | Markers and CircleMarkers are editable during the draw-session (you can drag them around immediately after drawing them). |
| continueDrawing | `false` / `true` | Draw Mode stays enabled after finishing a layer to immediately draw the next layer. Defaults to `true` for Markers and CircleMarkers and `false` for all other layers. |
| rectangleAngle | `0` | Rectangle can drawn with a rotation angle 0-360 degrees |
| layersToCut | `[]` | Cut-Mode: Only the passed layers can be cut. Cutted layers are removed from the Array until no layers are left anymore and cutting is working on all layers again. |
| textOptions | `{}` | Text Layer options. Look into [textOptions](#text-layer-drawing). |
| closedPolygonEdge | `false` | Closes the Polygon while drawing ⭐. |
| closedPolygonFill | `false` | Shows the Polygon fill while drawing ⭐. |
| autoTracing | `false` | Enables auto tracing while drawing ⭐. |
| allowCircleCut | `true` | Allow Cutting of a Circle ⭐. |
This options can only set over `map.pm.setGlobalOptions({})`:
| Option | Default | Description |
| :--------- | :------ | :--------------------------------------------------------- |
| layerGroup | `map` | Add the created layers to a layergroup instead to the map. |
You can listen to map events to hook into the drawing procedure like this:
```js
map.on('pm:drawstart', (e) => {
console.log(e);
});
```
Here's a list of map events you can listen to:
| Event | Params | Description | Output |
| :----------------------- | :----- | :-------------------------------------------------------------------------------------- | :------------------------ |
| pm:globaldrawmodetoggled | `e` | Fired when Drawing Mode is toggled. | `enabled`, `shape`, `map` |
| pm:drawstart | `e` | Called when Draw Mode is enabled. Payload includes the shape type and working layer. | `shape`, `workingLayer` |
| pm:drawend | `e` | Called when Draw Mode is disabled. Payload includes the shape type. | `shape` |
| pm:create | `e` | Called when a shape is drawn/finished. Payload includes shape type and the drawn layer. | `shape`, `layer` |
There are also several events for layers during draw. Register an event like this:
```js
// 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:
| Event | Params | Description | Output |
| :-------------- | :----- | :-------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------ |
| pm:vertexadded | `e` | Called when a new vertex is added. Payload includes the new vertex, it's marker, index, working layer and shape type. | `shape`, `workingLayer`, `marker`, `latlng` |
| 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 is snapped. Payload is the same as in `snapdrag`. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` |
| pm:unsnap | `e` | Fired when a vertex is unsnapped. Payload is the same as in `snapdrag`. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` |
| pm:centerplaced | `e` | Called when the center of a circle is placed/moved. | `shape`, `workingLayer`, `latlng` |
| pm:change | `e` | Fired coordinates of the layer changed. | `layer`, `latlngs`, `shape` |
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.
```js
//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:
```js
// 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:
```js
// 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. |
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](http://leafletjs.com/reference.html#interactive-layer-click). |
| 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](http://leafletjs.com/reference.html#interactive-layer-click). |
| 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](#pinning-⭐). ⭐ |
| 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](#scale-mode-). ⭐ |
| uniformScaling | `true` | Width and height are scaled with the same ratio. If `false` Shift-Key can be used. [Scale Mode](#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:
```js
// 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:
```js
map.on('pm:globaleditmodetoggled', (e) => {
console.log(e);
});
```
### Drag Mode
You can enable Drag Mode for all layers on a map like this:
```js
// enable Drag Mode like this:
map.pm.enableGlobalDragMode();
```
Or you enable dragging for a specific layer:
```js
layer.pm.enableLayerDrag();
```
The following methods are available on `layer.pm`:
| Method | Returns | Description |
| :----------------- | :-------- | :--------------------------------------------- |
| enableLayerDrag() | - | Enables dragging for the layer. |
| disableLayerDrag() | - | Disables dragging for the layer. |
| layerDragEnabled() | `Boolean` | Returns if Drag Mode is enabled for the layer. |
| dragging() | `Boolean` | Returns if the layer is currently dragging. |
The following methods are available on `map.pm`:
| Method | Returns | Description |
| :---------------------- | :-------- | :-------------------------------------------------------------------- |
| enableGlobalDragMode() | - | Enables global Drag Mode. |
| disableGlobalDragMode() | - | Disables global Drag Mode. |
| toggleGlobalDragMode() | - | Toggles global Drag Mode. |
| globalDragModeEnabled() | `Boolean` | Returns `true` if global Drag Mode is enabled. `false` when disabled. |
The following events are available on a layer instance:
| Event | Params | Description | Output |
| :------------- | :----- | :------------------------------------------- | :------------------------------------------------------------------------ |
| pm:dragstart | `e` | Fired when a layer starts being dragged. | `layer`, `shape` |
| pm:drag | `e` | Fired when a layer is dragged. | `layer`, `containerPoint`,`latlng`, `layerPoint`,`originalEvent`, `shape` |
| pm:dragend | `e` | Fired when a layer stops being dragged. | `layer`, `shape` |
| pm:dragenable | `e` | Fired when Drag Mode on a layer is enabled. | `layer`, `shape` |
| pm:dragdisable | `e` | Fired when Drag Mode on a layer is disabled. | `layer`, `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:globaldragmodetoggled | `e` | Fired when Drag Mode is toggled. | `enabled`, `map` |
You can also listen to specific Drag Mode events on the map instance like this:
```js
map.on('pm:globaldragmodetoggled', (e) => {
console.log(e);
});
```
### Removal Mode
You can enable Removal Mode for all layers on a map like this:
```js
// enable removal mode like this:
map.pm.enableGlobalRemovalMode();
```
The following methods are available on `map.pm`:
| Method | Returns | Description |
| :------------------------- | :-------- | :----------------------------------------------------------------------- |
| enableGlobalRemovalMode() | - | Enables global removal mode. |
| disableGlobalRemovalMode() | - | Disables global removal mode. |
| toggleGlobalRemovalMode() | - | Toggles global removal mode. |
| globalRemovalModeEnabled() | `Boolean` | Returns `true` if global removal mode is enabled. `false` when disabled. |
The following events are available on a layer instance:
| Event | Params | Description | Output |
| :-------- | :----- | :--------------------------------------------- | :--------------- |
| pm:remove | `e` | Fired when a layer is removed via Removal Mode | `layer`, `shape` |
The following events are available on a map instance:
| Event | Params | Description | Output |
| :-------------------------- | :----- | :------------------------------------------------------- | :--------------- |
| pm:globalremovalmodetoggled | `e` | Fired when Removal Mode is toggled | `enabled`, `map` |
| pm:remove | `e` | Fired when a layer is removed via Removal Mode | `layer`, `shape` |
| layerremove | `e` | Standard Leaflet event. Fired when any layer is removed. | `layer` |
You can also listen to specific removal mode events on the map instance like this:
```js
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.
```js
// enable cutting mode
map.pm.enableGlobalCutMode({
allowSelfIntersection: false,
});
```
Available options are the same as in [Draw Mode](#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`:
| Method | Returns | Description |
| :----------------------------- | :-------- | :------------------------------------------------------------------- |
| enableGlobalCutMode(`options`) | - | Enable Cut Mode. |
| disableGlobalCutMode() | - | Disable Cut Mode. |
| toggleGlobalCutMode(`options`) | - | Toggle Cut Mode. |
| globalCutModeEnabled() | `Boolean` | Returns `true` if global cut mode is enabled. `false` when disabled. |
The following events are available on a layer instance:
| Event | Params | Description | Output |
| :------ | :----- | :---------------------------------- | :-------------------------------- |
| pm:cut | `e` | Fired when the layer being cut. | `shape`, `layer`, `originalLayer` |
| pm:edit | `e` | Fired when a layer is edited / cut. | `layer`, `shape` |
The following events are available on a map instance:
| Event | Params | Description | Output |
| :---------------------- | :----- | :--------------------------------- | :-------------------------------- |
| pm:globalcutmodetoggled | `e` | Fired when Cut Mode is toggled. | `enabled`, `map` |
| pm:cut | `e` | Fired when any layer is being cut. | `shape`, `layer`, `originalLayer` |
### 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)`.
```js
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:
```js
map.pm.enableGlobalRotateMode();
```
The following methods are available on `map.pm`:
| Method | Returns | Description |
| :------------------------ | :-------- | :---------------------------------------------------------------------- |
| enableGlobalRotateMode() | - | Enables global Rotate Mode. |
| disableGlobalRotateMode() | - | Disables global Rotate Mode. |
| toggleGlobalRotateMode() | - | Toggles global Rotate Mode. |
| globalRotateModeEnabled() | `Boolean` | Returns `true` if global Rotate Mode is enabled. `false` when disabled. |
The following methods are available for layers under `layer.pm`:
| Method | Returns | Description |
| :---------------------------- | :-------- | :----------------------------------------------- |
| enableRotate() | - | Enables Rotate Mode on the layer. |
| disableRotate() | - | Disables Rotate Mode on the layer. |
| rotateEnabled() | `Boolean` | Returns if Rotate Mode is enabled for the layer. |
| rotateLayer(`degrees`) | - | Rotates the layer by `x` degrees. |
| rotateLayerToAngle(`degrees`) | - | Rotates the layer to `x` degrees. |
| getAngle() | `Degrees` | Returns the angle of the layer in degrees. |
| setInitAngle(`degrees`) | - | Set the initial angle of the layer in degrees. |
The following events are available on a layer instance:
| Event | Params | Description | Output |
| :--------------- | :----- | :------------------------------------------- | :----------------------------------------------------------------------------------- |
| pm:rotateenable | `e` | Fired when rotation is enabled for a layer. | `layer`, `helpLayer`, `shape` |
| pm:rotatedisable | `e` | Fired when rotation is disabled for a layer. | `layer`, `shape` |
| pm:rotatestart | `e` | Fired when rotation starts on a layer. | `layer`, `helpLayer`, `startAngle`, `originLatLngs` |
| pm:rotate | `e` | Fired when a layer is rotated. | `layer`, `helpLayer`, `startAngle`, `angle`, `angleDiff`, `oldLatLngs`, `newLatLngs` |
| pm:rotateend | `e` | Fired when rotation ends on a layer. | `layer`, `helpLayer`, `startAngle`, `angle`, `originLatLngs`, `newLatLngs` |
| 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:globalrotatemodetoggled | `e` | Fired when Rotate Mode is toggled. | `enabled`, `map` |
| pm:rotateenable | `e` | Fired when rotation is enabled for a layer. | `layer`, `helpLayer`, `shape` |
| pm:rotatedisable | `e` | Fired when rotation is disabled for a layer. | `layer`, `shape` |
| pm:rotatestart | `e` | Fired when rotation starts on a layer. | `layer`, `helpLayer`, `startAngle`, `originLatLngs` |
| pm:rotate | `e` | Fired when a layer is rotated. | `layer`, `helpLayer`, `startAngle`, `angle`, `angleDiff`, `oldLatLngs`, `newLatLngs` |
| pm:rotateend | `e` | Fired when rotation ends on a layer. | `layer`, `helpLayer`, `startAngle`, `angle`, `originLatLngs`, `newLatLngs` |
### 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.
```js
// enable cutting mode
map.pm.enableGlobalSplitMode({
allowSelfIntersection: false,
});
```
Available options are the same as in [Draw Mode](#draw-mode) and in table below:
| Option | Default | Description |
| :-------------------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| splitOnlyMarkedLayers | `false` | If it is set to `false` layers can be excluded with the option `splitMark: false`. Set it to `true` to enable splitting only for the layers with the option `splitMark: true`. |
The following methods are available on `map.pm`:
| Method | Returns | Description |
| :------------------------------- | :-------- | :--------------------------------------------------------------------- |
| enableGlobalSplitMode(`options`) | - | Enable Split Mode. |
| disableGlobalSplitMode() | - | Disable Split Mode. |
| toggleGlobalSplitMode(`options`) | - | Toggle Split Mode. |
| globalSplitModeEnabled() | `Boolean` | Returns `true` if global Split Mode is enabled. `false` when disabled. |
The following events are available on a layer instance:
| Event | Params | Description | Output |
| :------- | :----- | :-------------------------------------------------------------------------------------------------- | :----------------------------------------------- |
| pm:split | `e` | Fired when the layer being split. Returns a LayerGroup containing all resulting layers in `layers`. | `shape`, `splitLayer`, `layers`, `originalLayer` |
The following events are available on a map instance:
| Event | Params | Description | Output |
| :------------------------ | :----- | :----------------------------------- | :----------------------------------------------- |
| pm:globalsplitmodetoggled | `e` | Fired when Split Mode is toggled. | `enabled`, `map` |
| pm:split | `e` | Fired when any layer is being split. | `shape`, `splitLayer`, `layers`, `originalLayer` |
### Scale Mode ⭐
You can enable Scale Mode for all layers on a map like this:
```js
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`:
| Method | Returns | Description |
| :----------------------- | :-------- | :--------------------------------------------------------------------- |
| enableGlobalScaleMode() | - | Enables global Scale Mode. |
| disableGlobalScaleMode() | - | Disables global Scale Mode. |
| toggleGlobalScaleMode() | - | Toggles global Scale Mode. |
| globalScaleModeEnabled() | `Boolean` | Returns `true` if global Scale Mode is enabled. `false` when disabled. |
The following methods are available for layers under `layer.pm`:
| Method | Returns | Description |
| :-------------------- | :-------- | :---------------------------------------------------------------------------------------------------------------------------- |
| enableScale() | - | Enables Scale Mode on the layer. |
| disableScale() | - | Disables Scale Mode on the layer. |
| scaleEnabled() | `Boolean` | Returns if Scale Mode is enabled for the layer. |
| scaleLayer(`percent`) | - | Scale the layer by `x` percent. Also an Object with `{w: width, h: height}` can be passed. Scale up `> 0` , scale down `< 0`. |
The following events are available on a layer instance:
| Event | Params | Description | Output |
| :-------------- | :----- | :---------------------------------------- | :----------------------------------------------------- |
| pm:scaleenable | `e` | Fired when scale is enabled for a layer. | `layer`, `helpLayer` |
| pm:scaledisable | `e` | Fired when scale is disabled for a layer. | `layer` |
| pm:scalestart | `e` | Fired when scale starts on a layer. | `layer`, `helpLayer`, `originLatLngs`, `originLatLngs` |
| pm:scale | `e` | Fired when a layer is scaled. | `layer`, `helpLayer`, `oldLatLngs`, `newLatLngs` |
| pm:scaleend | `e` | Fired when scale ends on a layer. | `layer`, `helpLayer`, `originLatLngs`, `newLatLngs` |
The following events are available on a map instance:
| Event | Params | Description | Output |
| :------------------------ | :----- | :---------------------------------------- | :----------------------------------------------------- |
| pm:globalscalemodetoggled | `e` | Fired when Scale Mode is toggled. | `enabled`, `map` |
| pm:scaleenable | `e` | Fired when scale is enabled for a layer. | `layer`, `helpLayer` |
| pm:scaledisable | `e` | Fired when scale is disabled for a layer. | `layer` |
| pm:scalestart | `e` | Fired when scale starts on a layer. | `layer`, `helpLayer`, `originLatLngs`, `originLatLngs` |
| pm:scale | `e` | Fired when a layer is scaled. | `layer`, `helpLayer`, `oldLatLngs`, `newLatLngs` |
| pm:scaleend | `e` | Fired when scale ends on a layer. | `layer`, `helpLayer`, `originLatLngs`, `newLatLngs` |
### Text Layer
Additional to the default methods and options there are a few more possibilities for Text Layers:
#### Text Layer Drawing:
```js
map.pm.enableDraw('Text', { textOptions: { text: 'Geoman is fantastic! 🚀' } });
```
See the available options for `textOptions` in the table below.
| Option | Default | Description |
| :------------- | :------ | :------------------------------------------------------------ |
| text | `` | Predefined text. |
| focusAfterDraw | `true` | Directly after placing the marker, text editing is activated. |
| removeIfEmpty | `true` | The text layer is removed if no text is written. |
| className | `` | Custom CSS Classes. Separated by a space. |
#### Text Layer Editing:
The following methods are available on `layer.pm`:
| Method | Returns | Description |
| :-------------- | :------------ | :-------------------------------------------------------------------- |
| focus() | - | Activate text editing. Layer needs first to be enabled `.enable()`. |
| blur() | - | Deactivate text editing. Layer needs first to be enabled `.enable()`. |
| hasFocus() | `Boolean` | Is text editing active. |
| getElement() | `HTMLElement` | Returns the `
