leaflet-plot

Installation

Install via npm

npm i leaflet-plot

Install Manually

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

Include via CDN

CSS

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet-plot.css" />

JS

<script src="https://unpkg.com/[email protected]/dist/leaflet-plot.min.js"></script>

Include as ES6 Module

import 'leaflet-plot';
import 'leaflet-plot/dist/leaflet-plot.css';

Getting Started

Currently available shapes are StraightArrow, RightAngleArrow, TailedArrow, DoubleArrow.

Create function

Use Create function on a map like this

// StraightArrow create function
const arrowLayer = window.L.SL.Create.StraightArrow(latlngs, options)

See the available options.

latlngs: Array<Array>

options: leaflet path options

Drawing Mode

Use Drawing Mode on a map like this

// enable StraightArrow drawing mode
map.sl.enableDraw('StraightArrow', options);

// disable drawing mode
map.sl.disableDraw();

See the available options.

options: leaflet path options

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

map.on('sl:create', e => {
  console.log(e);
});

| Event | Params | Description | | :----------- | :----- | :------------------------------------------------------------------------------------- | | sl:create | e | Called when a shape is drawn/finished. Payload includes shape type and the drawn layer |

Edit Mode

Let's you edit vertices of layers. Use it like this:

// enable edit mode
layer.sl.enable();

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

map.on('sl:edit', e => {
  console.log(e);
});

| Event | Params | Description | | :----------- | :----- | :------------------------------------------------------------------------------------- | | sl:edit | e | Fired when a layer is edited. |