Questions tagged [leaflet-draw]
A plugin for Leaflet that adds support for drawing and editing vectors and markers on Leaflet maps.
137
questions
1
vote
1
answer
35
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 ...
- 165
1
vote
1
answer
110
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:
...
- 197
1
vote
1
answer
66
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:...
- 197
2
votes
0
answers
66
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”.
- 21
1
vote
0
answers
800
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
401
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
0
answers
49
views
Edit and Save MVT tiles Leaflet
I am relatively new to GIS Web Development.
I have a very large vector that I want to display on front end and edit/update in form of a KML file that user uploads. I have managed to save the KML file ...
0
votes
1
answer
147
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 ...
- 41
1
vote
1
answer
204
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
0
votes
0
answers
116
views
Make polylines curvable and dragable
I'm using Leaflet to draw polylines on a map and of course its possible to drag the endpoints, but I'm curious whether it would be able to curve a polyline? In order to for example, draw around ...
0
votes
0
answers
529
views
Custom toolbar of leaflet.draw in React
I'm trying to prepare custom buttons to draw single polygon in my react app with leaflet maps. I know how to start action of drawing but I'm not sure how to ensure editing, delete and saving ...
- 351
2
votes
1
answer
437
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
252
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 ...
0
votes
1
answer
241
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 ...
- 113
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
81
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
129
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
505
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
329
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
161
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
214
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
625
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....
- 648
6
votes
2
answers
2k
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 ...
1
vote
0
answers
69
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
980
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: '...
- 648
0
votes
0
answers
206
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
1k
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({
...
- 131
0
votes
1
answer
98
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
559
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
0
answers
942
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,593
0
votes
0
answers
432
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
1
vote
0
answers
6k
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 ...
- 111
0
votes
1
answer
623
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
743
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....
- 79
0
votes
1
answer
4k
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
...
- 79
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
249
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
527
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
1k
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 ...
- 879
0
votes
0
answers
468
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
719
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
1k
views
Allowing users to add data to marker that they create on Leaflet map?
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 ...
- 145
-1
votes
1
answer
392
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 ...
0
votes
1
answer
303
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
0
votes
0
answers
787
views
Editing attributes of a GeoJSON in Leaflet
I have a map in which I'm trying to create the capabilities of adding new features and editing attributes of new and existing features. I have managed to make the feature editable but I want people to ...
2
votes
0
answers
201
views
Use leaflet-draw-toolbar with angular 2
Is it possible to use leaflet-draw-toolbar with angular 2 and ngx-leaflet-draw?
I do not see, and I am not versed in Angular 2, enough, to incorporate the JS library for leaflet-draw-toolbar into my ...
- 131
1
vote
1
answer
2k
views
Leaflet: get layer in GeoJSON with pixel coordinates instead of lat long coordinates
In my Angular 7 project with ngx-leaflet and leaflet 1.4.0 and leaflet-draw 0.4.14 I want to export each drawn rectangle (and circle,...) to GeoJSON.
That works fine using
public onDrawCreated(e: ...
- 13
3
votes
0
answers
201
views
Function fires despite conditional query in leaflet-map
In a map built with Leaflet I created a button to export and download data as geoJSON drawn before by the user with Leaflet.draw.
To prevent an empty download, I am querying the existence of data.
...
- 879
3
votes
1
answer
2k
views
ipyleaflet draws?
If I draw a circle with map control in a map, how can I store in a variable?
from ipyleaflet import Map, basemaps, basemap_to_tiles, DrawControl
watercolor = basemap_to_tiles(basemaps.Stamen....
- 191
2
votes
1
answer
2k
views
Creating popup forms with Leaflet (L.Draw). How to implement listeners for radio buttons and other input groups?
I am attempting to create a map-based survey using Leaflet popups and specifically L.Draw, because I want users to be able to insert markers where ever they want to and then answer certain questions.
...
- 105