1.0.5 • Published 2 months ago
leaflet-plot v1.0.5
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/leaflet-plot@1.0.4/dist/leaflet-plot.css" />
JS
<script src="https://unpkg.com/leaflet-plot@1.0.4/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. |