Skip to main content

Draw Mode

Draw Mode

Use Draw Mode on a map like this:

// enable polygon Draw Mode"Polygon", {
snappable: true,
snapDistance: 20,

// disable Draw Mode;

Currently available shapes are Marker, CircleMarker, Circle, Line, Rectangle, Polygon, Text, Cut, CutCircle⭐ and Split⭐.

The following methods are available on

enableDraw(shape,options)-Enable Draw Mode with the passed shape. The options are optional.
disableDraw()-Disable Draw Mode.
Draw.getShapes()ArrayArray of available shapes.
Draw.getActiveShape()StringReturns the active shape.
globalDrawModeEnabled()BooleanReturns 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.
setGlobalOptions(options)-Set globalOptions and apply them.
applyGlobalOptions()-Apply the current globalOptions to all existing layers.
getGlobalOptions()ObjectReturns the globalOptions.
getGeomanLayers(Boolean)ArrayReturns all Leaflet-Geoman layers on the map as array. Pass true to get a L.FeatureGroup.
getGeomanDrawLayers(Boolean)ArrayReturns all drawn Leaflet-Geoman layers on the map as array. Pass true to get a L.FeatureGroup.
Draw.shape.setOptions(options)-Applies the options to the drawing shape and calls setStyle.
Draw.shape.setStyle(options)-Applies the styles (templineStyle, hintlineStyle, pathOptions, markerStyle) to the drawing layer.

See the available options in the table below.

snappabletrueEnable snapping to other layers vertices for precision drawing. Can be disabled by holding the ALT key.
snapDistance20The distance to another vertex when a snap should happen.
snapMiddlefalseAllow snapping in the middle of two vertices (middleMarker).
snapSegmenttrueAllow snapping between two vertices.
requireSnapToFinishfalseRequire the last point of a shape to be snapped.
tooltipstrueShow helpful tooltips for your user.
allowSelfIntersectiontrueAllow self intersections.
templineStyle{ color: '#3388ff' },Leaflet path options for the lines between drawn vertices/markers.
hintlineStyle{ color: '#3388ff', dashArray: [5, 5] }Leaflet path options for the helper line between last drawn vertex and the cursor.
pathOptionsnullLeaflet path options for the drawn layer (Only for L.Path layers).
markerStyle{ draggable: true }Leaflet marker options (only for drawing markers).
cursorMarkertrueShow a marker at the cursor.
finishOnnullLeaflet layer event to finish the drawn shape, like 'dblclick'. Here's a list. snap is also an option for Line, Polygon and Rectangle.
hideMiddleMarkersfalseHide the middle Markers in Edit Mode from Polyline and Polygon.
minRadiusCirclenullSet the min radius of a Circle.
maxRadiusCirclenullSet the max radius of a Circle.
minRadiusCircleMarkernullSet the min radius of a CircleMarker.
maxRadiusCircleMarkernullSet the max radius of a CircleMarker.
editablefalseDeprecated use resizeableCircleMarker instead.
resizableCircletrueEnables radius editing while drawing a Circle.
resizeableCircleMarkerfalseEnables radius editing while drawing a CircleMarker.
markerEditabletrueMarkers and CircleMarkers are editable during the draw-session (you can drag them around immediately after drawing them).
continueDrawingfalse / trueDraw 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.
rectangleAngle0Rectangle 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.
closedPolygonEdgefalseCloses the Polygon while drawing ⭐.
closedPolygonFillfalseShows the Polygon fill while drawing ⭐.
autoTracingfalseEnables auto tracing while drawing ⭐.
allowCircleCuttrueAllow Cutting of a Circle ⭐.

This options can only set over{}):

layerGroupmapAdd the created layers to a layergroup instead to the map.

You can listen to map events to hook into the drawing procedure like this:

map.on("pm:drawstart", (e) => {

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

pm:globaldrawmodetoggledeFired when Drawing Mode is toggled.enabled, test, shape, map
pm:drawstarteCalled when Draw Mode is enabled. Payload includes the shape type and working layer.shape, workingLayer
pm:drawendeCalled when Draw Mode is disabled. Payload includes the shape type.shape
pm:createeCalled 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:

// listen to vertexes being added to currently drawn layer (called workingLayer)
map.on("pm:drawstart", ({ workingLayer }) => {
workingLayer.on("pm:vertexadded", (e) => {

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

pm:vertexaddedeCalled 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:snapdrageFired during a marker move/drag. Payload includes info about involved layers and snapping calculation.shape, distance, layer = workingLayer, marker, layerInteractedWith, segment, snapLatLng
pm:snapeFired when a vertex is snapped. Payload is the same as in snapdrag.shape, distance, layer = workingLayer, marker, layerInteractedWith, segment, snapLatLng
pm:unsnapeFired when a vertex is unsnapped. Payload is the same as in snapdrag.shape, distance, layer = workingLayer, marker, layerInteractedWith, segment, snapLatLng
pm:centerplacedeCalled when the center of a circle is placed/moved.shape, workingLayer, latlng
pm:changeeFired coordinates of the layer changed.layer, latlngs, shape
pm:intersecteWhen allowSelfIntersection: false, this event is fired as soon as a self-intersection is detected.layer, intersection, 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.
//This layer will be ignored by the snapping engine during drawing
L.geoJSON(data, {
snapIgnore: true,