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

Please consider sponsoring its development

Features marked with ⭐ in this documentation are available in Leaflet-Geoman Pro. Purchase Pro or get in touch

• Installation
• Getting Started
• Draw Mode
• Edit Mode
• Drag Mode
• Removal Mode
• Cut Mode
• Rotation Mode
• Split Mode ⭐
• Scale Mode ⭐
• Text Layer
• Options
  • Snapping
  • Pinning ⭐
  • Measurement ⭐
  • AutoTracing ⭐
• LayerGroup
• Customization
• Toolbar
• Utils
• Lazy loading
• Need a feature? | Existing Feature Requests

npm uninstall leaflet.pm  
npm i @geoman-io/leaflet-geoman-free  

That's it.

npm i @geoman-io/leaflet-geoman-free  

Download
leaflet-geoman.css and
leaflet-geoman.min.js
and include them in your project.

CSS

  
<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />  

JS

<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>  

import '@geoman-io/leaflet-geoman-free';  
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';  

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:

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

Enable Leaflet-Geoman on an ignored layer:

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.

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);
});

You can add a toolbar to the map to use Leaflet-Geoman features via a user interface.

// 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:

See the available options in the table below.

To pass options to the buttons you have two ways:

// make polygon not snappable during draw  
map.pm.enableDraw('Polygon',{ snappable: false }); 
map.pm.disableDraw();

// 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.

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,
});

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);
});

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);
});

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);
});

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:

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:

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:

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:

Additional to the default methods and options there are a few more possibilities for Text Layers:

map.pm.enableDraw('Text', { textOptions: { text: 'Geoman is fantastic! 🚀' } });

See the available options for textOptions in the table below.

The following methods are available on layer.pm:

The following events are available on a layer instance:

For custom text styling get the HTMLElement and add CSS styles:

layer.pm.getElement().style.color = 'red';

It is possible to create a text layer programmatically by adding a Marker with the options textMarker: true and text: 'your text'.

L.marker(latlng, {
  textMarker: true,
  text: 'Manual creation is no problem for Geoman!',
}).addTo(map);

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.

The following events are available on a map instance:

Some details about a few more powerful options:

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.

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 ⭐

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.

While drawing / cutting it is possible to auto trace the coordinates of another Layer. Exclusive for Leaflet-Geoman Pro ⭐

map.pm.setGlobalOptions({ autoTracing: true });

See the available options in the table below.

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

Leaflet-Geoman can only work correct with L.FeatureGroup and L.GeoJSON (the extended versions of L.LayerGroup) we need the events layeradd and layerremove.

The following methods are available for LayerGroups on layergroup.pm:

L.LayerGroup.prototype.addLayerOrg = L.LayerGroup.prototype.addLayer;
L.LayerGroup.prototype.addLayer = function (layer) {
  layer.addEventParent(this);
  this.addLayerOrg(layer);
  return this.fire('layeradd', { layer: layer });
};

L.LayerGroup.prototype.removeLayerOrg = L.LayerGroup.prototype.removeLayer;
L.LayerGroup.prototype.removeLayer = function (layer) {
  layer.removeEventParent(this);
  this.removeLayerOrg(layer);
  return this.fire('layerremove', { layer: layer });
};

Change the language of user-facing copy in Leaflet-Geoman

map.pm.setLang('de');

Currently available languages are cz, da, de, el, en, es, fa, fi, fr, hu, id, it, ja, ko, nl, no, pl, pt_br, ro, ru, sv, tr, ua, zh and zh_tw.
To add translations to the plugin, you can add a translation file via Pull Request.

You can also provide your own custom translations.

const customTranslation = {
  tooltips: {
    placeMarker: 'Custom Marker Translation',
  },
};

map.pm.setLang('customName', customTranslation, 'en');

The 3rd parameter is the fallback language in case you only want to override a few Strings.
See the english translation file for all available strings.

The following events are available on a map instance:

To customize the style of the drawn layer with leaflet options, you can either pass the options to enableDraw or set the options generally:

map.pm.setPathOptions({
  color: 'orange',
  fillColor: 'green',
  fillOpacity: 0.4,
});

If you want to exclude shapes from receiving these path options, use the second parameter like this:

map.pm.setPathOptions(
  { color: 'orange' },
  {
    ignoreShapes: ['Circle', 'Rectangle'],
  }
);

