https://github.com/zakjan/leaflet-lasso

Lasso selection plugin for Leaflet
https://github.com/zakjan/leaflet-lasso

Last synced: 3 months ago
JSON representation

Lasso selection plugin for Leaflet

• Host: GitHub
• URL: https://github.com/zakjan/leaflet-lasso
• Owner: zakjan
• License: mit
• Created: 2018-06-18T09:48:27.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-10-19T13:59:09.000Z (about 1 year ago)
• Last Synced: 2024-04-28T00:34:08.209Z (7 months ago)
• Language: TypeScript
• Homepage: https://zakjan.github.io/leaflet-lasso/
• Size: 3.23 MB
• Stars: 109
• Watchers: 6
• Forks: 21
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# leaflet-lasso

[![](https://img.shields.io/npm/dm/leaflet-lasso)](https://www.npmjs.com/package/leaflet-lasso)

[![](https://img.shields.io/david/zakjan/leaflet-lasso)](https://www.npmjs.com/package/leaflet-lasso)

[![](https://img.shields.io/bundlephobia/min/leaflet-lasso)](https://www.npmjs.com/package/leaflet-lasso)

Lasso selection plugin for Leaflet

[Demo](https://zakjan.github.io/leaflet-lasso/)



Supports all Leaflet vector layers:

- Marker

- CircleMarker

- Circle

- Polyline

- Polyline with multiple segments

- Rectangle

- Polygon

- Polygon with hole

- Polygon with multiple segments

- Polygon with multiple segments and holes

- Custom layers can be supported if they inherit from the above layers, and have `getBounds` and `toGeoJSON` methods

Selection modes:

- contain - entire shape must be in lasso polygon (default)

- intersect - any part of shape can be in lasso polygon

## Install

```

npm install leaflet-lasso

```

or

```

```

## Usage

```

import "leaflet-lasso";

```

For detailed API, please see exported TypeScript typings.

### Handler

Use for custom activation.

```

interface LassoHandlerOptions {

    polygon?: L.PolylineOptions,

    intersect?: boolean;

}

```

```

const lasso = L.lasso(map, options);

yourCustomButton.addEventListener('click', () => {

    lasso.enable();

});

```

### Control

Use for default control.

```

interface LassoControlOptionsData  {

    title?: string;

}

type LassoControlOptions = L.ControlOptions & LassoControlOptionsData & LassoHandlerOptions;

```

```

L.control.lasso(options).addTo(map);

```

### Finished event

Listen for this event to receive matching Leaflet layers.

```

interface LassoHandlerFinishedEventData {

    originalEvent: MouseEvent;

    latLngs: L.LatLng[];

    layers: L.Layer[];

}

type LassoHandlerFinishedEvent = L.LeafletEvent & LassoHandlerFinishedEventData;

```

```

map.on('lasso.finished', (event: LassoHandlerFinishedEvent) => {

    console.log(event.layers);

});

```

## Thanks

Icon by @Falke-Design