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.

Filter by
Sorted by
Tagged with
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 ...
Anthony's user avatar
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 ...
Mujtaba's user avatar
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 ...
Parker Thomson's user avatar
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 ...
Panoo's user avatar
  • 5
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 ...
Dan's user avatar
  • 13
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 ...
Tomorrow's user avatar
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-...
Kishor's user avatar
  • 200
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 ...
natasha adams's user avatar
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 '...
B.Simsek's user avatar
  • 1,208
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 ...
abramhum's user avatar
  • 443
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 = ...
lebanta's user avatar
  • 13
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 ...
WIzardMerlin's user avatar
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 ...
Matt's user avatar
  • 8,203
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('...
luca_papi's user avatar
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 ...
abramhum's user avatar
  • 443
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 ...
Bashen's user avatar
  • 1
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://...
abramhum's user avatar
  • 443
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....
astaga's user avatar
  • 75
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 ...
Nhut Truong's user avatar
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 ...
TheGreatZackAttack's user avatar
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 ...
jaykay's user avatar
  • 73
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 ...
Behnam Faghih's user avatar
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....
quilkin's user avatar
  • 904
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 ...
Dorian von Freyhold's user avatar
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 ...
LittleDuck's user avatar
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 ...
jschen587's user avatar
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 ...
jaymesmc's user avatar
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 ...
inane's user avatar
  • 628
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/...
EgorPestov's user avatar
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 ...
Kishor's user avatar
  • 200
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'...
FE-P's user avatar
  • 79
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; ...
wams's user avatar
  • 1
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. ...
Muhammad Habibpour's user avatar
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 ...
Doron Goldberg's user avatar
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 ...
bhamam's user avatar
  • 13
-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 ...
jaymesmc's user avatar
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 ...
heshjse's user avatar
  • 880
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 ...
Aditya28's user avatar
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 ...
CodingBox's user avatar
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, ...
L. Pospisil's user avatar
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. ...
Полина Ермолаева's user avatar
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: ...
basarozcan's user avatar
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 ...
Felipe Castro's user avatar
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, ...
Tom McLean's user avatar
  • 5,561
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&...
user7665853's user avatar
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 ...
Alabi Oluwabusayo Joseph's user avatar
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', {...
Srikanth Sangana's user avatar
-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']; ...
Aldi Erzanuari's user avatar
-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['...
Aldi Erzanuari's user avatar
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 ...
Raw Anger's user avatar

1
2 3 4 5
278