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
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 ...
user avatar
  • 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: ...
user avatar
  • 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:...
user avatar
  • 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”.
user avatar
  • 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 ...
user avatar
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: ...
user avatar
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 ...
user avatar
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 ...
user avatar
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 {% ...
user avatar
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 ...
user avatar
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 ...
user avatar
  • 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:...
user avatar
  • 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 ...
user avatar
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 ...
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 ...
user avatar
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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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). ....
user avatar
  • 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 ...
user avatar
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....
user avatar
  • 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 ...
user avatar
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....
user avatar
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: '...
user avatar
  • 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 ...
user avatar
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({ ...
user avatar
  • 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', ...
user avatar
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 ...
user avatar
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, ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
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....
user avatar
  • 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....
user avatar
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 ...
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 ...
user avatar
  • 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....
user avatar
  • 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, ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
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 ...
user avatar
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 ...
user avatar
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: ...
user avatar
  • 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. ...
user avatar
  • 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....
user avatar
  • 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. ...
user avatar
  • 105