Draw Mode

Draw Mode

Loading...

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:

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.
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.shape.setOptions(options)	-	Applies the options to the drawing shape and calls setStyle. map.pm.Draw.Line.setOptions(options).
Draw.shape.setStyle(options)	-	Applies the styles (templineStyle, hintlineStyle, pathOptions, markerStyle) to the drawing layer. map.pm.Draw.Line.setStyle(options).

Draw 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 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.
pathOptions	null	Leaflet path options for the drawn layer (Only for L.Path layers).
markerStyle	{ draggable: true }	Leaflet marker options (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. 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.
maxRadiusCircleMarker	null	Set the max radius of a CircleMarker.
editable	false	Deprecated use resizeableCircleMarker instead.
resizableCircle	true	Enables radius editing while drawing a Circle.
resizeableCircleMarker	false	Enables radius editing while drawing a CircleMarker.
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.
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:

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, test, 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:

// 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
pm:intersect	e	When 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,
});

Example

Loading...