You can also merge the new style with the current one, if you pass the parameter merge: true:

map.pm.setPathOptions(
  { color: 'orange' },
  {
    merge: true,
  }
);

The following methods are available on map.pm.Toolbar:

There are 4 control blocks in the Toolbar: draw, edit, custom and options⭐
You can disable / enable entire blocks. To display the Toolbar as one block instead of 4, use oneBlock: true.

map.pm.addControls({
  drawControls: true,
  editControls: false,
  optionsControls: true,
  customControls: true,
  oneBlock: false,
});

Reorder the buttons with:

map.pm.Toolbar.changeControlOrder([
  'drawCircle',
  'drawRectangle',
  'removalMode',
  'editMode',
]);

Receive the current order with:

map.pm.Toolbar.getControlOrder();

You can set different positions per block draw, edit, options⭐, custom:

Possible values are 'topleft', 'topright', 'bottomleft', 'bottomright'.

map.pm.addControls({
  positions: {
    draw: 'topright',
    edit: 'topleft',
  },
});

map.pm.Toolbar.setBlockPosition('draw', 'topright');

map.pm.Toolbar.getBlockPositions();

// add a new custom control
map.pm.Toolbar.createCustomControl(options);

This effectively copies an existing control that you can customize.

// copy a rectangle and customize its name, block, title and actions
map.pm.Toolbar.copyDrawControl('Rectangle', {
  name: 'RectangleCopy',
  block: 'custom',
  title: 'Display text on hover button',
  actions: actions,
});

You can add your own actions to existing or custom buttons.

Here, we configure 3 separate actions in an array.

// creates new actions
const actions = [
  // uses the default 'cancel' action
  'cancel',
  // creates a new action that has text, no click event
  { text: 'Custom text, no click' },
  // creates a new action with text and a click event
  {
    text: 'click me',
    onClick: () => {
      alert('🙋‍♂️');
    },
  },
];

Default actions available are: cancel, removeLastVertex, finish, finishMode.

Change actions of an existing button:

map.pm.Toolbar.changeActionsOfControl('Rectangle', actions);

Pass actions to your custom buttons through the actions property mentioned under Inherit from an Existing Control

The following events are available on a map instance:

The following methods are available on L.PM.Utils:

If you want to keep your initial webpage loading size low you might want to deferre Geoman javascript to load only when actually needed on the webpage. In that case if the L.Map object is already initialized when the Geoman javascript is loaded, Geoman won't attach to the existing map object and the pm property on the map object will be undefined. In order for Geoman to attach it self to your map object you need to run the following command after Geoman javascript file was loaded.

L.PM.reInitLayer(map);

Using ES6 Module, a simple example would look something like this:

import * as L from 'leaflet'

let map = L.Map();

// map created and display on webpage
...

/* drawing script */
// at this point map.pm is undefined
if (!map.pm) {
  await import(/* webpackChunkName: "leaflet-geoman" */ '@geoman-io/leaflet-geoman-free');
  L.PM.reInitLayer(map)
}
// map.pm is now defined and can be used to draw on map

We implemented a built-in keyboard listener to make one central place where keyboard events can be accessed (without adding self a listener).

The following methods are available on map.pm.Keyboard:

The following events are available on a map instance:

I'm adopting the Issue Management of lodash which means, feature requests get the "Feature Request" Label and then get closed.
You can upvote existing feature requests (or create new ones). Upvotes make me see how much a feature is requested and prioritize their implementation.
Please see the existing Feature Requests here and upvote if you want them to be implemented.

Clone the repository and then install all npm packages:

npm install

Compile and run dev watch version:

npm run start

Compile and run build version:

npm run prepare

Run cypress test:

npm run test

Open cypress window:

npm run cypress

Open eslint check:

npm run lint

Take a look into CONTRIBUTING

A big thanks goes to @Falke-Design, he invests a lot of time and takes good care of Leaflet-Geoman.

Thanks to @ryan-morris for the implementation of Typescript and support with Typescript questions.

As I never built a leaflet plugin before, I looked heavily into the code of leaflet.draw to find out how to do stuff. So don't be surprised to see some familiar code.

I also took a hard look at the great L.GeometryUtil for some of my helper functions.

The Rotate Mode are only working because of the great calculation code of L.Path.Transform