Questions tagged [leaflet-draw]

A plugin for Leaflet that adds support for drawing and editing vectors and markers on Leaflet maps.

Filter by
Sorted by
Tagged with
2 votes
2 answers
66 views

Create wider selection area to select lines on map using LeafletJS

When there are thin lines on the map, it is very difficult to click them with the mouse cursor. So is there any option to wider the selection area for lines in LeafletJS, without increasing the line ...
Kishor's user avatar
  • 526
1 vote
1 answer
42 views

Generate popup message which shows the coordinates on drawn and edited polygon in Leaflet?

I am using Leaflet map. I am trying to have a popup message which shows the coordinates on drawn polygon. However when I am trying to edit the drawn polygon using the edit layer the coordinates in the ...
dines dayrit's user avatar
1 vote
1 answer
549 views

Leaflet.draw change polygon filling programmatically

I'm using Leaflet.draw to draw and edit polygons. var drawControl = new L.Control.Draw({ edit: { featureGroup: drawnItems, edit: { selectedPathOptions: { ...
LAffair's user avatar
  • 255
1 vote
2 answers
568 views

Layer's feature color (Leaflet map)

How can I assign a color for each feature without defining the attribute value? Problem: I have many features, I don't want to define the ID values manually when calling getColor() like this: function ...
Hamad's user avatar
  • 33
0 votes
0 answers
404 views

Couldn't draw polygons/polylines using Leaflet in React

I could easily draw rectangle, circle and markers as well, but I am not able to draw polygon or polyline. Here is my code, import L from "leaflet"; import "leaflet/dist/leaflet.css"...
Sacrlett_jose's user avatar
3 votes
1 answer
1k views

Exporting GeoJSON with defined properties using Folium Draw plugin

I used a nice plugin for python folium: https://www.youtube.com/watch?v=rAicpbCUwco&ab_channel=SudoControl but the problem is, that my saved geojson file has no properties. I tried to inject JS ...
Geographos's user avatar
  • 3,965
1 vote
0 answers
375 views

How to add custombutton on Draw toolbar leaflet?

