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,974
questions
1
vote
0
answers
21
views
Binding multiple tooltips to a single Leaflet marker
My goal is to create a map with circle markers using the Leaflet map library and add text next to the marker.
Each marker represents a location and for each location I want to show 4 numerical values ...
- 9,174
0
votes
0
answers
12
views
min is undefined in leaflet.src.js
I'm trying to load geojson layers in leaflet map using "leaflet-vectorgrid" plugin. but when ever i hover or click over the loaded layers, we'll get the error that says "min is ...
0
votes
0
answers
50
views
Why are my leaflet points stuck to the map edge?
I try to plot transit stops on a leaflet map, indicating local clustering ("LISA"), based on Moran's I. The map is embedded in an R markdown file.
I've successfully done that with polygon ...
- 23
0
votes
2
answers
841
views
How to add Search Box (L.Control.Search) global location on Leaflet Map using Vue.Js
I have a case so I was assigned by my lecturer to create a map with leaflet.js in Vue.js framework which can show map and can search location globally and also can change the map layer with 2 map ...
- 61
1
vote
1
answer
87
views
How to set active region correctly in this Leaflet map?
I want to hightlight active region with nid=105. I did it in "color: feature.nid == 105 ? '#fa9f1a' : 'white'". But I have a problem, when I clicked to another region, region with nid=105 ...
- 10.7k
1
vote
4
answers
1k
views
How change size of Map in Leaflet v3 React (Inmutable properties)
I´ve been reading the changelog in v3 and I see several changes.
The Map component is replaced by MapContainer, behaving differently, among other things that props are immutable
I would like to create ...
- 531
0
votes
0
answers
18
views
How to properly zoom and update OpenStreetMap tiles on my JS Maps
When I launch the file everything works fine and the mouse movements are correct however the zoom is catastrophic and it does not zoom/refresh the next tiles of OpenStreetMap
class CustomMap {
...
0
votes
1
answer
17
views
React-Leaflet how to make circle change size relative to zoom
In React-Leaflet I put a L.circleMarker in some coordinate and and gave it some radius. when I zoom in the radius size shrinks, but I want it to grow bigger. for example if I drew a circle around New-...
- 57
0
votes
0
answers
10
views
RMarkdown don't plot leaflet map in Word document
I'm working on a Word document with a leaflet maps. In RStudio the leaflet maps works good, but when I Knit my Word document with Rmarkdown, no map appears in Word. I recently change my computer and ...
0
votes
0
answers
25
views
Refused to load the image because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:"
I'm building an application that uses Electron Forge, React and Leaflet to display maps. However, when adding a map to my page, the following error is displayed in the console:
Refused to load the ...
- 125k
0
votes
0
answers
11
views
show itinerary instructions (route) leaflet osmr
I'm using leaflet with osrm to create a map, at the begining it showed the instructions butand I removed it by adding .leaflet-routing-container {display: none;}, but now I got asked to show the ...
1
vote
0
answers
13
views
One Json file, 2 values to filter, followed by inclusion in the Leaflet Menu Control
I have been on Leaflet maps for a few weeks. We are switching from Google maps to Leaflet. I work with a non-profit organization providing support for citizen water quality samplers.
I do not mind ...
- 11
0
votes
0
answers
18
views
setZoom not working in Chrome but is working in other browsers
I am unable to get setZoom or any of the zoom features to work on my leaflet map in Chrome.
It works fine in Firefox and Edge but I need it to work in Chrome also and cannot find anything on this.
Any ...
- 1
0
votes
1
answer
52
views
Connecting R Leaflet to esri vector tile service
I'm building a Shiny leaflet application that I want to use a ESRI vector tile map from my organization for. I can see that leaflet connects to it as the attribution is accurate. However the tiles ...
- 2,531
0
votes
0
answers
22
views
How can i pass in coords to draw the correct shape on an IMAGE?
can I pass actual x / y cords to Leaflet.js to draw a shape? - I have tried using actual cords and the shape is nothing like I expect - also SetView cords can I pass them here too ?
Code:
var map = L....
- 16.4k
4
votes
2
answers
2k
views
Calculating Mercator d3 scaling to match Leaflet zoom level
Given a Leaflet zoom level (0..22), how would I calculate D3 scaling value for geoMercator projection? At zoom=0, the whole world fits within a single tile (256x256). In tiles, the world size is 2^...
- 51
0
votes
1
answer
35
views
WMS service basic authentication
I am building a leaflet map on a server without root access.
I'd like to add a WMS service which is secured by basic authentication(username and password).
There is a simple method in leaflet adding ...
- 9,174
0
votes
1
answer
25
views
Is it possible to count the occurrence number of a custom icon in Leaflet? If yes, how to do it?
Firstly, I'm a beginner, I've learned a lot from you.
I have 5 custom icons defined:
//Awesome icons
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: "markers-shadow.png",
...
- 9,174
6
votes
3
answers
5k
views
Coordinates of current mouse position on leaflet map with shiny
I want to access the current mouse position in a leaflet map in shiny. When using shiny you can get the current coordinates of a click event using input$MAPID_click, which contains latitude and ...
0
votes
3
answers
770
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
730
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
565
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,615
121
votes
20
answers
235k
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,615
0
votes
0
answers
47
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
19
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 ...
- 300
-1
votes
0
answers
42
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,174
0
votes
0
answers
24
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
45
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 ...
1
vote
2
answers
571
views
Typescript types when iterating layers in Leaflet
I have a Leaflet map that contains some GeoJSON layers (and other layers besides). I want to iterate over the layers to find the GeoJSON layer with a property matching some target value. The problem I ...
- 101
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
528
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
84
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
90
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 ...
- 300
0
votes
0
answers
124
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 ...
- 300
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
43
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
49k
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.6k
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
14
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
32
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
32
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
56
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,174
0
votes
0
answers
20
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
56
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,174
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 ...
- 49
0
votes
0
answers
18
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'...
- 943
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 ...
-1
votes
0
answers
14
views
Issue with TYPE react-leaflet-supercluster, SuperClustering on Leaflet Map
This is my code and im using this optional props: "radius={300} minPoints={2} maxZoom={12} extent={500}"
import { SuperClustering } from "react-leaflet-supercluster";
import "...
