Gathering detailed insights and metrics for leaflet-draw
Gathering detailed insights and metrics for leaflet-draw
Gathering detailed insights and metrics for leaflet-draw
Gathering detailed insights and metrics for leaflet-draw
Vector drawing and editing plugin for Leaflet
npm install leaflet-draw
Typescript
Module System
Node Version
NPM Version
99.6
Supply Chain
99.6
Quality
78.1
Maintenance
100
Vulnerability
99.6
License
JavaScript (93.87%)
HTML (6%)
Shell (0.14%)
Total Downloads
19,662,766
Last Day
5,396
Last Week
73,648
Last Month
453,430
Last Year
5,360,432
1,987 Stars
1,050 Commits
997 Forks
102 Watching
18 Branches
107 Contributors
Minified
Minified + Gzipped
Latest Version
1.0.4
Package Id
leaflet-draw@1.0.4
Size
561.65 kB
NPM Version
6.2.0
Node Version
10.7.0
Publised On
24 Oct 2018
Cumulative downloads
Total Downloads
Last day
-73.7%
5,396
Compared to previous day
Last week
-36.8%
73,648
Compared to previous week
Last month
-1.5%
453,430
Compared to previous month
Last year
15.5%
5,360,432
Compared to previous year
Adds support for drawing and editing vectors and markers on Leaflet maps.
Supports Leaflet 0.7.x and 1.0.0+ branches.
Please check out our Api Documentation
Leaflet.draw 0.2.0 changes a LOT of things from 0.1. Please see BREAKING CHANGES for how to upgrade.
Leaflet.draw uses the L.drawLocal
configuration object to set any text used in the plugin. Customizing this will allow support for changing the text or supporting another language.
See Leaflet.draw.js for the default strings.
E.g.
1 // Set the button title text for the polygon button 2 L.drawLocal.draw.toolbar.buttons.polygon = 'Draw a sexy polygon!'; 3 4 // Set the tooltip start text for the rectangle 5 L.drawLocal.draw.handlers.rectangle.tooltip.start = 'Not telling...';
The following examples outline some common tasks.
The following example will show you how to:
1 var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', 2 cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}), 3 map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 }); 4 5 var editableLayers = new L.FeatureGroup(); 6 map.addLayer(editableLayers); 7 8 var MyCustomMarker = L.Icon.extend({ 9 options: { 10 shadowUrl: null, 11 iconAnchor: new L.Point(12, 12), 12 iconSize: new L.Point(24, 24), 13 iconUrl: 'link/to/image.png' 14 } 15 }); 16 17 var options = { 18 position: 'topright', 19 draw: { 20 polyline: { 21 shapeOptions: { 22 color: '#f357a1', 23 weight: 10 24 } 25 }, 26 polygon: { 27 allowIntersection: false, // Restricts shapes to simple polygons 28 drawError: { 29 color: '#e1e100', // Color the shape will turn when intersects 30 message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect 31 }, 32 shapeOptions: { 33 color: '#bada55' 34 } 35 }, 36 circle: false, // Turns off this drawing tool 37 rectangle: { 38 shapeOptions: { 39 clickable: false 40 } 41 }, 42 marker: { 43 icon: new MyCustomMarker() 44 } 45 }, 46 edit: { 47 featureGroup: editableLayers, //REQUIRED!! 48 remove: false 49 } 50 }; 51 52 var drawControl = new L.Control.Draw(options); 53 map.addControl(drawControl); 54 55 map.on(L.Draw.Event.CREATED, function (e) { 56 var type = e.layerType, 57 layer = e.layer; 58 59 if (type === 'marker') { 60 layer.bindPopup('A popup!'); 61 } 62 63 editableLayers.addLayer(layer); 64 });
You can change a draw handlers options after initialisation by using the setDrawingOptions
method on the Leaflet.draw control.
E.g. to change the colour of the rectangle:
1drawControl.setDrawingOptions({ 2 rectangle: { 3 shapeOptions: { 4 color: '#0000FF' 5 } 6 } 7});
To test you can install the npm dependencies:
npm install
and then use:
jake test
Documentation is build with Leafdoc, to generate the documentation use
jake docs
and the generated html documentation is saved to ./docs/leaflet-draw-latest.html
Touch friendly version of Leaflet.draw was created by Michael Guild (https://github.com/michaelguild13).
The touch support was initiated due to a demand for it at National Geographic for their Map Maker Projected (http://mapmaker.education.nationalgeographic.com/) that was created by Michael Guild and Daniel Schep (https://github.com/dschep)
Thanks so much to @brunob, @tnightingale, and @shramov. I got a lot of ideas from their Leaflet plugins.
All the contributors and issue reporters of this plugin rock. Thanks for tidying up my mess and keeping the plugin on track.
The icons used for some of the toolbar buttons are either from http://glyphicons.com/ or inspired by them. <3 Glyphicons!
Finally, @mourner is the man! Thanks for dedicating so much of your time to create the gosh darn best JavaScript mapping library around.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 9/15 approved changesets -- score normalized to 6
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
89 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-12-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More