sdleafletdraw

ES6 + Babel port of Leaflet.draw (https://github.com/Leaflet/Leaflet.draw)

Showing:

Popularity

Downloads/wk

4

GitHub Stars

6

Maintenance

Last Commit

3yrs ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

56.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

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);
});

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100