Questions tagged [leaflet]
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
4,034
questions
1
vote
0
answers
66
views
Use external data for a Leaflet Choropleth map
I'm using Leaflet.js in a Vue project.
When I create the counties within a US State my GeoJSON looks like:
{
"type": "FeatureCollection",
"features": [
...
- 131
0
votes
0
answers
30
views
Make raster tiles in Albers projection or Equidistant Conic
It`s necessary to make tiles in the non-Mercator projection to display them in Leaflet using the Proj4Leaflet library. How can I do this?
3
votes
1
answer
141
views
Get the distance and bearing of each pathline using Leaflet.PolylineMeasure plugin?
I have been playing with polylinemeasure:change and I see I can get the value of the total distance easily with currentLine.distance.
But how can I get the value of each pathline distance and its ...
- 141
1
vote
0
answers
64
views
How to make button in Leaflet in Front of Map [closed]
I'm making a map using a leaflet. And, the button that i created cant in front of the map. How to make the button appear in front of the map?
this code in JSX :
<div className="bottom-0 right-...
0
votes
0
answers
93
views
Leaflet to GeoJSON circle not working
My Leaflet draw plugin doesn't export circles properly. They come as points instead. I tried to find a quick solution for it and this one:
https://gist.github.com/codeofsumit/...
- 3,773
1
vote
0
answers
86
views
Print Leaflet map in PDF using django-wkhtmltopdf
I have a Django app I am trying to print a Leaflet map in PDF using django-wkhtmltopdf, but the map is not rendering correctly. I even try to give more time to the 'javascript-delay' parameter but is ...
- 163
1
vote
2
answers
190
views
Calculate TMS tile coordinates (XYZ) for a given Lat/Lng pair in EPSG:27700 projection?
I am new to GIS in general and struggling with the correct approach to achieve my goal.
I have a list of 100,000 or so Lat/Lng taken from a GPS and I need to retrieve the singular tile for each of ...
- 11
0
votes
0
answers
15
views
Does Leaflet support GeoTIFF ImageOverlay? [duplicate]
I am planning to use Leaflet to display my raster images. I see the example usage in ImageOverlay is using a .jpg format.
Would it also be possible if the image is GeoTIFF, .tif format?
I am just ...
- 495
1
vote
1
answer
53
views
Leaflet - populate circle when clicking on the marker - based on csv data
I've produced Leaflet map based on the CSV data as per the project below:
https://github.com/HandsOnDataViz/leaflet-map-csv
https://handsondataviz.org/leaflet-maps-with-csv.html
It works well, ...
- 3,773
0
votes
0
answers
79
views
Use ArcGIS basemap vector tile in Leaflet
I want to use this on my school project, I searched many ways but still not.
https://basemaps.arcgis.com/arcgis/rest/services/OpenStreetMap_v2/VectorTileServer From https://www.arcgis.com/home/item....
- 1
0
votes
0
answers
28
views
Popup with multiple information different tabs [duplicate]
I have a lot of information that I want to show on a Leaflet Popup. In my case I have a GeoJSON file with different points. However in my case one point represent the same location, but it was ...
- 1,459
0
votes
0
answers
110
views
JavaScript fetch function fails to get .txt file
I'm creating a web page with a Leaflet map, and when clicking on a certain marker on the map, information about the location appears in a div beside it.
I can update this information directly in the ...
0
votes
0
answers
119
views
Export selected area in Leaflet Folium
I am using Folium library with Python to visualize some data (markers, polylines...) where those objects have some values in popup window. I am looking for a option to select an area (for example by ...
0
votes
0
answers
117
views
Leaflet on-click circle doesn't work in Python folium
I would like to make the Leaflet circle an on-click feature in my Python folium map.
Unfortunately, the code returns nothing despite no information from the console.
range_js = """
$(...
- 3,773
3
votes
1
answer
67
views
Changing color of newly created line feature on mouseover in Leaflet?
How to highlight one feature on hover from a featureGroup layer?
It's easy when the layer is predefinied and static - I could write a highlighFeature and onEachFeature functions and pass them as ...
- 57
0
votes
0
answers
100
views
Python folium: ValueError: Marker location must be assigned when added directly to map
I am working on customizing the marker in Folium
The initial link, from where I took the approach is here:
https://github.com/python-visualization/folium/blob/main/folium/vector_layers.py#L318
now, my ...
- 3,773
0
votes
0
answers
61
views
How to make selection of multiple grids via mouse click and hover event on leaflet map
I am working on a project where I need to create a map and show grid on map just like the website https://app.nextearth.io/. I was able to create grid using below code but don't know how to create ...
- 111
1
vote
2
answers
86
views
Leaflet and GeoJSON coordinates usage
I have a GeoJSON object “feature” stringified as :
{
"type": "Feature",
"properties": {
"id": 1039215298,
"version": 1,
...
2
votes
1
answer
86
views
Leaflet VectorGrid - circle markers cut off at border in custom implementation
I am extending a custom class from Leaflet.VectorGrid in an effort to optimize rendering high-volume data on a leaflet map, through our api. My chosen tactic is to create a grid, where each tile is ...
- 468
1
vote
1
answer
29
views
Finding the relative order of GPX tracks drawn with leaflet-gpx?
I am displaying many gpx tracks on a map using leaflet-gpx, and I can bring them to the back of the other tracks:
LG = new L.GPX(...) //loads the track (not detailed here)
LG.on('click',function(e){
...
- 372
1
vote
0
answers
126
views
Getting the source marker of an on click event in Leaflet? [closed]
I create multiple Markers in leaflet and bind an on click event handler to each of them, such as:
marker = L.marker(
geoJsonPoint.geometry.coordinates,
{ icon: someIcon }
)....
- 111
2
votes
1
answer
51
views
Shifted TiledMapLayer from Esri ArcGIS"MapServer
I've been overlaying map layers from different sources into Leaflet without issue until I tried to load this one. The screenshot below shows the incorrect offset when using L.esri.TiledMapLayer.
Here'...
- 111
1
vote
1
answer
95
views
Correct parameters to visualize WMS layers in Leaflet and proj4?
I'm struggling to visualize WMS-layers from a REST service using Leaflet. All I see currently is a gray map, not changing anything when moved.
The layers I want to visualize are located in Faroe ...
- 13
0
votes
0
answers
169
views
How to create squareGrid on leaflet map with turf.js grid and OSM data
I am a beginner in using leaflet map and turf.js and want to show square grid of the OSM data which I will fetch from OSM db. I saw multiple example of turf.js but did not find any perfect example as ...
- 111
0
votes
1
answer
103
views
Converting Turf Polygon to Leaflet Polygon
I'm using Geoman and Turf to handle polygons on my map. In order to add a new functionality, I have to transfer an element from a function where it's typed as a Turf Polygon to another function which ...
- 1
2
votes
1
answer
132
views
Folium to display points in Leaflet map (from data stored in array)
I'm attempting to use Folium to create a web map using Leaflet with data stored in an array. However, the markers are not being added to the map.
I'm using the code below.
centerX = 34.2104
centerY = -...
1
vote
1
answer
128
views
Seperate multiple tracks and segments in a single GPX file using leaflet-gpx plugin?
I'm using leaflet-gpx to plot a .gpx file containing multiple tracks but I can't get it to distinguish between each track of the file:
This is the basic structure of the file:
<gpx>
<trk&...
- 372
1
vote
1
answer
62
views
Show totalDistance from L.Routing.control at every route change?
I need to insert the calculation of the distance of my route in the input to show the user.
I need this to happen when the page loads and when the user adds or removes a bookmark.
I tried in different ...
- 25
2
votes
1
answer
192
views
Leaflet draw - input-based circlemarker radius
I am developing a snazzy drawing kit based on the Leaflet draw plugin. What I would love to have is the input-based circle marker radius. My code looks like this:
var layer = e.layer,
type = e....
- 3,773
2
votes
1
answer
184
views
Leaflet Control Search not finding location
I'm implementing the Control Search for a Leaflet.js webmap. The CSS and JS code has been added successfully and Control Search box appears in the map, but my search results in an error stating that &...
- 527
1
vote
0
answers
130
views
Activating 'on click' event on the path created by router in Leaflet?
I have some points retrieved from the database, and with them, I draw and create my path and markers.
I would like that when the user adds another marker to the route, a click event is activated.
I ...
- 25
0
votes
2
answers
254
views
Prevent Leaflet map from showing rectangle around layer on click [closed]
I have a Leaflet map that I load GeoJSON data into. I roll over the polygons with the mouse and click on them.
When I roll over with the mouse, the tooltip to the layer appears in Firefox, but nothing ...
- 3
1
vote
0
answers
48
views
Leaflet Vector Grid - cancel tile requests when not in viewport
I use Leaflet with the Leaflet.VectorGrid plugin to serve my own vector tiles (created with pg_tileserv). The tiles are automatically reloaded/updated when the user zooms in/out or is panning the map.
...
- 47
0
votes
1
answer
731
views
Attach click function to the button inside a popup in Leaflet?
I'm trying to create a button inside a popup which will draw a line on the map when clicked. Line coordinates must be based on the properties of the point layer.
I saw some ansewrs on stack and it ...
- 57
1
vote
0
answers
63
views
Simple Service or library to tile GeoTIFF
TL;DR: is there a Tile Map Service that can generate tiles on the fly given a GeoTIFF image as input. Alternatively, can gdal2tiles.py be used to generate only 1 tile instead of all tiles for a zoom ...
- 111
1
vote
0
answers
40
views
Calculating 2 or 4 new marginal bounding boxes from 2 overlapping bounding boxes in Leaflet?
The Scenario
I have a web map that calls for data whenever the map moves. It sends the bounds of the map and returns data within those bounds. Our data source just got way bigger, so I am trying to ...
- 468
0
votes
1
answer
142
views
Labeling GeoJSON polylines in Leaflet
I have followed Leaflet GeoJSON style and labeling to create labels for my GeoJson
I achieved this using "OnEachFeature" and a "CSS" class. This is a part of the code:
CSS class
...
- 63
0
votes
1
answer
202
views
Hide and show route path by on click event?
I want to make a visual filter for the user. I already managed to hide the markers. The markers I hid through CSS. Now I need to hide the lines that connect the markers.
As I saw this autoRoute ...
- 25
1
vote
1
answer
72
views
Leaflet not getting correct bounding area for NASA GIBS map in EPSG:4326 CRS
I am creating an app using Leaflet and GIBS. The trouble I am having is when I try to use a link from EPSG4326 the bounding box is incorrect.
When I use ESPG3857 the bounding box is correct. Draw ...
- 113
3
votes
1
answer
257
views
Python folium add marker in random place
I would like to add a marker in a random place in Python folium.
I found the example, which I would like to implement, which is here:
http://kody.wig.pl/javascript/dodawanie-przesuwanie-i-kasowanie-...
- 3,773
3
votes
3
answers
116
views
Coordinate system to be used with qgis2web (QGIS to Leaflet)
For my project in University I want to create an interactive map. My Prof told me, Leaflet only uses WGS84, but he wasn't sure. When using the qgis2web plugin, should I have WGS84 as project ...
- 31
1
vote
0
answers
355
views
How to remove a marker from a Leaflet map?
I'm currently making a website where I'm using Leaflet 1.7.1 and Nominatim API and VueJS 3 and I'm trying to delete the marker after I search an address. When I search the address the first time ...
- 11
0
votes
1
answer
307
views
How do I draw in a Canvas with Leaflet 1.9?
I am beginning with Leaflet 1.9.2, and so far I was able to draw a tiled map with some markers and polylines on top of the map.
Now I'd like to draw animated custom vector shapes on my map like in ...
user216155
0
votes
0
answers
76
views
Buttons that doesn't show well: Leaflet Routing machine
I have a basic Leaflet map (v1.7)
<div id="map" class="map" style="width: 100%; height: 100%"></div>
<script>
// base map
const map = L.map('...
- 442
0
votes
0
answers
269
views
Display Points on Leaflet Map
I'm attempting to add data from a CSV file to a Leaflet map but the points taken from the file aren't populating on the map.
I'm using the code below to parse the CSV file and create markers from the ...
1
vote
1
answer
153
views
Python folium - Leaflet plugin not visible on the map
I would like to inject Leaflet plugin into Python folium map.
After applying the following code:
map.get_root().header.add_child(folium.CssLink("https://pasichnykvasyl.github.io/Leaflet.BigImage/...
- 3,773
0
votes
1
answer
388
views
Change color of GeoJSON polyline in dash-leaflet
I am adding two GeoJSON polyline layers to a leaflet window in a dash app using callbacks like this:
dl.Map(children=[dl.TileLayer(), dl.GeoJSON(id="geojson1"), dl.GeoJSON(id="geojson2&...
- 620
0
votes
0
answers
337
views
Python folium - add labels to drawn elements
Following the query here:
Exporting GeoJSON with defined properties using Folium Draw plugin
I would like to add labels to the elements, which will be drawn and their features will be defined.
By ...
- 3,773
0
votes
1
answer
44
views
Load tif file on Leaflet Map from input type=file
How do I load a tif file from html input? So i get the tif file as a Blob from my input.
<input class="form-control" id="rasterdatenInput" type="file" name="...
- 1
1
vote
1
answer
193
views
Leaflet ImageOverlay of GeoTIFF [closed]
Below example uses Leaflet L.ImageOverlay to show GeoTIFF. The issue is the image data doesn't match the GeoTIFF bounds shown by the markers and the image seems to be shifted northwest.
If you click ...
- 11