Leaflet Lasso Selection ⭐

Select multiple Leaflet layers with a lasso

Lasso Select Mode allows you to select multiple layers on your map by drawing a freehand shape around them. This feature enables quick and intuitive selection of layers for further manipulation or analysis.

Lasso selection is a Leaflet-Geoman Pro feature. Install and initialize the Pro package before using these methods. It selects existing layers; it does not cut or merge their geometry.

Use intersect to include layers that touch the lasso. Use contain to include only layers completely inside it. Start with reset mode for a fresh selection on every draw, then use append or subtract for adjustments.

You can enable Lasso Select Mode on an initialized map like this:

// enable Lasso Select Mode
map.pm.enableGlobalLassoMode();

// disable Lasso Select Mode
map.pm.disableGlobalLassoMode();

The following methods are available on map.pm:

Method	Returns	Description
enableGlobalLassoMode(options)	-	Enables global Lasso Select Mode with optional configuration.
disableGlobalLassoMode()	-	Disables global Lasso Select Mode.
toggleGlobalLassoMode()	-	Toggles global Lasso Select Mode.
globalLassoModeEnabled()	Boolean	Returns true if global Lasso Select Mode is enabled, false if not.
getLassoMode()	String	Returns the current Lasso mode.
getLassoSelectMode()	String	Returns the current Lasso select mode.
setLassoAppendMode()	-	Sets the Lasso Mode to Append. Layers will be added to the selection.
setLassoSubtractMode()	-	Sets the Lasso Mode to Subtract. Layers will be removed from the selection.
setLassoResetMode()	-	Sets the Lasso Mode to Reset. Layer selection will be cleared before each draw.
setLassoIntersectSelectMode()	-	Sets the Lasso Select Mode to Intersect.
setLassoContainSelectMode()	-	Sets the Lasso Select Mode to Contain.
cleanupSelection()	-	Deselect all selected layers.
getSelectedLayers()	Layer[]	Get all selected layers.

The same mode operations are available on the draw instance as map.pm.Draw.Lasso.setAppendMode(), setSubtractMode(), setResetMode(), setIntersectSelectMode(), setContainSelectMode(), getMode(), and getSelectMode().

Lasso Select Options

When enabling Lasso Select Mode, you can pass options to configure its behavior:

map.pm.enableGlobalLassoMode({
  mode: map.pm.Draw.Lasso.APPEND_MODE,
  selectMode: map.pm.Draw.Lasso.INTERSECT_SELECT_MODE,
  lassoDrawOptions: { color: 'red' },
});

Available options include:

Option	Values	Description
mode	APPEND_MODE, SUBTRACT_MODE, RESET_MODE	Determines how selections are handled.
selectMode	CONTAIN_SELECT_MODE, INTERSECT_SELECT_MODE	Determines how layers are selected.
lassoDrawOptions	Leaflet path options	Sets the Style for the lasso polygon while drawing. The option fill will be always true.

Styling Selected Layers

While lassoDrawOptions styles the lasso polygon, the appearance of the selected layers is controlled by the global selectionLayerStyle option. It accepts Leaflet path options and defaults to { fill: false, color: 'red', dashArray: [5, 10] }:

map.pm.setGlobalOptions({
  selectionLayerStyle: { fill: false, color: 'blue', dashArray: [5, 10] },
});

Lasso Modes

Lasso Select Mode has three main modes that determine how selections are handled:

1. APPEND_MODE: Adds new selections to existing ones.
2. SUBTRACT_MODE: Removes selections from existing ones.
3. RESET_MODE: Clears existing selections before making new ones.

You can set these modes using the dedicated mode methods or when enabling the mode:

map.pm.setLassoAppendMode();
map.pm.setLassoSubtractMode();
map.pm.setLassoResetMode();

Select Modes

There are two select modes that determine how layers are selected:

1. CONTAIN_SELECT_MODE: Selects only layers fully contained within the lasso.
2. INTERSECT_SELECT_MODE: Selects layers that intersect with the lasso.

Set these modes using the dedicated select-mode methods or when enabling the mode:

map.pm.setLassoContainSelectMode();
map.pm.setLassoIntersectSelectMode();

Events

The following events are available on a map instance:

Event	Params	Description	Output
pm:globallassomodetoggled	e	Fired when Lasso Select Mode is toggled.	enabled, map
pm:lasso-select	e	Fired when a lasso selection is changed.	lassoCoords, selectionChangedLayers, selectedLayers

Export selected features as GeoJSON

Use the selected layers from the event to build a feature collection. Read the selection after drawing, rather than immediately after enabling the tool:

map.on('pm:lasso-select', ({ selectedLayers }) => {
  const geojson = L.featureGroup(selectedLayers).toGeoJSON();
  console.log(geojson);
});

GeoJSON preserves supported geometries and feature properties; it does not preserve Leaflet styling or map interaction state. A circle's Leaflet radius is not a standard GeoJSON geometry field.

Example Usage

// Enable Lasso Select Mode with APPEND mode and INTERSECT select mode
map.pm.enableGlobalLassoMode({
  mode: map.pm.Draw.Lasso.APPEND_MODE,
  selectMode: map.pm.Draw.Lasso.INTERSECT_SELECT_MODE,
});

// Listen for selection changes
map.on('pm:lasso-select', (e) => {
  console.log('Selected layers:', e.selectedLayers);
  console.log('Current selection:', e.lassoCoords);
});

// Get currently selected layers
const selectedLayers = map.pm.getSelectedLayers();

// Clear all selections
map.pm.Draw.Lasso.cleanupSelection();

Lasso Select Mode Button in the Toolbar

You can enable/disable a button in the toolbar to toggle Lasso Select Mode. Enable it by setting lassoMode to true in the addControls options:

map.pm.addControls({ 
  lassoMode: true, 
});

Notes

• Layers can be excluded from lasso selection by setting the lassoSelectable option to false on the layer's pm options.
• Holding the Ctrl key while using Lasso Select Mode in RESET mode will temporarily switch to APPEND mode, allowing for non-contiguous selections.
• Lasso Select Mode works with various layer types including markers, circles, polygons, polylines, and rectangles.

Loading...

Building something complex? Our team can help with architecture and integration. Get in touch →