I want to add custom button on Draw toolbar where I need to add my own functionality . I have wrote my code as : var drawControl = new L.Control.Draw({ draw: { marker: false, ...
Piyush's user avatar
  • 283
1 vote
1 answer
333 views

Edit(Reshape) GeoJSON data coming from database added on leaflet map

I have multiple buildings data displaying on map as GeoJSON, but we have to change their shapes while they are on map and update latest shape GeoJSON in database. How can I make GeoJSON editable on ...
Muhammad Hamza Khan's user avatar
1 vote
2 answers
622 views

Editable polygon with different sized two part border (inner and outer, in meters) in Leaflet?

I'm a beginner in Leaflet JS and I have a polygon drawn on the map: var coords= [ [27.40839959582344,-82.40601726602196], [27.40859871554781,-82.40638191331237], [27.40834938302612,-82....
LAffair's user avatar
  • 255
1 vote
1 answer
527 views

Move and update a marker to a fixed coordinate

I used Leaflet and leaflet.draw-src.js with this code : http://bl.ocks.org/TetsuyaKimotsuki/0156c511e3217edf58beb206633308f8 After creating a marker, I want to move it to the coordinates indicated in ...
Manard82's user avatar
  • 175
1 vote
1 answer
2k views

FeatureGroup polygon and polyline cannot be edited with Leaflet-draw

I don't have much experience in Leaflet and I'm trying to learn from my mistakes. I have multiple polygons (just polygons) and some that have a polyline on top of it grouped as a featureGroup like: ...
LAffair's user avatar
  • 255
2 votes
1 answer
713 views

Leaflet - add circle around mouse icon on draw

I'm a beginner in Leaflet and I have the draw control added for polygon drawing: var drawControl = new L.Control.Draw({ draw: { marker: false, polyline: false, rectangle: false, circle:...
LAffair's user avatar
  • 255
2 votes
0 answers
268 views

Drawing buffer zones in React-Leaflet

I am working with a Leaflet in react.js and using react-leaflet-draw. I can't draw a buffer on shapes drawn by react-leaflet-draw. Just like a “leaflet-buffer”.
nOybek's user avatar
  • 121
2 votes
0 answers
3k views

Leaflet/Vue 3 Issue Uncaught TypeError: Cannot read properties of null / this._map is null

I am facing an error on Leaflet on Vue 3 whenever i try to zoom in or out when a popup is closed. The error on Mozilla: Uncaught TypeError: this._map is null Popup.js and the error on chrome ...
Niranjan Parab's user avatar
1 vote
1 answer
2k views

Getting total length of polyline from Leaflet draw?

I'm quite new when it comes to Leaflet and this is my very first question asked here so I'm not experienced. While I was drawing polyline I noticed that you can get current distance while drawing it: ...
htopalov's user avatar
0 votes
1 answer
656 views

Make a featureGroup with a layerGroup that is also editable in Leaflet?

I have a Leaflet map with a featureGroup, a layerGroup and drawControl however only the featureGroup is editable using the drawControl. I think its because the layerGroup is separate from the ...
williamh's user avatar
1 vote
1 answer
615 views

Leaflet draw layers disappearing after creation in Django

I implemented leaflet in my Django project, and managed to add the draw functionalities. The thing is after i draw the shape instantly disappears. What should i do to solve the problem? map.html {% ...
unfamousfox's user avatar
2 votes
1 answer
1k views

Editing a GeoJSON layer that I just added to the map

I have created a Leaflet map and added a GeoJSON layer like this. var map_rgb = L.map("map_rgb",{center: [userLat, userLon],crs: L.CRS.EPSG3857,zoom:'{{zoom}}',zoomControl: true,preferCanvas:...
Vidya R's user avatar
  • 21
1 vote
0 answers
551 views

Sharing a single common boundary line within two polygons with Leaflet

Is it possible in Leaflet, to share a single common boundary within two polygons, other than two overlapped boundaries within a MultiPolygon layer? In this plugin (leaflet-geoman), they have mentioned ...
Hashan hemachandra's user avatar
1 vote
1 answer
682 views

Drawing on Leaflet map give incorrect coordinate

I am using Leaflet and OpenLayers. When I draw a bounding box I am getting the correct lat and lon if I use OpenStreetMap tilelayer. When I switch to using EarthData tilelayer the bounding box is ...
newdeveloper's user avatar
1 vote
0 answers
26 views

Intersection using turf js [duplicate]

I am giving this for intersection of a polyline using Leaflet draw plugin with polygons feature class. Here is my code function intersectPolyByPolyFC(poly,fcPoly){ var fgp=[];//variable for ...
Ruhi Bhartiya's user avatar
0 votes
0 answers
309 views

ReactLeaflet Returning GeoJson

I'm new to Webmapping I already create a map with ReactLeaflet and ReactLeaflet Draw, but I can't imagine how can I get the geoJSON from the polygon and just send to a database or an API export ...
Matheus Antonelli's user avatar
1 vote
1 answer
345 views

Plotting polygon with hole as two separate polygons using Leaflet

I've a polygon with a hole which I created using turf.difference method. Now, I need to plot that GeoJSON on another screen and make both the inner polygon as well as outer polygon editable. Since I'm ...
Radhika's user avatar
  • 21
2 votes
0 answers
830 views

Polygon intersection using turf js

I have given this code for intersection: function intersectPolyByPolyFC(poly,fcPoly){ var fgp=[];//variable for feature group var bbPoly=turf.bboxPolygon(turf.bbox(poly));//polygon ...
Ruhi Bhartiya's user avatar
1 vote
0 answers
567 views

Spatial operations with JSTS

I'm working with Leaflet and I'm also working with JSTS to do the spatial operations. In most of the cases I want to create Polygons inside another Polygon Geometry. In this case the yellow shape is ...
VFA's user avatar
  • 51
1 vote
0 answers
498 views

How to add and delete the Leaflet OpenStreetMap dynamically

I have to place the Leaflet maps to be placed in the bootstrap grids (maps has to place dynamically with the number of elements coming from the backend i.e number of elements = no of Leaflet maps). ....
user123's user avatar
  • 11
0 votes
0 answers
547 views

Saving polygon coordinates into MySQL

I am currently building a housing complex mapping in my regency with PHP, Leaflet.draw and MySQL to store the data. My problem is, how to save the polygon coordinates into MySQL? I am extremely new to ...
rizkydhani's user avatar
3 votes
1 answer
2k views

Options for styling Leaflet Draw line segements

I am playing around with the options for Leaflet-Draw and have came up wit a little annoyance. Using a colorpicker I can set the color for every new polyline I draw by invoking options.draw.polyline....
FishHead's user avatar
  • 650
6 votes
2 answers
4k views

Adding different types of marker on the map with using Leaflet.draw

I am using Leafletjs with Leaflet.draw to create an interactive map on my web. But I need to enable different types of "marker". And then when creating them I need to identify them. I tried ...
Andreina Riera's user avatar
2 votes
0 answers
141 views

Is there any tool or somehow to make a OpenStreetMap editor which can manage multi layer in it?

I need to build a web application that could draw, edit, import, export,.. map using OSM data. In that, I could add layers and manage like tree form. The layer can be toggled on/off on the map to edit....
nguyenthanhdat's user avatar
1 vote
1 answer
2k views

Leaflet.Draw options - dynamically changing polyline color

I am playing around with the Leaflet.Draw plugin and its options. What I try to do is dynamically setting the color option for the polyline to a variable like this: let options = { position: '...
FishHead's user avatar
  • 650
0 votes
0 answers
290 views

Leaflet Draw Error

I'm trying to incorporate Leaflet. Draw on my map but I get the following error I'm using version 1.7.1 Draw.Polyline.js:55 Uncaught TypeError: Cannot read property 'draw' of undefined at ...
Mauro Tello's user avatar
0 votes
0 answers
2k views

Removing the Leaflet draw toolbar when added as Leaflet control

I add a draw-toolbar (I'm using the my own version from the example "Disabling a toolbar item") drawnItems = new L.FeatureGroup(); map.addLayer(drawnItems); var drawControl = new L.Control.Draw({ ...
Silvan's user avatar
  • 141
0 votes
1 answer
343 views

How to triger a function after draw delete?

I'm using Leaflet draw and I want that after the user remove the path he created it will trigger a function. After the user finished drawing a path I also do something: map.on('draw:created', ...
O. Ezrachi's user avatar
0 votes
0 answers
905 views

Leaflet PlayBack

I am trying to animate with the https://github.com/linghuam/Leaflet.TrackPlayBack plugin. I have approximately 100 coordinates and ID numbers defined in each coordinate. Can different symbols be used ...
user156771's user avatar
0 votes
1 answer
1k views

Leaflet draw - Edit event after editing existing feature

I was inspired by this post How to edit an existing layer using leaflet? I can click on an item to make it editable. But this does not "activate" the drawControl to allow me to click save or cancel, ...
geogrow's user avatar
  • 1,633
0 votes
0 answers
561 views

Why snapping doesn't work on Leaflet version 1.0.0 and newer?

On documentation of Leaflet.Draw, Snapping sample is not working with Leaflet 1.0 but it works with Leaflet 0.7 http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-draw-polyline Is ...
Eslam Farag's user avatar
2 votes
0 answers
11k views

Remove a Drawn Polyline from LeafLet Map

How can I simply just remove this polyline from the map? var pointA = L.latLng(From.lat, From.lng); var pointB = L.latLng(To.lat, To.lng); var pointList = [pointA, pointB]; var st_line ...
Muhammad Zahid's user avatar
0 votes
1 answer
1k views

Overlay with the feature collection properties

I have the GeoJSON: [{"type":"FeatureCollection", "features":[ {"type":"Feature","properties":{"id":27,"name":"F001"},"geometry":{"type":"LineString","coordinates":[[-100.231018,47....
ASerra's user avatar
  • 3
1 vote
1 answer
1k views

Checking if a specific leaflet.draw control is enabled?

Where exactly are the leaflet controls stored that are added to the map? So at anytime in the app, I can check something like if(controls.polyline.enabled==true) My guess is its somewhere in the map....
Tayyab Mir's user avatar
1 vote
1 answer
5k views

Custom functions for SAVE and CANCEL on Leaflet.draw edit control

I have added an edit control on my map which is working fine (On the Frontend); var editControls = new L.Control.Draw({ draw: false, edit: { featureGroup: this.updateGeomLyr ...
Tayyab Mir's user avatar
2 votes
2 answers
2k views

Cutting holes in custom polygon made with Leaflet.Draw

I would like to be able to create holes in polygons made with Leaflet.Draw plugin. For example, I currently have code like this: https://jsfiddle.net/4gkrfu5b/ If you draw a polygon on top of another ...
wukebo's user avatar
  • 23
0 votes
1 answer
384 views

Leaflet.Draw save coordinates

I'd like to save the polyline coordinates. I'm creating it with Leaflet.Draw. The problem is that the coordinates are stored twice. 49.907018,16.324997,49.907018,16.324997,49.818936,16.340103,49....
komy's user avatar
  • 391
0 votes
0 answers
890 views

Create a custom draw Toolbar

I would like to create my own custom toolbar for leaflet.draw plugin but I don't know how to approach this solution. To be more clear, I am trying to create a side-panel with buttons for each action, ...
Silvio Progonati's user avatar
3 votes
1 answer
2k views

Prevent user from drawing a feature with Leaflet.draw

In my application using Leaflet.draw the user can set point markers on a map. I would like to allow the setting only in a certain area. The function isMarkerInsidePolygon(marker, polygon) returns ...
pascatl's user avatar
  • 899
0 votes
0 answers
594 views

Leaflet draw: prevent drawing through a custom overlay

I have a leaflet draw implementation (in Angular) with a custom sidebar that overlaps the Map. It should not be possible to draw through that sidebar. For circlemarkers I could solve this problem ...
Ben's user avatar
  • 13
0 votes
0 answers
913 views

Pushing features to external GeoJSON file

I am working on a project which uses Leaflet and leaflet.draw to show and draw shapes on the map. I also have a data.json file which I use to display former features generated from geojson.io. What I ...
Silvio Progonati's user avatar
0 votes
1 answer
2k views

Allowing users to add data to marker that they create on Leaflet map? [closed]

I have created a basic web map and implemented leaflet.draw functionality to it. What I would like to do is allow anyone that visits the web map to use the draw tools to add a marker (point) and when ...
Evan's user avatar
  • 173
-1 votes
1 answer
436 views

Finding precision of polygon in Leaflet? [duplicate]

In order to convert coordinates to geohash I need to know the precision as well but unable to figure how to do so.. Any suggestions? ** EDIT ** What I try to do is to find the precision in leaflet ...
Tamir Gilany's user avatar
0 votes
1 answer
399 views

How to repeat drawing function in Leaflet

I am trying to create a Leaflet.js web map that gives users the opportunity to draw lines. this line will be sent to mapquest elevation API to be retun to the map as a GeoJSON with elevation data ...
Eslam Farag's user avatar