Questions tagged [leaflet-draw]
A plugin for Leaflet that adds support for drawing and editing vectors and markers on Leaflet maps.
143
questions
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 ...
- 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 ...
- 13
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: {
...
- 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 ...
- 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"...
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 ...
- 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,
...
- 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 ...
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....
- 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 ...
- 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:
...
- 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:...
- 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”.
- 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
...
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:
...
- 13
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 ...
- 63
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
{% ...
- 13
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:...
- 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 ...
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 ...
- 123
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 ...
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 ...
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 ...
- 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 ...
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 ...
- 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).
....
- 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 ...
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....
- 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 ...
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....
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: '...
- 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 ...
- 101
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({
...
- 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', ...
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 ...
- 31
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, ...
- 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 ...
- 99
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 ...
- 121
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....
- 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....
- 89
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
...
- 89
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 ...
- 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....
- 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, ...
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 ...
- 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 ...
- 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 ...
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 ...
- 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 ...
- 101
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 ...
- 99