sdleafletdraw
v1.3.0
Published
ES6 + Babel port of Leaflet.draw, a plugin that adds drawing and editing tools to Leaflet powered maps. (c) 2012-2017, Jacob Toye, Jon West, Smartrak, Leaflet https://github.com/Leaflet/Leaflet.draw http://leafletjs.com
Downloads
166
Readme
SDLeafletDraw
ES6 + Babel port of Leaflet.draw (https://github.com/Leaflet/Leaflet.draw)
Adds support for drawing and editing vectors and markers on Leaflet maps.
Supports Leaflet 1.1.0+ branches.
Installation and use
$ npm install sdleafletdraw
Importing sdleafletdraw
import L from 'leaflet';
import 'sdleafletdraw';
// Include the css files
import 'sdleafletdraw/dist/leaflet.draw.css';
Create a new L.Control.Draw
and add to an L.Map
const map = new L.Map('map');
const editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
const drawControl = new L.Control.Draw({
draw: {
polyline: false,
circle: false,
marker: false,
rectangle: {
color: 'red',
fillOpacity: 0.1,
opacity: 1,
weight: 4,
},
polygon: {
color: 'blue',
fillOpacity: 0.1,
opacity: 0.8,
weight: 2.5,
},
},
position: 'topleft',
allowIntersection: false,
edit: {
featureGroup: editableLayers, // A leaflet featureGroup
}
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, (event) => {
const { layerType, layer } = event;
if (layerType === 'marker')
layer.bindPopup('A popup!');
editableLayers.addLayer(layer);
});