Questions tagged [leaflet]
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
4,178
questions
3
votes
1
answer
79
views
Correct syntax to add WMTS to Leaflet map
Trying to show FAA sectional charts on leaflet map. The map does render in QGIS. QGIS layer properties shows:
Name: VFR_Sectional
URL: https://tiles.arcgis.com/tiles/ssFJjBXIUyZDrSYZ/arcgis/rest/...
- 33
0
votes
0
answers
40
views
Deleting segment from polygon and split it into polyline or polyline into two polylines in Leaflet? [closed]
What I'm trying to do is have a button to delete a segment from a polygon, or a segment from a polyline. I tried attaching an eventlistenner to each segments I find in the in the drawnItems. I take ...
0
votes
1
answer
42
views
Prevent antimeridian artifacts on h3 geo bins
I am drawing hex bins via h3geo on a Leaflet map and am being bitten in the behind by the antimeridian artifacts using a pretty standard approach
const map = L.map('map').setView([0,0], 2);
const ...
- 277
0
votes
0
answers
36
views
Point density at different zooms in Leaflet?
Searching for point density yields several threads on this website but none shed light on the problem I want to tackle. So, here goes…
I have a decent number of points, about ~500K, that I would like ...
- 277
0
votes
1
answer
33
views
Loading .mbtiles into Leaflet that are PBF
I'm new to the offline mapping world and have been trying to work out how to load a .mbtiles file into Leaflet, and it seems that because they're PBF (or maybe I'm lost there), it's not working. I was ...
0
votes
0
answers
46
views
Why does an error occur when using proj4 and proj4Leaflet?
I get an error when applying the coordinate system data
Error: Invalid LatLng object: (NaN, NaN)
at new D (leaflet.js:5:6566)
at i.unproject (proj4leaflet.js:46:11)
at i.pointToLatLng (...
- 21
-1
votes
0
answers
81
views
Free satellite map tile providers for Leaflet
Within my webpages (high traffic), I have been using Leaflet+ESRI to serve satellite map tiles to help users to find hotels in Asia, without any kind of charge from ESRI.
However, ESRI started to ...
- 359
0
votes
0
answers
12
views
Leaflet and utiled/single-tile WMS overlay [duplicate]
Is there a way to make a singe-tile WMS request to cover the current entire visible map portion?
I need it to avoid graphical artifact, maintaining the layer's queryable behaviour.
- 15
1
vote
0
answers
49
views
Switching the coordinate system dynamically in Leaflet
I am trying to change the coordinate system in Leaflet using proj4 and proj4leaflet.
If I execute this code
proj4.defs("EPSG:20538","+proj=utm +zone=38 +ellps=krass +towgs84=-43,-163,45,...
- 21
1
vote
1
answer
19
views
Panning and zooming map while using Leaflet Draw
The default behaviour of Leaflet Draw is to expect a single click to create vertices for lines and polygons. I find this impractical, especially for mobile devices. For example when I try to draw a ...
- 537
1
vote
1
answer
26
views
Page scrolling when using fitBounds() to change map extent in Leaflet
I am using the Leaflet fitBounds() function to reset the extent to the original zoom level. However, the map itself is contained in a DIV that is not at the top of the page. When fitBounds() ...
- 13
1
vote
0
answers
53
views
Switching the coordinate system in Leaflet
I am using Leaflet to work with the map. I have a WMS server: L.tileLayer.wms.
function setWMSLayer(theme) {
if (!theme.includes("SeaChart_")) theme = "SeaChart_" + theme;
...
- 21
1
vote
1
answer
36
views
Convert between distance values returned by distanceTo() of Point object method and distance() of map Object in Leaflet
I had tried the code pasted below using leaflet.js (latest version):
const mapObj = L.map("map", {
center: [51.505, -0.09],
zoom: 9
});
let point1 = L.point([51.505, -0.09]);
let point2 ...
- 11
2
votes
1
answer
133
views
Initializing a map container only if it is not already initialized in Leaflet
I have a very specific "Map container is already initialized" problem different from other such questions I've found in my prior search. My web page has a lot of images. If the images have a ...
- 277
2
votes
0
answers
50
views
GeoJSON is null error in a Leaflet + D3.js
I am developing a web page with Leaflet and D3.js that draws the distribution density contours of a bird species (Ciconia ciconia) with data from the Global Biodiversity Information Facility (GBIF).
I ...
- 1,152
-1
votes
1
answer
120
views
Adding secured WMS layer to Leaflet JS [closed]
I am trying to add a paid WMS layer secured by username and password to my Leaflet project. Both, the Leaflet project and the WMS server are HTTPS encrypted. What would be a proper way to do IT? I've ...
- 537
1
vote
0
answers
39
views
Leaflet Mini Map Not Displaying with Esri Basemaps [closed]
I am trying to add a mini map to my Leaflet map that uses Esri basemaps. However, the mini map is not displaying correctly. I have included the necessary libraries and followed the setup instructions, ...
- 31
1
vote
1
answer
71
views
Put added three.js object from external js module on top of base map in Leaflet
I have a leafelt map app where first I initialize and add a tile layer like so:
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/...
- 529
1
vote
1
answer
64
views
Display GeoJSON file with added properties in Leaflet
I have a Geojson file and have successfully added new properties that comes from a CSV file.
Unfortunately, I am not able to display the modified file in Leaflet. Any help is welcome!
Here's my code:
&...
- 13
0
votes
0
answers
29
views
Circle symbols are displayed incompletely in tiled WMS [duplicate]
I am setting up a MapServer WMS point layer which is symbolized as circles. When I query the layer as tiles (e.g. 256x256, using the Leaflet default), it seems that each tile only includes circles ...
-1
votes
1
answer
88
views
Leaflet map in projected coordinate system
Is there a way to show the leaflet map in a custom projected coordinated system, such as the North America Albers Equal Area Conic_1? We can do this in D3.js, but can we do it in Leaflet.js?
Something ...
- 27
1
vote
1
answer
63
views
LeafletJS: Mouse click event on a LayerGroup not working
I added a click event to a LayerGroup. But it did not work.
I am pasting code below:
const map1 = L.map("map1", {
center: [11.274, 50.765].reverse(),
zoom: 10
});
const mlyr2 = ...
- 13
0
votes
0
answers
69
views
Why NOAA layers appear to be incorrect
I had previously built a Leaflet map that pulled past precipitation data (24, 48, and 72 hours) from the NOAA nowCOAST site, however, the site was decommissioned. I used a previous StackExchange post ...
- 454
0
votes
1
answer
114
views
GeoServer non-tiled WMS with Leaflet
Are non-tiled WMS layers possible in GeoServer?
I passed tiled:False option in Leaflet but I still get tiled layer.
const prew = L.tileLayer.betterWms("http://localhost:8080/geoserver/wms", {...
- 187
0
votes
0
answers
54
views
Leaflet.js dragging is really slow in Firefox
I've made a Leaflet map for my clients using Django. The map is working great on Chromium based browsers (I've tried Google Chrome, Microsoft Edge and DuckDuckGo), but dragging around is insanely slow ...
- 81
0
votes
1
answer
67
views
PDF connected to point feature published to Leaflet with QGIS2Web
I have a PDF connected to point feature in a desktop project in QGIS and activating the Action on the point opens the PDF perfectly. I tried publishing this with QGIS2Web. The PDF is moved to the ...
- 575
1
vote
0
answers
70
views
Ipyleaflet map crashes Jupyter notebook and says out of memory
I wrote a code to show some points on ipyleaflet map that will be updated automatically.
at first, the map shows fine, but despite removing markers after a certain time (eg. 72 hours) the notebook ...
- 23
0
votes
1
answer
109
views
Leaflet markercluster: getting the zoom level at which a specific marker is no longer clustered?
I'm using Leaflet markercluster in an app. I have an endpoint where a specific marker is selected (eg. ../marker/12); so the maps centers on that marker and displays its popup when the page loads.
But ...
- 274
0
votes
1
answer
130
views
Filter GeoJSON layer dynamically in Leaflet?
I try filter layer on my Leaflet jsonp from input text html to my JS code but is not working.
On my code I tried to make filter is working only when I insert number 4 directly:
let pontoFiltrado = ...
- 13
0
votes
1
answer
94
views
Load only low resolution of polygons 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 ...
2
votes
1
answer
201
views
Simple way to put a canvas on a map using Leaflet?
In Mapbox GL JS I might do something like:
const canvas = document.createElement("canvas");
canvas.width = WIDTH;
canvas.height = HEIGHT;
map.addSource('canvas-source', {
...
- 141
0
votes
2
answers
104
views
How to offset labels in Leaflet using field-based rotation & offset?
I have a small dataset displayed as points in Leaflet. Each point has 3 arrows (right, left, head) coming out of it and they are rotated based on 3 separate fields (rhead, lhead, head). i want the ...
0
votes
1
answer
70
views
SVG arrows not behaving like the other arrows in Leaflet
I have a Leaflet web map displaying 13 points and 3 arrows diverging from each point (4 layers total). The map was exported from QGIS via QGIS2Web.
I'm using placeRotatedSymbol() to place the arrow ...
1
vote
2
answers
56
views
Error when using CRS 32718 in Leaflet
I'm trying to specify the CRS 32718 with Proj4Leaflet to a Leaflet map but I'm getting an error:
"ERROR TypeError: coordinates must be finite numbers"
My code is following:
var crs = new ...
- 135
0
votes
1
answer
62
views
Offset & anchor field-based arrow SVGs in Leaflet
I have a leaflet web map displaying 13 points and 3 arrows diverging from each point (4 layers total). The map was exported from QGIS via QGIS2Web.
all layers (including points) have exactly the same ...
1
vote
1
answer
87
views
Converting geography x, y values from vector tiles data to lat long in Leaflet
I am using the following map for India (https://data.maptiler.com/downloads/tileset/osm/asia/india/) and serving it via a server to send pbf files. The map shape is rendering correctly, and I want to ...
0
votes
0
answers
42
views
Convert default coordinate system React-Leaflet
I'm trying to make a request from the NASA satellite, but when I use 3857 it doesn't show the region I want, and in 4326 it does. That's the problem, when I use 4326 it moves on the map and I can't ...
- 1
0
votes
0
answers
117
views
How can a request be started with Leaflet Routing Machine with one waypoint?
If a round trip is compiled with the Leaflet Routing Machine and lrm-openroutservice, this is not fired as the Leaflet Routing Machine requires a start and an end point => two waypoint.
...
- 1
1
vote
1
answer
111
views
Make Leaflet geocoder search marker open popup containing GeoJSON data
The following JSFiddle uses Leaflet and leaflet geocoder control search plugin.
Code below
HTML:
<div id="map"></div>
CSS:
#map {
height: 100%;
position: ...
- 13
2
votes
1
answer
110
views
River network WMS layer not showing in Leaflet map
I am trying to display a map of European river network on a Leaflet map, using as data source the EUHydro layer published by CLMS (here is the webpage, and the WMS GetCapabilities document).
Here is ...
- 298
0
votes
1
answer
167
views
leaflet-simple-map-screenshoter cannot load custom tiles because of CORS error
If I try to make screenshots with my custom tiles, I am getting CORS errors. If I use mapbox or openstreet map tiles, I don't have any issues. I don't get any errors if custom tiles are used in ...
- 95
-1
votes
1
answer
63
views
Seeking Leaflet printing library that is flexible (not browser print)
I'm a junior developer and I've been tasked with updating the leaflet part of the website.
Do you know a good printing library where I could just export the map shown on the screen and manipulate it a ...
1
vote
1
answer
192
views
Offsetting rotated arrow SVG markers in Leaflet (exported with QGIS2Web)
I have a map exported from QGIS (3.34 Prizren) as leaflet via QGIS2Web plugin. The map has 3 layers (identical data) but 2 are displayed as arrow SVG markers and 1 is displayed as points. Left arrows ...
1
vote
0
answers
119
views
gdal2tiles-leaflet producing bad tiles
I am using gdal2tiles-leaflet in an attempt to generate a tileset for a map renderer I'm working on, however, the resulting tileset appears to be completely misaligned and won't render properly in ...
- 111
1
vote
0
answers
108
views
Rendering Performance CloudOptimizedGeotiff Band calculation
Displaying this 4 band 16int COGTIFF file size approx 4GB in leaflet via
https://cms.geo.admin.ch/Topo/umweltbeobachtung/satromocogviewer.html?url=https://data.geo.admin.ch/ch.swisstopo.swisseo_s2-...
- 97
2
votes
1
answer
144
views
How do I modify S57 data converted using ogr2ogr so that it correctly exports on qgis2web?
I have some unencrypted ENC charts with file extension .000 (S57 data). Using the process and S52 styles at https://www.sigterritoires.fr/index.php/affichage-des-cartes-marines-s57-dans-qgis/ I have ...
- 23
2
votes
2
answers
568
views
Customizing layer control with CSS classes in Folium Leaflet?
I am working with creating a folium map within streamlit. I like the ControlLayer() functionality that folium provides, but I would like to be able to customize it a bit more. I found this comment ...
- 1,380
1
vote
1
answer
114
views
Map moves every time a marker is added in ipyleaflet
I am trying to create a map that is updated continuously with received data and I have a problem. the map moves every time a new marker is added and it is making it useless as it should be zoomed to ...
- 23
1
vote
1
answer
108
views
Showing there are multiple features with the same point location using Leaflet while maintaining ability to filter data
I have a dataset of training sessions provided at various sites in Greater Manchester. The training sessions have different names, but in many cases, the sites may be the same. Here is a short example ...
- 11
3
votes
1
answer
128
views
Leaflet offset of tiled layer WMTS layer
Adding in Leaflet a WMTS layer with the 'L.tileLayer' to a COG Tiff results in an offset. Both services are in the same EPSG:2056 system
This code
<html>
<head>
!-- Version 2.0 --> &...
- 97