Stack Exchange Network

Stack Exchange network consists of 174 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [leaflet-draw]

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

3
votes
0answers
40 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. ...
1
vote
1answer
16 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....
1
vote
1answer
42 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. ...
1
vote
0answers
85 views

How to change the layer selection view from Radio button to Image in Leaflet

I have implemented the below example to show the multiple base layers of map in my application using LeafletJs. Leaflet JS LayerGroup example I'm able to successfully implement the same but I'm ...
0
votes
1answer
188 views

How to highlight marker dynamically with leaflet and leaflet draw

I am trying to make a selection via drawing a rectangle (or any shape) with leaflet draw. The selected features should be highlighted. I saw that there are various functions within the leaflet source ...
2
votes
0answers
87 views

Revert the resized polygon in L.Draw.Event.EDITED event

I'm trying to stop the user in edit mode to don't overlap on other shape. In CREATED event, I can easily remove the layer. But in EDITED event I want to revert the shape back to original position ...
0
votes
2answers
72 views

Updating popup of a Leaflet Polygon

I am trying to update a popup for a polygon that I have drawn with Leaflet.Draw. Now I understand that to set a popup to a layer I just created, it's all fine. I can also get the id of that layer I ...
2
votes
2answers
245 views

Leaflet popup disappear or moved over drawn polygon

If I would like to popup something over an actually drawn polygon, then it sometimes disappear or moved to the first point of the polygon. https://jsfiddle.net/o149mgwj/19/ var drawnItems = new L....
1
vote
0answers
214 views

Leaflet Draw: edit/delete features of different layers

I use Leaflet Draw and Leaflet WFST plugins to create/edit features and save my edits to PostGIS Database (hosted by GeoServer). I have three layers: points, lines, and polygons. I manage to make new ...
0
votes
1answer
802 views

Entering manual coordinates to draw polygon in Leaflet?

I want the user to enter manual coordinates of a polygon and then to click on a button to draw the polygon. My code: <body> <div> Polygon: <input type="text" name="...
1
vote
0answers
535 views

Show marker only in area polygon [closed]

I got task, to plot polygon on map. After finish draw only marker inside a polygon appear on map. I'm done with leaflet.draw and Draw.Event.Created. What method I can use to check which marker inside ...
0
votes
0answers
83 views

The map pane puts the polygons below the layers

I'm using Leaflet 1.3.1. Adding services via ArcGIS REST API: map.createPane(service); let new_service = L.esri.dynamicMapLayer({ pane:service, url: url, opacity : 1, ...
0
votes
2answers
2k views

How to get the exact Circle that user has drawn using Leaflet.draw.Circle?

