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.
13,885
questions
0
votes
0
answers
23
views
change marker color based on properties
This is my first time here on stackoverflow. I have a doubt. I marked some markers on my map (I used OpenStreetMap). On each marker I put a drop-down menu with choices. Based on these choices, the ...
0
votes
0
answers
15
views
How can I fetch data from the tooltip of an interactive mapping application based on leaflet.css using Playwright with Python? [closed]
Goal:
The goal is to write automation code that will log in to the platform, then hover over each country one by one, fetch the data from its tooltip, and store it in a file. Later, this data will be ...
0
votes
0
answers
10
views
Create an interactive Photomap with leaflet, JS. Trying to figure out how to size the photo to fit the state borders
Hello I am working on my first frontend JS leaflet project trying to make an interactive PhotoMap using pictures I personally took that I want to display on the map. I created clipped arts of all the ...
0
votes
0
answers
17
views
Unable to add marker in leaflet generated map
Firstofall, thank you in advance for your help.
For the final project of my studies, I'm building a geolocation app.
I've problems with my js map object. I'm trying to generate markers on a map when a ...
0
votes
0
answers
21
views
Problem displaying tiles with Leaflet under Angular 16 when enlarging the map
I'm having a problem with Leaflet integration in my Angular 16 project. When I enlarge the size of the map, it seems that the tiles in the new part of the map don't load correctly.
Here is an extract ...
0
votes
0
answers
26
views
Why _onCreate function doesn't use correctly states?
The state stores the name and colour to be added to the object when creating a new shape. (This object will then be sent to the server).
So, when I create a modal window and throw new values from ...
0
votes
0
answers
19
views
Create a wider selection area to select the lines on react-leaflet map
Having difficulty in selecting the lines on react-leaflet map, so I have followed the below solutions,
https://gis.stackexchange.com/questions/466747/create-wider-selection-area-to-select-lines-on-...
0
votes
0
answers
32
views
Why map leaflet js crashed?
I used map leaflet in angular, before this i used map in other component dont have any problem. but at other component, i got problem, the map crashed/broken, every image from the map is not ...
0
votes
0
answers
19
views
Integrating Leaflet Map with City Information in app.json
I'm trying to add Leaflet to my app.json. When the user types 'Rotterdam,' it should display information about the city, which is working. However, I also have coordinates, and when the user types '...
0
votes
0
answers
24
views
How to create crs for leaflet using pro4js
I am a newbie to leaflet, and need an crs function sample to create an system that
can change the coordinate system from EPSG:3857 to EPSG:3826.
The basic library for coordinate I hope to use is ...
0
votes
0
answers
10
views
leaflet iimage map find center of random iamges
I use a method to create a leaflet map with images. I want these images to fit correct to the map. How can i do that?
Images have different sizes
getImageMap(backgroundUrl: string) {
let map = ...
0
votes
0
answers
9
views
Gazetteer Dropdown Selection not Displaying Any Data
Recently my Leaflet-based Gazetteer project has ceased working. There seems to be a disconnect from my PHP calling the data for the dropdown list and my map.
Since no dropdowns are selectable this ...
0
votes
0
answers
40
views
+50
Disabling leaflet geoman for certian layers doesn't work
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 arrowheads, but for some ...
0
votes
0
answers
15
views
how to extract specific data from a leaflet variable/array
I have a variable created in leaflet and I need to extract a part of inside data that are gps coordinates, in order to use separately
This is my var and how it is generatared
var track = new L.GPX('...
0
votes
0
answers
6
views
what is the usage of transform in source code of proj4leaflet.js
I am a newbie to leaflet.js, and recently, I need to create a CRS in leaflet for coordinate
system change. The transformation library I used is proj4leaflet.js. And the problem is when
I read the ...
0
votes
1
answer
15
views
Leaflet map is blurred or some parts are missing when printing the page to PDF in Firefox
When using Firefox "Save to PDF" or "Microsoft print to PDF" features, a leaflet map that is displaying fine in the browser will be blurred or have some parts missing in the ...
0
votes
0
answers
12
views
does esri leaflet has option like crossOrigin
I meet a Content Security Policy problem when using esri-leaflet to parse the ArcGIS mapserver to tileLayer,
the code snippet I used is as following:
L.esri.dynamicMapLayer({
url: 'https://...
0
votes
1
answer
18
views
customized marker for leaflet locate control plugin does'nt appear
I created a customized marker for leaflet locate control and inserted it with this code
/*button to turn on GPS*/
//function from leaflet locate control (plugin)
L.Control....
0
votes
0
answers
20
views
Leaflet antpath error "Property 'antPath' does not exist on type"
I am doing a leaflet demo with angular 16. I have installed the leaflet package and it works perfectly but I can do the antpath polyline (The polyline works fine tho).
Steps I've done:
• npm install ...
0
votes
1
answer
35
views
Set Leaflet marker to always stay in the middle of the map
I'm working on a SvelteKit project where we're moving from Google Maps to Open Street Maps using Leaflet.js. With Google Maps we have a marker that always stays in the center of the map even when ...
0
votes
1
answer
20
views
R Markdown flexdashboard shiny leaflet app
I'm trying to create an interactive leaflet map dashboard using R markdown and shiny runtime. I need to select multiple values from two fields based on which my map will draw. This works so far, but I ...
1
vote
1
answer
62
views
STContains, STIntersects and STWithin return wrong result for geography
I'm using SQL server to store customers location info (longitude and latitude) and using leaflet to show them on map. And also I'm using leaflet for drawing polygon to draw city areas, I store ...
0
votes
0
answers
24
views
Property 'fitBounds' does not exist on type 'Map | LayerGroup<any>'
I am converting some old (working) javascript (that uses Leaflet) into Typescript. One line that won't compile is map.fitBounds(bounds) :
var map: Map | LayerGroup<any> | null = null;
map = L....
0
votes
0
answers
9
views
Shiny App with leaflet map runs well in Rstudio but when I try to deploy it in shinyapps.io, it deploys but then I just get an error message
Below is some sample code for a shiny app I am trying to deploy on shinyapps.io. Whilst it runs just fine in Rstudio, when I deploy it it deploys but then just shows an error message on the browser ...
1
vote
0
answers
21
views
Cannot retrieve the altitude using leaflet map and JavaScript
Using Leaflet map I retrieve the altitude basing on coordinates, then I need to fill both input fields (coordinates, altitude). I can retrieve the coordinates without problem but the I can't retrieve ...
0
votes
0
answers
14
views
Leaflet in Jupyter notebook is breaking on a Javascript error
I'm trying to run this segment-geospatial model using the test script the developers wrote on their GitHub. The strange thing is, this worked yesterday, produced a map, and now when I try today, I ...
0
votes
1
answer
42
views
Problem making a clickable polygon to open a box in a webmap
I'm new to JavaScript and Leaflet. I tried to add a polygon on a map & make a text box appear when the polygon is clicked.
I think my code is fine, and a cursor appears when you scroll over the ...
0
votes
1
answer
23
views
Vue3 and leaflet implementation, problem with the render first time
I am using Leaflet in a vue3 application with a single file component. Problem experimented is, map is rendered correctly except icons and props value in the legend the first time or after refresh. If ...
0
votes
1
answer
24
views
Can't typify mapRef.current
So I have this react component with leaflet map and TypeScript warns me on line mapRef.current.setView(coords, 13) that this is "unsafe call of an any typed value"
import 'leaflet/dist/...
0
votes
1
answer
52
views
Renderer is not working in PathOptions for the Polyline in react-leaflet
I'm trying to add renderer property to PathOptions for drawing the Polyline and here is the code for it:
const canvasRenderer = L.canvas({
tolerance: 5,
});
<Polyline
...
0
votes
1
answer
18
views
How to drag a polygon when dragging a marker inside of it?
I have a map with polygons and markers, and a sidebar with tools buttons (like in this demo : https://geoman.io/demo). My markers are linked to my polygons in my database and if I use the 'Drag layers'...
0
votes
0
answers
11
views
filtering Geojson data using select option with leaflet
This is what I could do for the select
What I want to do is to dynamically filter the marker on the select.
<script>
$('#ProvEd').on('change', function() {
var Prov_id = this.value;
...
0
votes
1
answer
25
views
React leaflet polygon has border stroke when clicking on it (in Chrome)
I have a new problem with react leaflet
this problem appeared suddenly.
I don't know what happened and this stroke suddenly appeared around of polygon just in chrome browser when clicking on polygon.
...
0
votes
0
answers
11
views
Leaflet custom marker position on the map is changing
I'm using Leaflet with custom markers. It seems that when I add a marker the top left corner is the location saved, and the icon is presented with the top left corner as the anchor. The result is that ...
0
votes
0
answers
42
views
How to Fix Polygon Stretching Error in React Leaflet Map
I am working on a project where I am using the react-leaflet package to display a series of polygons on a map, based on data fetched from an external API. I am experiencing an issue where some ...
-1
votes
0
answers
14
views
Making a web map with leaflet plugin. Why cant I get a text box to display when certain coordinates are clicked?
Im trying to make a web map, and I want a box to pop up when a certain spot on the map is clicked. I think my code is fine & when i click the location, i recieve a 'Click event fired!' in the ...
0
votes
0
answers
12
views
How to rotate folium CustomIcon?
I have dataframe, it have name,latitudedes,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 ...
0
votes
0
answers
28
views
How to create leaflet map showing only city names and using OpenStreetMap
I am new to leaflet map and I want to create a leaflet map that does not display any landmarks or labels like hospitals, hotels, etc. and the map should display city names. Also I want the ...
1
vote
0
answers
25
views
Leaflet SVG overlay - make paths interactive
Is there any solution to make an svg path element which is loaded as an overlay on a leaflet map interactive? I want to change the color of the path on mouseover.
my suggestion was to try it with this ...
0
votes
0
answers
30
views
leaflet.js - spaces between tiles, blurred map
I use the map display using a class, in html I initialize the map. the size of the parent div is set to max using css. When first viewed, the map is displayed with gaps between the tiles and sharp, ...
0
votes
1
answer
44
views
Add a title to the Leaflet map
I have a simple question but still do not know how to find the answer to it. All I need is to add a title to the leaflet map. I do not need it to me on the map, just above it as in a usual ggplot map.
...
0
votes
0
answers
15
views
Mounting custom vue component as a tooltip/popup on leaflet on each geojson object
I would like to mount my custom MapDeparturePin component to leaflet map. Circle Markers created by L.geoJSON method and I tried to bind popupInstance to each generated marker. Here is the code:
...
0
votes
0
answers
34
views
Leaflet Heatmap is rendering only what is on screen, if I drag the map it will re-render after releasing the mouse
So basically I understand that the heatmap is rendering only what is beeing showed on screen. I wanted it to render more than what's on screen so that this problem woundn't happen. I have already ...
0
votes
0
answers
9
views
How can I use maxNativeZoom with Leaflet.VectorGrid?
I have a tile set that is defined for zoom levels 0-2, but I want it to continue to show beyond a zoom level of 2. I believe this is done using maxNativeZoom however this setting doesnt seem to work, ...
0
votes
2
answers
32
views
How to implement Javascript Leaflet demo code to show a simple map and point? (blank page returned)
I try to just imitate the simplest example code of Leaflet (https://leafletjs.com/index.html) as follows. But somehow I only got the blank page. Can somebody spot what is wrong? Many thanks!
<html&...
0
votes
1
answer
59
views
How to create a dynamic folium marker
Please I need help with folium and flask. I am building a satellite tracking web app that uses an api from n2yo.com(https://www.n2yo.com/api/) to get it's data. It asks for the Norad id and period of ...
0
votes
0
answers
14
views
Title: Leaflet Map Zooming Beyond World Map Boundaries When Zoomed Out [duplicate]
Actual Behavior : Getting gray color when zoom-out map, its going beyond the world map.
Used Below Config Set-Up:
const tileLayer = new TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {...
-1
votes
0
answers
25
views
LEAFLET.JS - Load Multiple Markers From Multiple Tables in MySQL
Here is my PHP Code
<?php
**// LOAD COORDINATES OF DATA_GARDU**
$sql=mysql_query("SELECT * FROM `gardu`");
while($row=mysql_fetch_array($sql)){
$gardu=$row['GARDU'];
...
-1
votes
0
answers
29
views
Load Multiple Markers From Two Different Tables in MySQL - LEAFLET.JS
This is my code and my problem
<?php
$sql=mysql_query("SELECT * FROM `gardu`");
while($row=mysql_fetch_array($sql)){
$gardu=$row['GARDU'];
$ulp=$row['...
0
votes
1
answer
35
views
React Leaflet Google Map Partial and Incomplete [duplicate]
I'm trying to learn something and develop a google map project with react-leaflet using JavaScript. I've made a simple React app and implemented the simple google map layer. Maps however are only ...