Questions tagged [leaflet]

An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

Filter by
Sorted by
Tagged with
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="...
user_unknown's user avatar
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> ...
Mr. Vilela's user avatar
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 ...
Austin's user avatar
  • 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> &...
chris's user avatar
  • 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 ...
Zac's user avatar
  • 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 ...
Cesar Fonseca's user avatar
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 ...
binod joshi's user avatar
-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 ...
Rahul's user avatar
  • 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": &...
Cesar Fonseca's user avatar
-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. ...
Solmaz's user avatar
  • 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 ...
jules2703's user avatar
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....
mrmiremad's user avatar
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. ...
Acperience's user avatar
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 ...
mslee's user avatar
  • 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 ...
Samuel Gachuhi's user avatar
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 ...
abramhum's user avatar
  • 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 - ...
Ben W's user avatar
  • 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 ...
Per Nett's user avatar
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. //...
Vincent Dc's user avatar
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 ...
Bfox's user avatar
  • 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 ...
Konstantinos Sideris's user avatar
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 ...
PedroMTG's user avatar
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 (...
PedroMTG's user avatar
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 ...
baccione's user avatar
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 ...
Space's user avatar
  • 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 ...
Kambei's user avatar
  • 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....
Miss_Orchid's user avatar
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, ...
MapAnalyst's user avatar
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 ...
Rob Dennett's user avatar
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": "...
John's user avatar
  • 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 ...
abramhum's user avatar
  • 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 ...
Gregory C's user avatar
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 ...
rm167's user avatar
  • 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 ...
Matt's user avatar
  • 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 ...
Vincent Dc's user avatar
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 ...
Carlos Muñoz's user avatar
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, ...
Chris's user avatar
  • 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: ...
Solmaz's user avatar
  • 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 ...
Kishor's user avatar
  • 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 ...
heshjse's user avatar
  • 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 ...
Dan's user avatar
  • 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, ...
Kambei's user avatar
  • 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 ...
Sonny's user avatar
  • 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 ...
ysi_d's user avatar
  • 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 ...
MrShaggy87's user avatar
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 ...
winnewoerp's user avatar
  • 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 ...
MrShaggy87's user avatar
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 ...
MKF's user avatar
  • 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 ...
ysi_d's user avatar
  • 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 ...
ysi_d's user avatar
  • 25

1
2 3 4 5
83