Leaflet.draw | Vector drawing and editing plugin for Leaflet | Map library

 by   Leaflet JavaScript Version: 1.0.3 License: MIT

kandi X-RAY | Leaflet.draw Summary

kandi X-RAY | Leaflet.draw Summary

Leaflet.draw is a JavaScript library typically used in Geo, Map applications. Leaflet.draw has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i leaflet-super-draw' or download it from GitHub, npm.

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.

            kandi-support Support

              Leaflet.draw has a medium active ecosystem.
              It has 1849 star(s) with 988 fork(s). There are 103 watchers for this library.
              It had no major release in the last 12 months.
              There are 382 open issues and 342 have been closed. On average issues are closed in 238 days. There are 81 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of Leaflet.draw is 1.0.3

            kandi-Quality Quality

              Leaflet.draw has 0 bugs and 0 code smells.

            kandi-Security Security

              Leaflet.draw has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              Leaflet.draw code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              Leaflet.draw is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              Leaflet.draw releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions are not available. Examples and code snippets are available.

            Top functions reviewed by kandi - BETA

            kandi has reviewed Leaflet.draw and discovered the below as its top functions. This is intended to give you an instant insight into Leaflet.draw implemented functionality, and help decide if they suit your requirements.
            • Starts an element .
            • styplifies an object
            • Initializes the window .
            • generate a string from holder
            • Dragging wrapper .
            • Updates the UI background color
            • Listen for touch events .
            • Convert a color input string into an array of strings
            • Convert a geometry object into a TopoJSON geometry .
            • Add one or multiple events
            Get all kandi verified functions for this library.

            Leaflet.draw Key Features

            No Key Features are available at this moment for Leaflet.draw.

            Leaflet.draw Examples and Code Snippets

            No Code Snippets are available at this moment for Leaflet.draw.

            Community Discussions


            the problem with leaflet and leaflet draw vue leaflet.draw.js?20d6:8 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
            Asked 2022-Feb-19 at 21:00
            mounted() {
            methods: {
            initMap() {
              this.map = L.map('mapContainer').setView([48.856663, 2.351556], 12);
              this.tileLayer = L.tileLayer(
                    attribution: 'CC-BY-SA, Imagery (c) Mapbox',
                    maxZoom: 18,
                    id: "mapbox/satellite-streets-v11",
                    accessToken: "token",
              var drawnItems = new L.FeatureGroup();
              var drawControl = new L.Control.Draw({
                edit: {
                  featureGroup: drawnItems
              this.map.on(L.Draw.Event.CREATED, function(event){
                let layer = event.layer;
                console.log(`start ${layer}`);


            Answered 2021-Dec-24 at 08:38

            I use a similar code to draw a polygon on a basemap and have a similar issue when using Vue3 with leaflet and leaflet-draw. After drawing a polygon, I get a bunch of errors in the console, probably triggered by a mouseover event.

            Source https://stackoverflow.com/questions/70428824


            Leaflet edit GeoJson Data
            Asked 2022-Jan-23 at 14:45

            I made a code below for creating shapes with some informations. I can edit thoose informations until my map is open. But after update geojson by "Export features to local file" and page reload, shapes remain unclickable and to correct the informations I have to delete some shapes and recreate them with proper parameters.


            Is it possible to edit the shape's data each time I just open my page? Like I can edit the shapes itself by "Edit layers" button?



            Answered 2022-Jan-23 at 14:45

            Of course, I did it quickly, so you have to adapt to your own code. I removed L.GeoJSON.AJAX but nothing prevents you from continuing to use it, I advise you not to ;)

            Source https://stackoverflow.com/questions/70806003


            Leaflet maps tiles are not loading completely when tried to zoomin and zoomout tha map which contained in a div tag
            Asked 2021-Sep-30 at 09:34

            I'm trying to load a leaflet map within a div tag.

            Sometimes the map tiles are loaded completely. whenever I try to zoom in or zoom out the map, tiles are not loading completely. I tried solutions like importing leaflet CSS styles, tried to call the invalidateSize function whenever the map is zoomed in.



            Answered 2021-Sep-30 at 09:30

            While trying to reproduce the above issue in fiddle with only Javascript. The map was rendered properly so I came to the conclusion that there is no issue with rendering the map. While debugging I found the div element that contains map has one of its parent elements has a property of text-align: center which caused the map to load tiles not completely. After removing it map was rendered as expected. I hope it may help someone while rendering a map in element(like div) consider the alignment of parent elements which may happen rarely.

            Source https://stackoverflow.com/questions/69346127


            Is there a way to open a popup input text after a polygon is created in leaflet?
            Asked 2021-Apr-20 at 19:49

            I'm trying to make a web app that uses leaflet to display a map, users should be able to draw and edit polygons over the map and they should have the ability to name each polygon they create.

            I want to open a popup when a polygon is created that asks for a name and then set it to a property in a geojson feature.

            I tried to follow this example Leaflet popup form but I couldn't get it to work with the leaflet draw created event.

            Here's what I got.



            Answered 2021-Apr-19 at 08:04

            Just bind a popup on the created layer and open it once it is created

            Source https://stackoverflow.com/questions/67153941


            How to reference the deleted layers in Leaflet.draw?
            Asked 2020-Dec-18 at 11:50

            I am trying to delete a Leaflet.draw layer from my database in firestore. I can easily delete it from the database side, but i struggle with connecting the document name with the layer name.

            More specifically, i can't seem to get the id of the layer to be deleted/edited. Once i have that i should be able to connect it to the document id

            This is what i got currently:



            Answered 2020-Dec-18 at 11:20

            propagatedFrom is indeed undefined. It is not provided on the event object

            just remove propagatedFrom and use e.layers instead.

            Source https://stackoverflow.com/questions/65355841


            Get the coordinates of a rectangle on Leaflet
            Asked 2020-Oct-27 at 07:30

            I will want to get the coordinates of each corner of a rectangle that the user will draw on a map (leaflet).
            The goal is to extract the max/min latitude and the max/min longitude.

            Here is the code under which I display my map and I draw my rectangle with Leaflet-Draw :



            Answered 2020-Oct-27 at 07:30

            Use getCenter() instead of getLatLng()

            EDIT: I see the issue you need each corner of the rectangle, getCenter does not solve that

            Also I recommend leaflet-geoman for editing instead of leaflet draw. (But thats just my opinion :) )

            Source https://stackoverflow.com/questions/64544488


            The markers drawn on leaflet.draw are not deleted after removing layer
            Asked 2020-Oct-06 at 08:59

            I created a simple app to add points using leaflet draw. If the user cancel de dialog the drawn layer is removed. However, when the next marker is drawn, the previous cancelled ones appear again. Here is the pice of code:



            Answered 2020-Oct-06 at 08:49

            You have also to clear the drawnItems group:

            Source https://stackoverflow.com/questions/64222257


            React Leaflet: Dynamic Markers, cannot read property 'addLayer'
            Asked 2020-Sep-30 at 20:21

            I've been working on a map component that renders points of results that stream in from search. I have gotten most of it working, until I began passing props in for the return statement. I'm using my own component, not react-leaflet's . I've noticed if I use and render with props.locations.map( ... it works fine. If I reference my map = L.map(...) with and try to render with props, it breaks as soon as it attempts to create the layer and add it to the map.

            The component's JS File is as follows:



            Answered 2020-Sep-30 at 20:07

            So as I mentioned in the comments you should use react'leaflet's Map and use a ref to add any plugin you wish using native leaflet code.

            Source https://stackoverflow.com/questions/64125298


            React-Leaflet : Adding L.TileLayer breaks map
            Asked 2020-Sep-23 at 18:08

            My goal is to add leaflet-draw to my Map. To do this, I've been using L to add control and drawnItem layers to the map upon component mount. The problem seems to be with the TileLayer. If I add it in the rendered div, it only fills 80% of the map leaving the new toolbar looking awful. If I add it in with L.TileLayer, it fills the entire map but leaves the majority of the map un-draggable. I will demonstrate with pictures.

            With adding TileLayer in rendered div:

            When added upon component mount:

            NOTE: The blue area is the area which cannot be interacted with. The only way to manipulate the map is by dragging under the draw toolbar. I will include the div of this in-operable layer:

            Finally, it is important to note that if I manually delete this element in the browser dev tools the map works fine. To make this issue more concise, I will remove all leaflet-draw code so that the issue can hopefully be more obvious. I'll now show the code along with the index.html.



            Answered 2020-Sep-23 at 18:08

            The issue was that I was rendering a map on top of the one I had created in componentDidMount().

            I instead used from let map = L.map('mapsearch',).setView([51.505, -0.09], 6); to reference my own. Silly mistake, but really threw me off.

            Source https://stackoverflow.com/questions/64014554


            How do I remove the “Cancel” option from the Draw button on the Leaflet.draw plugin?
            Asked 2020-Sep-13 at 07:04

            As seen in the image below, I’d like to remove the option to cancel a drawing. Here’s my code: https://jsfiddle.net/wne2hjo0/



            Answered 2020-Sep-13 at 07:04

            With that code you can remove the "cancel" button on all shapes:

            Source https://stackoverflow.com/questions/63849803

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install Leaflet.draw

            You can install using 'npm i leaflet-super-draw' or download it from GitHub, npm.


            Documentation is build with Leafdoc, to generate the documentation use. and the generated html documentation is saved to ./docs/leaflet-draw-latest.html.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone Leaflet/Leaflet.draw

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link