npm i leaflet-plot
Download
leaflet-plot.css
and
leaflet-plot.min.js
and include them in your project.
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>
import 'leaflet-plot';
import 'leaflet-plot/dist/leaflet-plot.css';
Currently available shapes are StraightArrow
, RightAngleArrow
, TailedArrow
, DoubleArrow
.
Use Create function on a map like this
// StraightArrow create function
const arrowLayer = window.L.SL.Create.StraightArrow(latlngs, options)
latlngs: Array<Array>
options: leaflet path options
Use Drawing Mode on a map like this
// enable StraightArrow drawing mode
map.sl.enableDraw('StraightArrow', options);
// disable drawing mode
map.sl.disableDraw();
options: leaflet path options
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 |
Let's you edit vertices of layers. Use it like this:
// enable edit mode
layer.sl.enable();
map.on('sl:edit', e => {
console.log(e);
});
Event | Params | Description |
---|---|---|
sl:edit | e |
Fired when a layer is edited. |