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,875
questions
1
vote
3
answers
1k
views
Export Leaflet Map as JPG in typescript angular 4
I'm making an Angular4 app with leaflet maps and I need to export the current view of a map in one JPG image.
Something like taking a screen shot but just the map with markers and polylines.
So, ...
- 11
0
votes
0
answers
34
views
Dealing with leaflet's lack of promises
I'm using the leaflet CDN script in a server-rendered app. The library's methods do not involve promises, so I often get weird UI glitches.
For example, when I use setView() it returns immediately; ...
- 17.8k
0
votes
0
answers
60
views
"Could not found module 'react-leaflet' "
I'm using react leaflet in React Native. It was working fine in older versions of expo and react native. But I had to update my packages due to some reason. Now I'm getting the error "could not ...
0
votes
1
answer
30
views
How to use Fancybox 5 to show a photo when clicking a Leaflet marker - and group them with all other photos
I have this piece of code to open a photo when marker is clicked on Leaflet-map. And it works fine.
function onMouseFancybox(feature, layer)
{
foto="images/" + feature.properties['uuid'] ...
- 8,739
6
votes
3
answers
2k
views
JavaScript - How to draw black outline (or stroke) for a red line - leaflet mapbox
I try to figure out how to draw linestring with fillcolor: red and outline: black. Like the following image:
style = {
fillColor: 'rgb(255,0,0)',
outline: 'rgb(0,0,0)'
weight: ...
- 608
3
votes
1
answer
157
views
Implementing a Creeping Line Ahead (CLA) to Tasking Area Search Pattern Transition in Leaflet.js
I have a requirement to draw a Creeping Line Ahead (CLA) pattern using Leaflet.js over a tasking area (squares, rectangles, and generic polygons). The CLA pattern includes parallel lines with shorter ...
- 6,125
0
votes
2
answers
5k
views
Uncaught TypeError: L.geoJson.ajax is not a function Leaflet.js Heatmap.js
Hello I'm facing this error that l.geoJson.ajax is not a function. I can't understand why I am facing this error. I read somewhere that we have to place leaflet.ajax.min.js file in the root directory ...
- 9,529
0
votes
2
answers
572
views
Dash leaflet not rendering when inside a Bootstrap tab container
I am trying to create a simple Dash application that includes Dash-Leaflet so that it plots some points as markers. It is apparently working as expected when no styles are applied. But I would like to ...
- 1
0
votes
0
answers
34
views
how to apply custom sld to wms layer in layer call(sld_body parameter).I tried but defaullt style only applied not the style i send through sld_body
const sld = ` <StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis....
- 18.9k
0
votes
1
answer
31
views
Load low resolution version of polygon in lower zoom level, in leaflet
Leaflet uses the principle of loading map tiles according to the zoom level, that is, the resolution of the map image depends on the zoom level. Can we apply the same principle to a polygon?
My ...
- 15.7k
0
votes
0
answers
68
views
Leaflet map included in an html exported from Obsidian.md only shows up after page reload / refresh
My goal:
I exported some html notes from Obsidian.md (based on this: https://github.com/KosmosisDire/obsidian-webpage-export) and am now trying to include an interactive (fictional) worldmap based on ...
- 1
0
votes
0
answers
70
views
Breaks in addLegend leaflet
I am struggling to add custom breaks to addLegend in leaflet. I want the values to range from -1 to 1, with breaks at every 0.5. I've tried the bins argument, but it is not accepting my numeric vector ...
2
votes
4
answers
3k
views
Map is not visible at initialization using react-leaflet
I have this react component:
import React, { Fragment } from 'react';
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
const ...
0
votes
0
answers
24
views
Can I load basemap without center or set view in map initialization
I have the center coming from a different layer, however, that layer is loading slowly so initially you see a blank map container.so, I want the basemap to be visible.
view.map = L.map('map_' + mapId, ...
- 28.9k
0
votes
3
answers
166
views
Smooth scroll with react-leaflet
I'm trying to create a smooth zoom in my react-leaflet project.
I know that this is doable with vanilla leaflet as said in this post, with smoothWheelZoom, but knowing that vanilla leaflet does not ...
- 608
1
vote
1
answer
96
views
How to place Leaflet (timeline) control across the bottom below attribution control (like MerrySky)
MerrySky has a timeline control at the very bottom of its Leaflet map. When the map is expanded to full-screen, the timeline is included. How do I make a similar Leaflet control? (Similar size/...
- 17.5k
0
votes
3
answers
1k
views
How can I dynamically resize a leaflet map after clicking a button?
I have a leaflet map contained in <div id="map" data-tap-disabled="false" style="width: 100%; height: 100%;"></div>
This page is divided into <ion-header&...
- 4,210
17
votes
7
answers
37k
views
Stop propagation of 'click' event in Leaflet
In one of our projects we're using Leaflet along with Leaflet.markercluster plugin. Looking through the Leaflet's sources I found that it appends _collapse() function to the map's click event, so ...
- 15.7k
0
votes
0
answers
36
views
Geoserver configuration
i hope that you are feeling well.
i am writing to ask for hellp
First i want to tell you what it happened,
i installed geoserver on my VPS was easly and it work,
but the problem is, when i publish my ...
- 33
4
votes
1
answer
2k
views
Leaflet popup does not open on the second click on the marker
I am using leaflet.js to display markers on a OSM map.
The problem is, that the first time a marker is clicked, the popup opens normally, but on a second click on the same marker the popup does not ...
- 918
0
votes
0
answers
33
views
Unable to override a leaflet method with include() method
I can't overload the following function of the leaflet BoxZoom class using include() method. I need to catch a key press while dragging. If I put a breakpoint in my code no stop happens. It seems the ...
- 1
0
votes
0
answers
74
views
Leaflet Map Rendering Issue with Large Non-Geographical Map
I’m currently developing a non-geographical map for my website using React, tailwindCSS and react-leaflet. The map is square-shaped and quite large, with each side measuring 10 million pixels. The ...
4
votes
1
answer
1k
views
"Property 'heatLayer' does not exist on type [Leaflet]" on --prod build
I'm trying to build my angular 9 project, using leaflet's heat map library.
when compiling it works great, but when I try to --prod build it, I get the following error:
ERROR in heat-map-map....
1
vote
1
answer
169
views
Map container already initialized in LeafletJS when using printThis
I'm using printThis to print a bunch of elements from a page in an application.
I'm encountering the following error:
leaflet.js:5 Uncaught Error: Map container is already initialized.
at e....
2
votes
2
answers
885
views
React-leaflet + leaflet.elevation usage
I'm posting to see if anyone can give me some light on this 'problem/issue'.
I'm using react-leaflet and also leaflet-elevation, a 'plug-in' that creates an elevation graph and also adds some extra ...
- 1
0
votes
0
answers
40
views
How can I import a .js file from an external server into index.html on GitHub?
I have a HTML + JS website hosted on github. This website plots data from a .js file. A team member should be able to overwrite this file from time to time, without having acess to the website scripts....
- 80
0
votes
0
answers
81
views
Rollup failed to resolve import "Leaflet"
Please help me, I use this plugin in my new Vue 3 + TS project https://github.com/nypl-spacetime/Leaflet.GeotagPhoto
I previously used this plugin on vanilla JS + Laravel here ( https://github.com/...
3
votes
2
answers
16k
views
How to add satellite view in leaflet?
In my web application, I'm using leaflet and I want to change layer of leaflet to satellite view and other map views using layer switch. How can I perform this.Please help!
- 15.7k
2
votes
1
answer
7k
views
leaflet map: update marker using navigator.geolocation.watchPosition?
I'm trying to use a leaflet map to show the current position of the user on the map. Something like a live GPS tracking.
This is my current code:
var watchID;
var geoLoc;
...
- 166
0
votes
1
answer
105
views
react-leaflet-heatmap-layer-v3 src directory not found
Trying to use the npm library react-leaflet-heatmap-layer-v3 and after I install it successfully and then yarn start my react typescript app, I get the following warning messages:
WARNING in ./...
- 809
3
votes
2
answers
5k
views
I´m stucked creating a new Leaflet custom control
I´ve read the Leaflet doc and some online tutorials but nothing works for me.
I´m looking to add a new single button under the Leaflet zoom control (topleft) but can´t find the way to add it.
I´ve ...
- 4,247
1
vote
3
answers
2k
views
Leaflet map breaks after flyTo if zoom in is called
As the title states, I have a Leaflet (version 1.02) map that breaks if I try to zoom in after calling a flyTo() action. Oddly, if I zoom out first, I can then zoom freely, in or out without the map ...
- 35
0
votes
1
answer
44
views
Map Automatically pans away when using Measurement Plugin with Leaflet JS
I am trying to add Measurement Controls to my Leaflet Maps. For addressing the issue, I tried it on simplest map.
I created a simple map with Leaflet and added the Measurement Plugin. Now the problem ...
15
votes
4
answers
11k
views
Leaflet React get map instance in functional component
I want to have a button outside the map that changes the view to another coordinates.
Is there any way to get mapContainer instance to call their functions? Or how can I implement that function?
I ...
- 64
2
votes
0
answers
217
views
modify icon size using iconCreateFunction in leaflet for R
Using the quakes data as an example and the code below, I wish to modify the icon size.
I need to keep the rest of the code as unchanged as possible, I just want to make the icons smaller.
Can anyone ...
- 23
2
votes
1
answer
657
views
Render a GeoTIFF file in Leaflet
I am creating a webmap using leaflet and I need to display tif raster images. I consulted all the types of methods to display these data; however, I do not understand so much, so I am having some ...
- 15.7k
0
votes
0
answers
24
views
React with Leaflet: issue color coding map based on country specific data
Essentially, I would like to be able to click a country and see it's trade partners highlighted on the map. I know that I am reading the data corrrectly from the ISO3, and I am able to print it, I ...
- 1
0
votes
1
answer
66
views
Window not defined on build NextJS
I am getting a window not defined error? I do not call window or document anywhere in the code and it works fine in development just errors on build.
ReferenceError: window is not defined
at C:\...
- 788
-1
votes
1
answer
36
views
React re-renders everything
I have an array of markers on a map using leaflet. I want to be able to remove one of the markers, however when I update the array of markers, it re-renders ALL of the markers in the array as you ...
- 732
0
votes
1
answer
107
views
Getting the clicked marker in react leaflet
So I have my leaflet map in my react project, I have markers on this map and I want to get the marker clicked. I want to show this markers popUp info on a side panel. How would I get the marker ...
0
votes
0
answers
82
views
How to manage rendering 30000 polygons on map using react-leaflet?
Im using react-leaflet to render heatmap using big amount of polygons that I get from database. Polygons are preconfigured and I don't perform any actions on them. My issue is that when user wants to ...
5
votes
1
answer
14k
views
Navbar fixed left - Bootstrap
I am trying to make navbar in bootstrap to be fixed left, like on this link.
Anyway, it is working, but when I add block content of the leaflet map, my navbar is still there, but I can't click on it. ...
CommunityBot
- 1
1
vote
0
answers
49
views
Create watermark in react-leaflet
The error Cannot read properties of undefined (reading 'Control') is thrown, where do I find the necessary imports? I've tried the answers from this post as well as the official documentation but I ...
- 194
4
votes
2
answers
3k
views
trying leaflet tutorial I get a broken map
I have followed leaflet "get started" tutorial
but my map looks broken and the polygons are not on the map like in the example:
example:
my map html:
my html
<html>
<head>
&...
2
votes
0
answers
498
views
Time series chloropleth in R Shiny / Leaflet
How do you animate a choropleth in RShiny over time using leaflet? I would like to animate the color of choropleths over time in Shiny according to their numeric value.
Below is what I have tried, but ...
- 624
0
votes
1
answer
60
views
Trouble loading markers inside a polygon using Leaflet.js, FreeDraw, and Laravel
I use Leaflet.js, FreeDraw, and Laravel to create a real estate system. The functionality I am trying to set up is that when the user draws a polygon on the map, it should trigger an API call and only ...
0
votes
0
answers
21
views
How to make two leaflet chloropleth maps appear on the same page
I am trying to place two leaflet chloropleth maps on the same HTML page.
Both of the maps work fine on separate pages, but when I put them on the same HTML page, they look fine at first, but when I ...
2
votes
1
answer
216
views
Leaflet custom marker(divIcon) html/css does not apply
I'm currently attempting to customize the leaflet marker using a divIcon and custom html.
The goal is to display my marker similar to this:
I am able to create a marker and a divIcon with the ...
- 219
0
votes
0
answers
25
views
Markers are not showing up on Leaflet map when I embed it in squarespace website
I made a leaflet map for work and uploaded it to our website. The markers are all defaulting to the "error" replacement marker that leaflet puts in when you direct it to an image file that ...
0
votes
0
answers
63
views
Leaflet - Create circles with numbers in the center that will be proportional to the boundaries in which the addresses are located
I've placed a marker on the map for each address, but it's messy, and my goal is to create a circle for each city. Inside each circle, I want to display the number of addresses located in that city, ...
- 5