Questions tagged [leaflet.draw]
Vector drawing and editing plugin for Leaflet
leaflet.draw
301
questions
0
votes
0
answers
23
views
How can i pass in coords to draw the correct shape on an IMAGE?
can I pass actual x / y cords to Leaflet.js to draw a shape? - I have tried using actual cords and the shape is nothing like I expect - also SetView cords can I pass them here too ?
Code:
var map = L....
0
votes
1
answer
60
views
Trouble loading markers inside a polygon using Leaflet.js, FreeDraw, and Laravel
I use Leaflet.js, FreeDraw, and Laravel to create a real estate system. The functionality I am trying to set up is that when the user draws a polygon on the map, it should trigger an API call and only ...
1
vote
0
answers
75
views
Changing Colours of Leaflet Map
I wonder if and how it is possible to change the color of the map (individual countries, backgrounds and lines) in Leaflet?
I have simply created the basic code of a leaflet map as specified in the ...
0
votes
0
answers
20
views
leaflet (angular) dosn't show overlay-pane
I have the next map with leaflet:
private initializeMap(): void {
let ubicacion = this.obtenerUbicacionActual();
const center: LatLng = latLng(ubicacion[0], ubicacion[1]); // where i am
...
1
vote
0
answers
72
views
Leaflet draw polygon is rendering/drawn wrongly shifting bit away from selected position in Angular 17 with ssr enabled
We are using angular 17 and we have used leaflet and leaflet draw JavaScript plugin to plot the map and want to draw polygons, rectangle over it and get the boundary co-ordinates of the same. But when ...
0
votes
0
answers
136
views
how to enable leaflet edit & delete buttons in leaflet-draw-toolbar by default in vue2
I am using leaflet map library. I am facing issue with leaflet-draw-toolbar in which I have edit & delete buttons but these buttons are disabled by default. please provide me solution by which I ...
0
votes
0
answers
44
views
how to add new polygon layers to already drawn ones
how to add new polygons to an existing layer, so as not to completely redraw, but only add new ones?
the current code completely redraws the entire layer, but it is necessary for new zones to be added ...
0
votes
0
answers
135
views
Create a wider selection area to select the lines on react-leaflet map
Having difficulty in selecting the lines on react-leaflet map, so I have followed the below solutions,
https://gis.stackexchange.com/questions/466747/create-wider-selection-area-to-select-lines-on-...
- 200
0
votes
0
answers
164
views
Enable edit polygon on click in leaflet maps
I'm using below function to get geography data from backend as json and then draw polygon using leaflet:
function drawAreas() {
$.ajax({
type: "POST",
url: "...
- 251
0
votes
1
answer
104
views
Leaflet: Error while trying to get a GeoJSON from multipolygon Layer
The issue is this one:
I successfully could implmement a MultiPolygon Layer in Leaflet, but I'm getting an error while trying to convert it to a GeoJSON object.
My code is this one:
let ...
- 121
0
votes
1
answer
114
views
Calling cancel button while drawing in Leaflet-Draw
I am Creating Map with some areas drawn as polygons. Each area have property AreaNumber. AreaNumber is given in input under map.
Problem is: How to cancel drawing if AreaNumber is not written in input?...
1
vote
1
answer
353
views
Leaflet Draw: Attempting to erase a drawn shape, by clicking outside of it after drawing it
I'm developing a Laravel app with Leaflet, and trying to implement some funcionalities with the Leaflet Draw plugin.
What I'm trying to do is this: Drawing a polygon, rectangle or circle with Leaflet ...
- 121
0
votes
1
answer
324
views
Prevent draggable circle using Leaflet circle and leaflet-draw library
I have a circle that I add to the map when you click on a specific point (centroid of that circle will be where the point is) and you can edit the circle, meaning you can resize it using the gripper ...
- 453
2
votes
1
answer
177
views
Leaflet.Path.Transform - is there a way to add edge markers in the middle of each border?
I want to add circles in the middle of each border (only visually).
Is there a way to do it?
There are handlerOptions but I couldn't find something like that there.
- 25
0
votes
0
answers
100
views
Leaflet Draw - Selecting 1 Draw Option then another causes Drawing to drag map instead of shape
When attempting to draw, if you first select Draw Circle then select Draw Rectangle then go to click on the map, instead of beginning the drawing and dragging the shape out, the shape gets an initial ...
- 1
2
votes
0
answers
231
views
Leaflet draw does not show the area of the Polygon
I've seen that in some examples using leaflet draw, after drawing the third point, a popup shows the area of the drawn item on the map. I'm unable to replicate this function even setting the
polygon: {...
- 31
0
votes
0
answers
93
views
Leaflet. Does not put a dot exactly where you click
<div class="leaflet-marker-icon leaflet-div-icon leaflet-editing-icon leaflet-div-icon-wh leaflet-zoom-animated leaflet-interactive leaflet-marker-draggable" tabindex="0" style=&...
0
votes
3
answers
268
views
How to use L.canvas to draw a fluctuating circle
I am a back-end programmer who is using leaflet for the first time. I don’t know much about js animation steps. I want to use L.canvas to draw a dynamic circle, just like the picture below.
Specify ...
1
vote
0
answers
2k
views
react leaflet draw - editing a polygon and updating polygon state doesn't work as expected
I have an array of polygons set as state. I want to show them using Leaflet and edit the polygons. Polygon state must change, so I can store them in a database later on.
Problem is: if I edit an ...
- 11
0
votes
1
answer
232
views
Leaflet Draw - How to remove the default toolbar so I can implement a customized one
I'm very confused... If I pass draw: false. I get a toolbar. I need to customize this toolbar so I passed in the parameters to ensure only imperial units were being used at the time and well. Now I ...
1
vote
1
answer
963
views
Leaflet - allow user to draw a Polyline with only two points?
Leaflet draw allows users to draw lines on a map. There's an example at https://leaflet.github.io/Leaflet.draw/docs/examples/full.html
I want my users to be able to draw lines consisting of only two ...
- 14.2k
0
votes
1
answer
634
views
Trying to integrate leaflet's movingmarker plugin to react-leaflet , i have no idea on how to do that .is there any other way to animate
These are my code
suggest me if there is an alternate way to animate my marker
https://ewoken.github.io/Leaflet.MovingMarker/
0
votes
0
answers
112
views
leaflet-draw error: TypeError: can't access property "falseFn", L.Util is undefined
Am getting the error TypeError: can't access property "falseFn", L.Util is undefined when using react-leaflet v3.2.0, NextJs v12.1.6, leaflet v1.7.1 and leaflet-draw v1.0.4. The issue is ...
- 325
0
votes
1
answer
229
views
How can I show the polygon coordinates by popup in Angular?
here is the function of drawing polygon in leaflet map.
onDrawCreated(e: any) {
const { layerType, layer } = e;
if (layerType === "polygon") {
const ...
- 13
0
votes
1
answer
159
views
Check if my coordinate points are inside a polygon drawn by a user
I want to check if my coordinate points are inside a polygon that is drawn by a user in leaflet.
For that, I have one file with my points: shp_geo_sirene
> shp_geo_sirene
Simple feature collection ...
- 11
0
votes
0
answers
483
views
Leaflet Draw - Editing Polygon: Editing does not behave right
i am currently working on a project where a user should be able to edit zones (= polygons). I have created a class Zone which extends L.Polygon so I can create zones and add them to the map. The ...
- 57
3
votes
0
answers
358
views
Leaflet Draw - Editing Polygon: changing Polygon points does not reset Polygon edit points
i am currently working on a functionality, where a user can create and edit zones (polygons). Therefore I am using a class Zone which extends L.Polygon. To edit a specific instance of Zone I am using ...
- 57
0
votes
1
answer
1k
views
Leaflet click to edit layer
i have polyline featuregroup on map and i want to edit layers on click.
if (layer instanceof L.Polyline) {
const style = {
color: InvestmentConstants.colors[$ctrl....
- 159
0
votes
1
answer
312
views
how to use "leaflet-buffer" in react-leaflet?
I want to buffer the shapes
I drew on the react-leaflet.
But I can't find any npm library to react like "leaflet-buffer".
Please help me.
- 405
2
votes
1
answer
945
views
How to get polyline coordinates React-Leaft-Draw plugin?
I use this plugin to draw lines on Leaflet map in my project:
https://github.com/alex3165/react-leaflet-draw
I want to get coordinates (lat,long) of drawn polyline, when _onCreate or later. How could ...
- 197
1
vote
1
answer
1k
views
Leaflet edit GeoJson Data
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 ...
- 29
0
votes
0
answers
471
views
Edit and Delete doesn't work for Angular Leaflet
I am trying to edit and delete the shapes that I draw on the leaflet map. However, when I active the edit or draw, nothing happens and I am unable to edit the shape. I am currently importing leaflet ...
- 453
0
votes
1
answer
227
views
leaflet poligon draw and kml load
new leaflet user here. basically I need to achieve 2 things:
1.draw a poligon (with my mouse) on a lealet map and be able to edit it
2. import/export kml data from KML into/outof a lealet map.
I have ...
- 123
0
votes
1
answer
432
views
Leaftlet- Draw Polyline or Draw Ploygon not working
I have following script to add Dynamically Polylines using latlang points which was saved in user previous session. Script is executing without any error but Polylines are not drawing on the map.
...
- 294
0
votes
1
answer
1k
views
Leaftlet: Adding feature overlay to control, dynamically
I need to add a FeatureGroup to the overlays list. I do add some overlays when instantiating the Leaflet map, but I now need to append a FeatureGroup dynamically, ie. based on some run time conditions....
- 47
0
votes
1
answer
400
views
leaflet to geoJSON with angular, download not triggered
I need to implement a button that download the polygon (or whatever shape) into a geojson file but the download isn't triggered. (trying with 2 different functions but both not working) i actually don'...
- 13
1
vote
0
answers
36
views
i am working on someone project that use a version of react-leaflet that import Map instead MapContainer [duplicate]
I wanna do a task that needs react-leaflet-draw but this error occurred
Does anyone know what should I do except updating the react-leaflet because the project is too big?
1
vote
0
answers
782
views
How to get a canvas element in leaflet map?
I need to fill the polygon with texture using canvas. How can I get a polygon element to do this?
let latlngs = [
[1714, 2549],
[1776, 3336],
[934, 3121],
[836, 2382]
];
let ...
- 13
0
votes
0
answers
560
views
Leaflet Draw: Unable to to Drawing
Leaflet version I'm using: 1.7.1
Leaflet Draw version I'm using: 1.0.4
Browser (with version) I'm using: Firefox 92.0b2 (64-bit)
OS/Platform (with version) I'm using: macOS 11.5
I have a custom ...
- 532
0
votes
0
answers
227
views
Leaflet: Edit button not enabled when drawing over an ImageLayer
All:
Perhaps I am not doing this the correct way. The way Leaflet draw works is that as soon as you draw something on a map using the draw control (circle, square, polygon, whatever) the delete/edit ...
- 41
0
votes
0
answers
961
views
How to use Leaflet.Draw to add and save polylines and reuse in code?
how can i use Leaflet.Draw just for add Polylines and save them in in js code.
I just want to use Leaflet.Draw cause i dont know my coordinates on my map. And i would add over 100 Polylines.
I want to ...
- 1
0
votes
1
answer
779
views
Leaflet.draw multi-coloured polyline segments
I am using leaflet.draw to draw a polyline, with the user doing all the point and clicking (i.e. the points do not come from a database). I want the lines between the individual vertices to be ...
- 504
0
votes
1
answer
177
views
Using the same Plug-in for multiple purposes in leaflet
I am trying to use the leaflet-draw tool for two different things:
as a "regular" tool to create new geometries
if I draw a line, I perform some calculations with turf.js, giving me points ...
- 3
0
votes
1
answer
583
views
Leaflet draw delete features with property
Is it possible to delete multiple features from geojson at once by checking property value?
Using for example code below or using Leaflet draw?
function deleteArea() {
var layers = featureGroup....
- 29
5
votes
1
answer
5k
views
ngx-leaflet-draw: Importing module which does not have a ɵmod property
Importing LeafletDrawModule which does not have a ɵmod property
I am seeing this error during my unit testing(jest).
The code works fine when I run the ng application. Leaflet draw function works ...
- 1,309
1
vote
0
answers
500
views
Leaflet.draw how to draw circle with two mouse clicks
I'm using leaflet.draw
By default, to draw a circle :
You should click on map(this will be the center of the circle)
Then drag the mouse to draw the radius of a circle.
https://leaflet.github.io/...
- 11
0
votes
0
answers
362
views
How can I draw a polyline with leaflet-draw to only get the shown dashed line and then disable the plugin?
I am trying to use the Leaflet-draw plugin to draw a simple polyline. Right now I can enable the plugin where I need it when I start to draw the polyline and it works by adding the vertex to the start ...
- 1
1
vote
1
answer
128
views
How to create a button in shinyR which event is the same as the polygon drawing toolbar in leaflet map
I want to create a button in shinyR which event is the same as the polygon drawing toolbar in leaflet map. I'm trying to figure out how to manually trigger events from R to Leaflet polygons. Basically,...
- 43
0
votes
1
answer
469
views
How to reference the deleted layers in Leaflet.draw?
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 ...
0
votes
2
answers
2k
views
Leaflet JS - Draw rectangle and filter circle markers in the rectangle and update HTML table with only those markers
I have a leaflet map which has circleMarkers plotted by longitude and latitude using the markers array coming from an AJAX REQUEST. This all works fine. I am trying to work on drawing a rectangle ...
- 295