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,862
questions
0
votes
0
answers
5
views
Is there a way to have leaflet map dynamically change to the size of the viewable tab
I am trying to create code that a map is loaded full screen and fills the whole screen with a white border on the outside and has no overlap, I searched google and I could find anything on the ...
0
votes
0
answers
18
views
Is there a method to validate in laravel backend that a newly drawn polygon with leaflet maps doesn't intersect with a previously saved polygon?
I am using leaflet maps to draw polygons , I save only one polygon each time , coordinates data are saved in mongodb , here is how one saved polygon data looks like in database:
{
"_id": {
...
0
votes
1
answer
33
views
how do i get different map types on flutter
I am using fluttermaps to get the basic osm(open street map)layer to appear. it works but I am trying to add more options. Does anyone have any tips on where to go.
I have this so far and its working ...
0
votes
0
answers
18
views
How to maintain area of leaflet map visible as visible container area changes?
I have a leaflet map I am displaying. At some point I know the latlngbounds of the visible area of the map in the map container.
If the user resizes the container I want to pan/zoom so that that area ...
0
votes
0
answers
10
views
Custom TileLayer Map - Leaflet React
I'm using Leaflet React, and my question is this.
How can I make sure that my TileLayer is not limited to -180/180 in X and Y?
For example, I have some rectangular maps, and some square ones. For the ...
0
votes
0
answers
26
views
Improving Polyline Accuracy and Display in Blazor WebAssembly with Leaflet.js Using MAUI-Captured Data
I'm developing a user tracking application using MAUI for capturing latitude and longitude data. This data is then displayed as a polyline using Leaflet.js in a Blazor WebAssembly application. However,...
0
votes
1
answer
47
views
How can I establish attribution control on click event with Leaflet?
I have a Leaflet map with 2 layers. I would like to be able to trigger an action on $('.attributionLink').click(), but the click only registers when layer1 (default) is active. After changing active ...
0
votes
0
answers
25
views
Leaflet : how to force using a specific tile server when zooming on known locations?
I'm using leaflet for displaying some maps.
I know that my users will zoom in for some location.
As you know, tiles are realtime calculated if zoom is high.
I want to store pre calculated zoomed tiles ...
1
vote
1
answer
24
views
Object created by L.GPX doesn't play nice with LayerGroups in Leaflet
I'm trying to make a layer control where I have two base layers and a bunch of imported GPX files. Here I first create my base layers, and just add them to a group.
var Stadia_Outdoors = L....
1
vote
1
answer
36
views
Leafletjs map disappears after Livewire component refresh
I have a Livewire component and inside it there is a leaflet js map. It works fine until there is a validation error or component refresh happens. When that occurs, the map disappears from the page.
...
0
votes
0
answers
32
views
Leaflet Map Tiles Disoriented When Deployed on EC2 Instance
I'm encountering an issue with Leaflet map tiles appearing disoriented when I deploy my application on an EC2 instance. The tiles load correctly when I run the app locally, but once it's deployed to ...
0
votes
0
answers
17
views
Removing diamond-like empty shapes from Leaflet (base)maps
Dears,
I am trying to find why I have the diamond-like empty spaces in my leaflet basemaps. Does anybody knows how to get rid of them? I am adding the screenshot here.
I was trying also to set ...
1
vote
1
answer
42
views
Get Coords from LeafletMouseEvent
I am trying to get coords from a leaflet map. I tried using e.latlng but it only returns the coords i initialized the map with. Not sure what's not working honestly.
Here is my code:
private map: L....
0
votes
0
answers
22
views
Leaflet map with Flutter, filled polygon
I am trying to display a filled polygon.
The polygon draws, but does not fill.
This is my widget code, and from I have read, the color property should fill the polygon, but it doesn't.
import 'package:...
0
votes
0
answers
44
views
Performance Issue with Polyline Rendering on React Leaflet Map
I am experiencing a performance issue with the polyline component of the Leaflet map library in React.js. I have a large dataset of traffic congestion data (approximately 5,000 to 10,000 polylines) ...
-2
votes
0
answers
41
views
Use Google Bicycle Layer in Leaflet [closed]
I have an existing website that uses leaflet extensively.
I'm looking for a way to include the google bicycling layer in the map, but haven't found a way to do so.
I tried the code from the bicycle ...
0
votes
0
answers
15
views
error when trying to display a multipolygon in react with leaflet
I have the following function
// Función para unir los polígonos superpuestos
export const unifyPolygons = (zones: Zone[]) => {
const turfPolygons = zones.map(zone =>
turf.polygon([zone....
1
vote
0
answers
36
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 ...
0
votes
0
answers
18
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
24
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
42
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-...
0
votes
0
answers
36
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 ...
0
votes
0
answers
15
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
16
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 ...
0
votes
0
answers
23
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....
0
votes
1
answer
69
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 ...
0
votes
0
answers
55
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 ...
0
votes
0
answers
22
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 ...
0
votes
1
answer
51
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 ...
0
votes
1
answer
31
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",
...
0
votes
0
answers
56
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 ...
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. ...
-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']...
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
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 ...
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
51
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 ...
0
votes
0
answers
17
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":[
{
...
0
votes
0
answers
38
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 ...
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 ...
0
votes
2
answers
58
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 ...
0
votes
0
answers
20
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 ...
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, ...
0
votes
0
answers
43
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
},
...
0
votes
0
answers
36
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 ...
2
votes
2
answers
121
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 ...
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. ...
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 ....
0
votes
0
answers
29
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....
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 ...