Questions tagged [leaflet]
Leaflet is an open-source JavaScript library for mobile-friendly, cross-browser, interactive maps. For the R leaflet package, please use the r-leaflet tag.
leaflet
13,872
questions
0
votes
3
answers
786
views
Update/Reload specific tile in leaflet dynamicly
If my server tells the clients when and what tile to reload/update, how can reload/update the tile sent from the server? I'm using the L.CRS.Simple CRS. And I have no zoom levels on a custom game map.
...
- 12.6k
1
vote
1
answer
749
views
Do I need to extend Leaflet's marker class to add properties?
It's something that I have very rarely done - adding properties to a Leaflet marker.
I was reading this page which says that we should
customMarker = L.Marker.extend({
options: {
name: '',
...
- 16.4k
1
vote
1
answer
589
views
how to keep class attribute stored for Leaflet.js markers
I have a set of markers each stored in different Layers... lets say:
let earth= {
layer:{
...
Markers:{...}
}
}
let mars= {
layer:{
...
Markers:{...}
}
}...
- 5,643
122
votes
20
answers
236k
views
Leaflet changing Marker color
Is there a way to randomly change marker-colors in native Leaflet? I'm using svg elements which could be styled.
I know that it is possible with mapbox.js
To clarify what I intend to do: If you add ...
- 5,643
0
votes
0
answers
59
views
How can I improve React Leaflet performance when rapidly updating a marker position?
I'm working on a page which reads GPX files (a series of lat/lon GPS points) and plots the route using React Leaflet as well as showing an elevation profile using react-chartjs-2.
When hovering over ...
- 1,330
0
votes
0
answers
20
views
Vue2leaflet LPopup test if it is open
I am using Vue2Leaflet and my Markers have both a LPopup and LTooltip.
The LTooltip stay active (display on mouse hover) even when the LPopup is open, I would like to change this pattern to ...
- 306
-1
votes
0
answers
46
views
Add weather to popup content table
I have a popup content table look like this:
var popupContent = '<table>\
<tr>\
<td colspan="2">' + (feature.properties['NAME_2']...
- 9,299
0
votes
0
answers
25
views
Polyline starts from main world map instead of nearest point [duplicate]
I am using Leaflet map to draw polylines and connect waypoints by clicking on the map.
I also cloned the route and waypoints to the left and right world map.
Sometimes, the route is drawn incorrectly. ...
- 394
0
votes
0
answers
49
views
Leaflet post popup properties to sidebar
I am building a game map for a friend and have run into an interesting way to do their popup content. Basically the popups are going to have history over each section so I decided that displaying it ...
0
votes
4
answers
1k
views
react-leaflet map is not correcly displayed in Ionic 5
When i am trying to display map in mobile view i see broken map:
https://stackoverflow.com/a/36257493/13739566 - in this link is
description why it doesn't work but use 'invalidSize()' doesn't work ...
- 46
10
votes
1
answer
551
views
Load Quarto html map data from json for Leaflet map generated in R
I have created a Quarto blog post which contains many leaflet maps, generated in R. As the data for each map is embedded within the html file, the file itself is very large. This is causing problems ...
- 1
1
vote
2
answers
88
views
How to draw the shortest path between circles
I am building a web app (in Qwik) that requires parsing a .xctsk file (paragliding competition tasks), and drawing the task on a map. A task consists of a bunch of circles in a given order.
I have ...
- 11
0
votes
0
answers
95
views
Vue Leaflet adding a select / unselect all in Layer groups control
I am using Vue.js 3, Leaflet and Vueleaflet.
My map displays the layers groups containing markers (LLayerGroup) :
I want to add "Select all" / "Unselect all" checkboxes at the top ...
- 306
0
votes
0
answers
132
views
Vue.js Leaflet : bounds change does not update correctly
I am having a bounds update issue with Vue Leaflet.
How it works :
I am getting info from an API
I add markers to display on the map
I fit bounds to display markers and get the right zoom and ...
- 306
0
votes
0
answers
17
views
remove last route line if i check multiple vehicles and the other route lines still draw on map after i uncheck all vehicles
export const drawOnMap = (info, map, L) => {
if (info?.Latitude != 0 && info?.Longitude != 0) {
let pointA = new L.LatLng(info?.Latitude, info?.Longitude);
let pointB = new L....
0
votes
0
answers
53
views
Marker(Canvas icons) disappears when zoomed in and dragging on the react leaflet map
When I am zoom in and then drag canvas icons on react-leaflet map, so that time others canvas icons disappears but when I zoom in or out again all the canvas icons appears properly.
Before the zooming ...
- 1
45
votes
9
answers
50k
views
leaflet map shows up grey
I'm starting leaflet.js with the quickstart but my map shows as grey... is there something I'm missing?
script.js:
var leafletMap = L.map('leafletMap').setView([51.505, -0.09], 13);
L.tileLayer('...
- 15.7k
44
votes
10
answers
62k
views
Assign ID to marker in leaflet
So i try to achieve a result as on foursquare: https://foursquare.com/explore?cat=drinks&mode=url&near=Paris which is when you clik on a marker on the map, it scrolls through the listed of ...
- 2,034
0
votes
0
answers
18
views
vue3 and Leflet Map geoJson bounds
How do I set the center and define the bounds for given getJSON data?
Each geoJson object is like this:
{
"type": "FeatureCollection",
"features":[
{
...
- 2,770
0
votes
2
answers
1k
views
Adding keyboard controls to a Leaflet js Choropleth map
I have a leaflet.js choropleth map that is almost exactly like the tutorial map
http://leafletjs.com/examples/choropleth.html
I want to be able to tab through the map and have the states info show ...
- 216
0
votes
0
answers
41
views
Grid in the picture from leaflet-simple-map-screenshoter
I use to leaflet-simple-map-screenshoter to take screenshots in a leaflet. I use to the default plugin. Why do I see a grid in the pictures?
let pluginOptions = {
cropImageByInnerWH: true, // crop ...
- 1
0
votes
1
answer
35
views
leaflet not set the marker at real position over custom map
I search info about the markers and why doesn't appear into the position coordinates. Include here in stackoverflow aren't info about my problem. The most near that found something similar it's this: ...
2
votes
1
answer
60
views
Correct way to extend leaflet classes with TypeScript
I am trying to extend the Marker class in leaflet.
I have read the tutorial on extending the class system and have managed to extend Marker with my desired functionality. However, I am unable to get ...
- 9,299
0
votes
0
answers
22
views
Use Tom-Select inside Leaflet Control
I'm trying to use TomSelect inside of a Leaflet control layer. Displaying it works as expected, but I'm not able to select anything.
It seems like the click event is not getting through to the ...
- 1
0
votes
2
answers
59
views
Is there a way to make Leaflet accept long/lat points assuming a spherical geometry?
I have two sets of coordinates: one from a sphere and the other WGS-84. I'd like to get them both into Leaflet. But Leaflet assumes long/lat points are WGS. As far as I can tell, its quite difficult ...
- 9,299
0
votes
2
answers
2k
views
Display Marker Using Latitude And Longitude From SQL Database With Leaflet Map In ASP.NET CORE MVC
for my website, I am using ASP.net Core MVC on Visual Studios 2019 and SQL Server Management Studio for my database.
I am trying to display markers using data(Latitude and Longitude) from my Database ...
- 51
0
votes
0
answers
21
views
VueJS leaflet fitBounds not working without timeout
I have an issue with leaflet in VueJS 3. I'm creating a leaflat map with markers, but I have to use a setTimeout-function to make the fitBounds() work. Without the setTimeout I see the map with ...
- 5
7
votes
4
answers
14k
views
Leaflet: Uncaught TypeError: L.markerClusterGroup is not a function
I am trying to add markercluster into leaflet.
var markers = L.markerClusterGroup();
My header file include:
script(src='https://unpkg.com/[email protected]/dist/leaflet.js')
link(type='text/css'...
- 953
12
votes
3
answers
12k
views
How to display vector tiles generated by geojson-vt in leaflet?
I have a lot of GeoJSON spatial data that I want to display on a leaflet map. Around 35,000 GeoJSON objects.
Because the amount of points can get very large, I wanted to use the geojson-vt library to ...
0
votes
0
answers
16
views
How can I ensure that all line weights are adjusted at once?
I have linked a Geo section to my site where the routes of my trips are listed. In most cases, the polygons are clustered in groups of a day, which in turn consist of various (colored) line segments, ...
- 31
0
votes
0
answers
44
views
How to access options when extending a leaflet class?
I am trying to extend a Leaflet class, and looking at the documentation it gives this example:
var MyBoxClass = L.Class.extend({
options: {
width: 1,
height: 1
},
...
- 175k
0
votes
0
answers
37
views
How to get rid of React Leaftlet map gray area while scrolling vertically
Hey guys I have use React Leafnet in my web app, everything seems working fine when I scroll map horizontally it loads new map images nicely but when I scroll map vertically, than after some position ...
- 91
2
votes
2
answers
123
views
Weird overlap with russian street names
I am not sure why but on my website with leaflet, since yesterday the map is blurry, the tiles border are visible and on some tiles I have this weird overlap with english and russian street names:
I ...
- 11
2
votes
1
answer
8k
views
setOpacity for multiple markers at the time
I'm using leaflet for my project and I want to use filter marker in it. To do it, I will setOpacity to 0 for all markers and re setOpacity to 1 for my targets. I know leaflet allow to setOpacity for ...
- 216
0
votes
1
answer
32
views
Trying to clear markers when toggling checkbox
I'm trying to resolve an issue with regards on how I can clear the markers when listening to changes on the checkbox. I've been building a map plotter with the combination of libraries from leaftlet....
- 2,444
3
votes
4
answers
19k
views
What is the best way to load KML layers on Leaflet?
I have to load a KML layer on a Leaflet app. After some browsing I found a library called leaflet-kml that does this. There are two ways that I can load the KML layer: either by the KML layer's URI or ...
0
votes
0
answers
34
views
Map doesn't load after fetching current location. How can I fix?
I am building a dashboard for a potential package tracking application. I am using Leaflet and OpenStreetMap for now.
I am trying to fetch the user's current location and show it on the map. ...
- 18.9k
4
votes
1
answer
3k
views
Typescript auto generated JS file: "Uncaught TypeError: Failed to resolve module specifier"
Currently working on a Blazor project where I want advanced mapping functionality, using the Leaflet.js library with typescript bindings.
I have added leaflet and @types/leaflet as node modules for ...
- 5,643
0
votes
0
answers
27
views
what is the 'this' keyword in the .on method's callback function of leaflet library?
Im curious because the this keyword inside of JavaScript's event handler function is the element in which the .eventListener() is attached to. And the .on() method of leaflet library is similar to ....
- 21
0
votes
0
answers
33
views
How can i set tooltip text for dash-leaflet edit/draw control?
I'd like to set the draw control tooltip text in dash leaflet. The Leaflet.draw docs here, provide the following recipe:
// Set the button title text for the polygon button
L.drawLocal.draw.toolbar....
1
vote
2
answers
3k
views
Leaflet open a popup on marker click from GeoJSON layer
I have made a leaflet map.
Data is loaded using GeoJSON
on the onEachFeature event I have bound the popup with a dynamic content text taken from some property of the feature.
The problem is that with ...
1
vote
1
answer
984
views
How to fix 'TypeError: leaflet__WEBPACK_IMPORTED_MODULE_7___default.a.markerClusterGroup is not a function'
I am trying to implement marker cluster on my multiple markers but I keep getting type error.
TypeError: leaflet__WEBPACK_IMPORTED_MODULE_7___default.a.markerClusterGroup is not a function
this....
- 121
0
votes
0
answers
32
views
How to link to marker on Leaflet map from another URL
This works perfectly for activating a popup on a leaflet map on the same page:
{<a class="mplk" href="#where" onclick="t5.fire('click')">See on map</a>}.
The ...
1
vote
2
answers
269
views
angular 17+ SSR and leaflet, ngx-leaflet, ngx-leaflet-draw
recently i updated my angular aopp to the newest version of 18 to make use of the new feature introduced in angular 17 native SSR (server side rendering)
one can add SSR quickly but after adding a ...
- 751
0
votes
0
answers
38
views
How to dynamically use fallback tiles from the previous zoom level of the same server in Leaflet?
I'm working on a mapping application using React with Leaflet for tile rendering. When tiles fail to load (due to network issues, server downtime, tiles not available), I want to dynamically use ...
0
votes
1
answer
62
views
Multiple Leaflet Maps with location picker
Can you give me a solution to be able to display two location pickers using leaflet map. The code for the first map is as below. I have tried various ways to duplicate it, but it always ends with some ...
- 9,299
0
votes
2
answers
57
views
Trouble displaying a leaflet map on smaller screens in HTML/CSS layout
I'm facing an issue with my HTML/CSS layout where the map element (#map) is not displayed on smaller screens, while the map settings (map-settings) are visible. Here's a simplified version of my code:
...
- 298
2
votes
0
answers
148
views
Using Leaflet Search Plugin to Search Shapefile
I have a map that I built in CodeSandbox that loads and displays a few shapefiles. I would like to add a search bar to this map so that the names of the shapefiles are searchable. From what I gather ...
- 2,312
0
votes
0
answers
21
views
LPolyline not updating with new data with Vue 3
I am making a map application using vue 3, quasar and vue-leaflet. I have gotten the map to render and I have markers able to be rendered and update the location when new data comes in. When I try to ...
-1
votes
1
answer
54
views
Calling Function from Click Event in Leaflet
I am hoping there are some Leaflet experts here who can explain what I'm missing in the code below.
I am only a hobbyist programmer so I apologize if my terminology doesn't make complete sense.
I was ...
