Questions tagged [leaflet]
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
4,118
questions
1
vote
1
answer
40
views
Highlight polygon in Leaflet?
How can I hide(opacity) all polygons, and only show the one with id 73
[click example code]: https://jsfiddle.net/etrv684u/1/
HTML:
<div id="map"></div>
<button id="...
- 13
3
votes
1
answer
44
views
removeLayer or removeFrom(map) not working on betterwms layer from leaflet map
I have this HTML checkbox:
<li>
<input type="checkbox" id="bairroCENTRO-checkbox">
<label for="bairroCENTRO-checkbox">Bairro</label>
</li>
...
- 33
3
votes
1
answer
57
views
Control Layer Order/Z-Index of Custom DivIcon() Marker in Folium Map
I'm working on a project where I'm using Folium to create an interactive map in Python. I want to use a marker that can visualize directional data; however, Folium doesn't seem to offer any and I had ...
- 126
2
votes
1
answer
37
views
Binding id to each layer in Leaflet?
bindPopup gives the correct id, how do I get the correct id from the click event?
The code below gives the id of the last layer.
<!DOCTYPE html>
<html lang="en">
<head>
&...
- 23
0
votes
0
answers
33
views
Setting specific zooms when clicking on different circle markers from the same layer in Leaflet?
I'm creating a Leaflet Map with circle markers designating specific plots of forest land across the U.S. When the user clicks on a marker, a popup shows up with information about the plot. Since the ...
- 11
3
votes
1
answer
38
views
Use grouped layer control plugin with empty "dummy" layer groups that are only used to enable or disable filters for the GeoJSON layer
I want to use leaflet-groupedlayercontrol plugin with empty "dummy" layer groups that are only used to enable or disable filters for the GeoJSON layer when selected/unselected in the layers ...
0
votes
0
answers
24
views
Leaflet error when clicking on search button [closed]
When I click on search button I get this error:
Uncaught Type Error :: Cannot read properties of undefined (reading
'addLayer')
<!DOCTYPE html>
<html>
{% load static %}
{% load ...
-1
votes
0
answers
18
views
Plotting hundreds to thousands of GPS coordinates on Leaflet map using leaflet-routing-machine [duplicate]
Is Leaflet Routing Machine capable of handling hundreds to thousands of GPS coordinates to render on Leaflet map ? If No, what is the best approach or best routing machine to plot on Leaflet map. My ...
- 1
3
votes
1
answer
51
views
Multiple on-the-fly filtering in the layers control based on markers' features properties on Leaflet
I would like to filter my layer's markers (GeoJSON) according to multiple properties parameters simultaneously.
How can I do this using the layer control?
Example GeoJSON:
{
"type": &...
-1
votes
0
answers
75
views
Map geometry from SQL table [closed]
I have a layer for provinces of Turkey. I add related polygons to phpMyAdmin as a SQL table. Now I want to call them as a GeoJSON layer to use on my Leaflet map. I am confused how I should do that.
...
- 137
0
votes
1
answer
35
views
Leaflet plugin Leaflet-WMS.js Gives sometimes weird x-y coodinates [closed]
I am adding a Point-WMS-TileLayer to a Leaflet-Map. In addition I am using Leaflet-WMS plugin to get a onClick a Map-PopUp with the specific GetFeatureInfo for the clicked Point. If the Sites load and ...
- 11
2
votes
2
answers
40
views
Using marker drag event instead mouseover on each polygan layer in Leaflet?
I want to use this leaflet example:
https://leafletjs.com/examples/choropleth/example.html
with some changes:
add a marker to map. i done it like this:
var center=[ 37.8, -96 ];
marker = new L....
- 23
0
votes
1
answer
30
views
Scrollbar to Leaflet L.control.info [closed]
Related to the control L.control.info presented in the answer to the question Leaflet infobox plugin, I would like to add the possibility to activate the height scrollbar for the mentioned control.
...
- 899
0
votes
0
answers
37
views
Publish map with Korean CRS using Leaflet
I was initially trying to build a map using GeoServer on the local network. I received SHP data from a source called the Korean National Geographic Information Platform. However, due to the large ...
- 1
1
vote
1
answer
30
views
Display route layer between current user location and geocoded search locaton in Leaflet?
I would like to create a simple Leaflet app that zooms to the user location, and also to a location defined within the geocode search bar. Secondly, the app should show the shortest route between the ...
0
votes
0
answers
27
views
Using geojson-vt in EPSG:3826
I am a newbie to leaflet.js system. And recently, I meet a problem for future development.
We use geojson-vt to handle canvas drawing in the map which is in EPSG:4326. However, for future work, I need ...
- 101
3
votes
1
answer
70
views
Adding Australian topographic base map WMTS to Leaflet web map
I am trying to add this topographic WMTS from Geoscience Australia as a base map to a Leaflet web map.
In QGIS I can create a new wmts connection and add the service using the connect point URL - ...
- 20.6k
1
vote
0
answers
68
views
Integrating Leaflet map within a Grafana Panel?
I am searching for hints on how to embed or implement a simple Leaflet map in a Grafana text panel (9.4.3 - html format), as there is no layer switch in Geomaps plug-in.
I have tried two things:
I ...
- 43
0
votes
0
answers
52
views
Loading shapefiles, GeoJSON, KML and GPX giving properties only for shapefiles in Leaflet
The following code allows for loading local shapefiles, GeoJSON, KML and GPX, but items properties are not the same. Only shapefiles will return its properties with a bindpopup of global properties.
//...
- 488
0
votes
1
answer
76
views
Displaying layer marker only after feature found with search plugin in Leaflet
I have been playing with different Leaflet plugins. One I am especially interested in is the Leaflet search plugin (https://github.com/stefanocudini/leaflet-search).
I have been able to implement it ...
- 1
0
votes
2
answers
79
views
Highlight all markers with the same feature value upon marker click in Leaflet
I have created a map with several points in qgis2web.
I was wondering if there is a way to edit the final leaflet JavaScript code or HMTL in order to, when clicking on one of the points in the map the ...
1
vote
1
answer
42
views
Remove previous features from GeoJSON layer on filtering data in Leaflet
The following block corresponds to a temporal slider that should update (add and remove) a set of points in a leaflet map.
The code below is currently working as I want, it can add the points when the ...
- 15
0
votes
1
answer
42
views
Problem with GeoJSON layer method .addData in Leaflet
Trying to implement a time range control in some point on a Leaflet map.
I tried to defined the Max and Min values, as a GeoJSON layer already open in the map 'todos_os_pontos'. Then I tried select (...
- 15
0
votes
0
answers
45
views
Polygon grid and raster layer do not align R
I noticed that polygons and raster cells are not perfectly aligned.
Why the border of the cells and the colors do not align perfectly? There is a little misalignment (the colors do not change exactly ...
- 1
0
votes
1
answer
88
views
Way to hide the OpenStreetMap country boundaries in the sea in Leaflet
Is there a way to remove the maritime country borders on a map? (Without using Mapbox). I'm new to leaflet and openstreetmap so may be overlooking something obvious.
How it currently looks:
What I'd ...
- 109
0
votes
1
answer
18
views
Why L.vectorGrid.protobuf return undefined?
I have this component:
import L from 'leaflet';
import { useEffect } from 'react';
import { useMap } from 'react-leaflet';
import { useSelector } from 'react-redux';
import { selectLayersStatus } from ...
- 160
0
votes
0
answers
75
views
Leaflet dynamically change marker color based on value passed to function
I have some JavaScript code that looks like the following:
<script type='module'>
import { circleOptions } from './colors.js';
...
...
value = do_math_on_some_number(number)
const circle = L....
- 141
0
votes
0
answers
40
views
Choropleth map layer not displaying in Leaflet
I have a web map showing various selectable features (point, lines, polygons) and am trying to add a choropleth layer of U.S. state data. The layer displays in the legend where I can toggle it on/off, ...
- 31
0
votes
1
answer
52
views
Handling layer events according to their z-index in Leaflet?
I am adding layers to a map, one which uses this third party Leaflet extension for UTF grids: https://github.com/danzel/Leaflet.utfgrid.
The layer with the UTF grid has a higher z-index and has a ...
0
votes
0
answers
78
views
React Leaflet, convert GeoJSON coordinates to Leaflet format
I am trying to plot a GeoJSON using Leaflet. I know the order of co-ords is different for GeoJSON and leaflet ([long, lat] vs[lat, long]).
Here is my GeoJSON file :
{
"type": "...
- 1
0
votes
1
answer
79
views
About CRS and map origin setting, What is their relation and math equation in leaflet.js via using proj4leaflet.js
I meet a problem about CRS function and map origin setting in leaflet.
I use proj4leaflet.js as the basic CRS function, and then after setting the origin of crs and
resolution, I can get the correct ...
- 101
1
vote
1
answer
69
views
Setting custom SVG icon for external GeoJSON point layer in Leaflet
I am attempting to make a public transport map of Berlin within Leaflet. I have exported layers from QGIS as GeoJSON and edited the file and added a var within a text editor. I am having some ...
- 43
0
votes
0
answers
18
views
leafsync strange behaviour - duplicate maps when syncing two different maps
I have a bizarre thing going on with leafsync::sync. I have two maps generated using mapview function in r. The underlying data is in sf format
map1
map2
As you can see they are two different maps ...
- 459
1
vote
1
answer
123
views
Disabling Geoman edit mode for certain layers in Leaflet?
Cross post from SO. I use leaflet geoman for editing lines and leaflet-arrowheads for rendering lines direction. I am looking for a way to disable leaflet geoman edit mode for layers generated by ...
- 85
1
vote
1
answer
90
views
Retrieve geometry from GeoJSON to L.polygon in Leaflet?
Since I have a problem with Leaflet draw, which, unfortunately is discontinued, I'm trying to rely on Leaflet editable for editing: before I learn how to save edits, I just want to retrieve a polygon ...
- 488
1
vote
1
answer
84
views
Draw line between China and South America through the Pacific Ocean in Leaflet
I am relatively new using Leaflet.js. I want to draw a polyline in Leaflet.js between China and South America through the Pacific Ocean. Instead, I can only draw this line through both places through ...
- 11
0
votes
1
answer
94
views
Using Overpass Turbo output as GeoJSON input to leaflet.js [closed]
I'm trying to get GeoJSON using Overpass Turbo for a number of roads within a certain area. The input to Overpass below produces a map with the selected roads highlighted and what looks like JSON, ...
- 73
0
votes
1
answer
108
views
Adding title for each part of layer control in Leaflet
I create a Leaflet map containing some base maps and overlay maps. I want to organize the layer control so that these two parts separated by a title,
so I want to have such a view on my layer control:
...
- 137
2
votes
2
answers
139
views
Create wider selection area to select lines on map using LeafletJS
When there are thin lines on the map, it is very difficult to click them with the mouse cursor. So is there any option to wider the selection area for lines in LeafletJS, without increasing the line ...
- 526
2
votes
0
answers
156
views
How to rotate folium CustomIcon
I have dataframe; it has name, latitudes, longitudes and heading.
Heading value will between 0 and 360. According to the angle we need to rotate.
I printed my dataframe items inside folium map in ...
- 121
1
vote
0
answers
86
views
Using the L.CRS.Simple in Leaflet, can I make my map wrap?
I'm using Leaflet with L.CRS.Simple and a L.imageOverlay custom non-earth map (no tiles). I'd love to wrap longitude around the image's bounds, but that doesn't seem to be supported in this CRS, or is ...
- 21
0
votes
1
answer
53
views
Only blue geometries shown for protobuf vector tiles in Leaflet
I'm trying to use my vector tile server with Leaflet.
I have this index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, ...
- 160
0
votes
0
answers
416
views
Developing Heatmap using Next.js and react-leaflet
For a research project, I was tasked to develop a GIS very similar to https://cwfis.cfs.nrcan.gc.ca/interactive-map. This is the first time I will develop a GIS-related web application and I do not ...
- 13
0
votes
1
answer
76
views
Limit map zooms to integer zoom level after initial fractional zoom in Leaflet?
I have a map that defaults to a fractional zoom level for a particular reason. (I need to keep it this way if at all possible.)
However, whenever the user zooms in or out by any means, I want the map ...
- 25
0
votes
0
answers
40
views
Combined style for GeoJSON line in Leaflet
In leaflet I have a GeoJSON of line type. I want the latter to have two styles, the solid color in the background and a dotted line inside, as shown in the following image:
In the image, I have two ...
- 303
0
votes
1
answer
59
views
Zoom to layer bounds on popup close in Leaflet
I have a GeoJSON data layer in a small Leaflet project and initially I zoom to its bounds.
map.fitBounds(dataLayer.getBounds());
I bind popups to each feature and zoom to the clicked feature when the ...
- 1,197
1
vote
1
answer
60
views
Initial zoom to GeoJSON object from file (.js) in Leaflet
I am building a viewer with Leaflet API and OpenStreetMap base. I want that when I enter this viewer it shows me immediately in the initial visualization the extension of my layer that I am using. For ...
- 303
1
vote
1
answer
66
views
L.geoJSON layer - it seems to add a layer for every feature rather than being a group?
I have a topojson file that describes 2400 features. When I add it to the map and then
mapObj.eachLayer(function(layer) {
console.log(layer)
}
I wind up with 2400 layers being printed to the ...
- 561
0
votes
1
answer
71
views
MarkerCluster element popup does not appear when clicking a spiderfy element, instead unspiderfy is triggered in Leaflet
I have created a custom popup that appears whenever an element on my map is clicked. However, when spiderfy happens (when a marker cluster is clicked and the map cannot zoom to a level that would ...
- 25
1
vote
0
answers
135
views
MarkerCluster does not zoom when cluster clicked if it cannot reach a zoom level that will separate elements. How can I check for this? [closed]
I have a map with a maximum zoom level of 18. It is possible to have data points that are so close together that they are still clustered at zoom 18, and it is also possible to have multiple data ...
- 25