I have a simple Leaflet map, where The user can draw a Circle, using Leaflet.Draw. When you use the following code to get the geometry, map.on(L.Draw.Event.CREATED, function (event) { var ...
3
votes
0answers
1k views

Get the lat/lng values of lines, polygons drawn by Leaflet drawing tools

I am new to JavaScript and Leaflet too. I made a basic map in Leaflet. I have also floated one sample geojson file in it. Now I also want leaflet for sourcing(co-ordinates) to my PHP file. So I need ...
0
votes
1answer
48 views

Leaflet draw - adding actions to prefilled markers

There are a bunch of markers which need to be loaded by default. The user can edit these markers and their corresponding properties in the popup window. The user can also add new markers and fill in ...
2
votes
1answer
230 views

How to use Draw.js in a Leaflet offline map

I'm trying to build a data-collecting map using Leaflet. To do this I have to download the Leaflet JavaScript files but I can't find out how to download a working draw.js. When I download draw.js I ...
2
votes
1answer
512 views

Leaflet.Draw - GeoJSON to KML

I have made a map using the Leaflet Draw plugin which allows the user to download their drawn items. These drawnItems are exported as GeoJSON using the following code from here: document....
0
votes
0answers
181 views

Change style of leaflet draw

I want to change the style of edges that I think are ugly in leaflet draw ( I'm speaking about the big rectangles ), I did some research on internet and found that I need to do something like: ...
0
votes
0answers
202 views

Submit a form from within a leaflet popup save in data base?

I have a leaflet map in angular 4 and I want to add park out a form in a leaflet popup and upon clicking the 'submit' button - the information in the form will be inserted into my MySQL database.I try ...
0
votes
0answers
376 views

leaflet toolbar in typescript?

I'm new in using the leaflet map with angular 4. How do I add a leaflet toolbar with type script? I find only a toolbar with javascript this is my map.component.ts import { MapService } from './../...
1
vote
0answers
221 views

Leaflet Marker render

I now have a map and get the basic of the map from a geoJSON file. Now i have a websocket and sent always positions from 3 different people. So how can i add a marker , which i can move to another ...
0
votes
1answer
589 views

Importing Leaflet Draw NGX for angular 4

I followed the steps from the main git: https://github.com/Asymmetrik/ngx-leaflet first I installed the required libraries (leaflet, leaflet-draw, leaflet-ngx, and leaflet-draw-ngx) then I declared ...
2
votes
1answer
1k views

React-Leaflet-Draw: accessing a polygon's array of coordinates on save

I've got a component which puts an editable polygon on the map. When the user hits the "save" button, I want to access an array of the polygon's new vertices, so that I can save them. How do I do ...
1
vote
1answer
1k views

How to detect “delete” or “edit” events in popup menu created with Leaflet-draw-toolbar plugin?

In this example you may create a polygon and then click it and popup menu shows. There is three buttons: edit, delete and pick a color. How can I detect event and determine which of it - delete or ...
1
vote
1answer
905 views

Correct method to save and restore leaftlet drawing into mysql database

I have the following code for saving my coordinates of what I draw. So what I do on drawing created I have the following function. map.on(L.Draw.Event.CREATED, function (e) { var type = e....
1
vote
0answers
312 views

While Dragging, created marker with connected polyline from toolbar,previous polyline between two marker deleted using leaflet?

When dragging created marker with connected polyline from toolbar,previous polyline between two marker automatically deleted or auto connect from with new draggable marker? I'm try to dragging ...
1
vote
0answers
57 views

Can't execute Leaflet Layers properly

https://jsfiddle.net/324h2d9q/87/ I tried to make a map with Leaflet where I have multiple layers where I sort things via category, but it seems that it is not working... If I click on ,,Muzee", it ...
2
votes
0answers
253 views

how to save drawable entities with leaflet.draw/draw polygons into my Postgis database with getting also the coordinates

I am very new to creating webmaps with Leaflet and I am trying to save my shapes I draw into my postgis db. I would prefer to be saved as .shp or any default format (i.e. json) with its geometry field....
1
vote
1answer
619 views

Spatial Queries in Leaflet, select polygons from (A1,A2…An) which intersect with polygon (B)

I am looking for an online solution for leaflet where I can select and export (console log, geojson, addLayer) a group of polygon from a geojson file which intersect with a drawn polygon (with leaflet ...
0
votes
1answer
605 views

Can Draw and Edit mode be enabled at the same time on Leaflet?

Imagine you want to draw several shapes (marker, linestring, polygon) and also edit them after the shape is drawn or whenerver you want having the possibility to continue adding stuff. at the moment ...
1
vote
0answers
213 views

Relating Polygons to Results in AngularJS & Leaflet

I am using Lealfet.draw tools for creating polygons and then fetching results from a database based on the coordinates of those polygons. I want to be able to relate each polygon to it's ...
1
vote
2answers
1k views

Removing tool from Leaflet Draw

I am using Leaflet draw for adding Draw toolbar to my leaflet map. I am using angular leaflet directive to add the map. I want certain elements of the draw toolbar to be removed, specifically (line ...
1
vote
0answers
174 views

Clustering polygon's created with Leaflet.Draw

I am experimenting with Leaflet at the moment and am trying to cluster polygon's that I've created with Leaflet.Draw plugin's tools. I know that clustering polygons is possible (Is it possible to ...
1
vote
2answers
509 views

Get <canvas> features inside a rectangle after drawing it

Let's start with https://jsfiddle.net/ziyuang/dfekwzhd/ Say, now I want to allow users to specify areas by drawing rectangles. After the map having a rectangular area, I want to have the information, ...
1
vote
0answers
50 views

How can the users of my map add their favorite places [closed]

I want to create a map where the users of my website can add their favorite touristic places by clicking on the map and add some attributes. I don't mind if it's done by Leaflet openlayers or any ...
-1
votes
1answer
455 views

Finding the centre of a circle drawn using leaflet draw and also calculating the distance between 2 lat longs

Am new to JS so the below queries may look simple. Query: I have drawn multiple circles on the map and i need to fetch all the markers details available with in the circle. In order to achieve that ...
8
votes
1answer
2k views

How to enable a Leaflet Draw tool programatically

I'm using the Leaflet Draw control, and would like to enable/activate a particular tool (Draw Polygon) using JavaScript, so that this tool is active when the page loads. Is this possible? https://...
1
vote
0answers
491 views

Select multiple choice of marker - leaflet draw angular 2

I want to create a function that can select multiple choice of marker like Mapmarker National Geographic using a leaflet draw component. I already created a toolbar that the user can draw polylines, ...
2
votes
1answer
276 views

Allow popups to show through another layer

I have a Leaflet feature layer (Layer1) with popups bound. I'm using Leaflet Draw to draw a polygon in Layer2 over the feature layer. I want to then be able to open the popups for Layer1 while still ...
1
vote
0answers
526 views

Download google tile layer maps

I am using google map in leaflet like this var osmUrl = 'http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', osmAttrib = '&copy; <a href="http://openstreetmap....
1
vote
0answers
1k views

Reason for “L.Control.Draw is not a constructor” error?

Below is my code: <!DOCTYPE html> <html> <head> <title>Simple Leaflet Map</title> <meta charset="utf-8" /> <link rel="stylesheet" ...
1
vote
1answer
2k views

How to set the icon for a Leaflet marker based on a variable

I'm just beginning to learn coding in d3 and leaflet, i have some code that i'm experimenting with and facing some problems with setting the icon. I wanted to change the leaflet icon depends on the ...
1
vote
1answer
1k views

Displaying bounding box array on leaflet map

I have a set of bounding box arrays which I want to display over leaflet map in my application. The arrays look something like this with the bounding box co-ordinates in it: Array[4] 0: -2....
1
vote
1answer
688 views

Leaflet: edit popupcontent

Im looking foward to create a mobile leaflet application to collect data. First i use the L.locate-control plugin to get my current location: L.control.locate({ strings: { title: "current ...
2
votes
1answer
2k views

leaflet.draw error adding control

I'm facing problems with this plugin. I can not even add a toolbar. This is what I'm doing: In index.html file I'm using this lines: <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"&...
1
vote
2answers
915 views

Find leaflet id of the latest layer created in Leaflet

I am adding layers to a layergroup "drawnitems" in leaflet drawnItems.addLayer(L.polygon(polygon)); I need to find the leaflet id of the layer created using the above code immediately upon its ...
0
votes
1answer
554 views

How put Leaflet Filelayer data into editable layer so I can edit after Upload

I am using “togeojson” and “Leaflet.FileLayer” for File upload in my leaflet draw using below Code: L.Control.FileLayerLoad.LABEL = '<img class="icon" src="folder.svg" alt="file icon"/>'; ...
2
votes
1answer
975 views

Add touch events to leaflet

I am developing an application that collects data by drawing on the map different shapes. I am usinf LeafletJS and ionic framework, when I test the application on the computer browser it works fine, ...
2
votes
1answer
811 views

Leaflet Tooltip bug when added leaflet-draw

Here's a simple demonstration: The file leaflet.draw-src.js was downloaded here: https://github.com/Leaflet/Leaflet.draw/tree/master/dist If you remove the script tag with the leaflet.draw-src.js the ...
1
vote
1answer
499 views

Adding button to move map Direction in Leaflet?

I want direction button in my Leaflet map so user can move map in mobile or desktop browser easily. I am new and do not know how to start. Please guide me.