Questions tagged [leaflet]
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
4,177
questions
0
votes
1
answer
39
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
1
vote
1
answer
423
views
How to make legend have no number overlap in Leaflet
I'd like my legend to go from 0-25 to 26-50 to 51-75 rather than what it is in the screenshot included.
How should I go about doing that?
function getColor(d) {
return d >= 75
? "#...
CommunityBot
- 1
1
vote
1
answer
477
views
Leaflet styling geoJSON object radius by its feature property
I am trying to style geoJSON objects by its feature properties (Capacity). I tried 2 ways:
1:
function getWidth(Capacity) {
return Capacity >= 40 ? 12 :
Capacity >= 30 ? 8 :
...
CommunityBot
- 1
2
votes
1
answer
766
views
Leaflet control search clash with map.on zoomend function
I would like to know how to solve the clash between Leaflet control plugin and map.on zoomend function
The problem is related to this query:
Displaying selected layers depending on zoom in Leaflet
...
CommunityBot
- 1
1
vote
1
answer
239
views
Query GeoServer WFS layer attributes with form
How can I set up a form in HTML to query the attributes in my GeoServer WFS layer? I assume it has something to do with the action attribute but I'm not sure how it will work. Something like <form ...
CommunityBot
- 1
2
votes
1
answer
644
views
Change Ordering of features within one layer in leaflet
My Question is exactly the same as mentioned in this Question
The main difference is that I can't use bringToFront() because I have points inside the highlighted polygon that I want to show a tooltip ...
CommunityBot
- 1
0
votes
0
answers
17
views
ZoomLevel different meters ( bounds ) in some places in LeafletMaps [closed]
Currently, I'm using LeafletJS with Leaflet.markersCluster. I have implemented whenever map.getZoom() === 19, I will show a marker instead of the cluster icon.
I have tested this in many places but ...
- 20.2k
0
votes
1
answer
535
views
Leaflet map not showing labels from GeoServer
I am trying to develop a map with Leaflet 1.9.3 and GeoServer 2.22.0. When I preview the GeoServer layer, the labels appears at all zoom levels as expected. But when its added to a Leaflet map, I ...
CommunityBot
- 1
0
votes
0
answers
35
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 ...
- 26.5k
2
votes
1
answer
182
views
CRS.Simple coordinates from SVG for GeoJSON in Leaflet
I am working with CRS.Simple in Leafleat. The y-coordinates from the SVG don't match what I'm supposed to use in GeoJson. I do not want to calculate them manually. How to use coordinates from SVG so ...
CommunityBot
- 1
2
votes
1
answer
2k
views
L.control.sidebar is not a function
I have install leaflet-sidebar-v2 via npm. However when I try to simply initialize the side bar I get this error.
L.Control.Sidebar is not a function.
here is my index.html import scripts etc
&...
CommunityBot
- 1
2
votes
1
answer
897
views
Incorporating Ordnance Survey map with other layers in Leaflet
I am trying to incorporate the Ordnance Survey layer into my Leaflet map. The goal is to enable it as another map layer amidst a few existing ones.
One of the code looks like this:
var link = L....
CommunityBot
- 1
0
votes
1
answer
31
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 ...
- 20.2k
0
votes
2
answers
1k
views
Edit a shapefile with Leaflet.pm
I am new to Leaflet but so far so good. I managed to add the plugins I needed and they work. Except the shapefile editing.
I am using leaflet.pm to draw, snap, cut polygons (only polygons). I also ...
CommunityBot
- 1
3
votes
1
answer
912
views
Dynamically changing fillColor variables in leaflet
When I want to style a polygon using a property the traditional way is to assign a function that returns a style object. Within that object you assign the fillColor property to a getColor function
...
CommunityBot
- 1
1
vote
1
answer
211
views
Customising a marker after performing a spatial search query
I'm have a geodjango app that uses leaflet for a front-end. I have integrated the search function on the front-end to be able to search a customer location in real-time, of which the code below does ...
CommunityBot
- 1
0
votes
1
answer
191
views
Display vector tiles (PBF) in Leaflet after exporting from QGIS
Loading a vector tiles in leaflet with leaflet.vectorgrid I'm getting Error: unknown command 4
core code that fails:
var pbf_testSlope = new L.vectorGrid.protobuf('https://myx.ch/test/...
CommunityBot
- 1
2
votes
1
answer
527
views
Reprojecting EPSG:5514 to EPSG:3857 for use in Leaflet
I have one JPG (170 MB) and JGW file of a small area projected in EPSG:5514 (Image provider told me.)
JGW file:
0.1250000
0.0000000
0.0000000
...
CommunityBot
- 1
0
votes
1
answer
6k
views
Not allowed to load local resources ASP NET MVC
var wmts = L.tileLayer('E:/Mapnik/{z}/{x}/{y}.png', {
wmts: true,
});
wmts.addTo(map);
I am trying to load the map with asp.net mvc, but I get this error. (Not allowed to load local resources ...
CommunityBot
- 1
1
vote
1
answer
1k
views
No applicable method for 'metaData' applied to an object of class "NULL" with Leaflet map
I'm putting together a Shiny app that involves a Leaflet map. Unfortunately, whenever I run it, it produces this error: "no applicable method for 'metaData' applied to an object of class "NULL"". I'm ...
CommunityBot
- 1
1
vote
1
answer
422
views
Can't close custom popup at fixed position
I created this custom popup at a fixed position. When clicking a marker a popup opens, I'm able to close the popup and open another one clicking a different marker, then I'm not able to close the ...
CommunityBot
- 1
1
vote
1
answer
2k
views
Leaflet ignore click event when popup is open
I am building a tool allowing to edit some GeoJSON props on a popup opened over the GeoJSON element/layer. When the popup is closed the props are shown in a fixed tooltip over the polygon.
However, ...
CommunityBot
- 1
-1
votes
0
answers
68
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 ...
- 65.3k
0
votes
0
answers
44
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
2
votes
1
answer
2k
views
Layer.bindTooltip doesn't work in Leaflet
My objective is to plot polygons and assign a tooltip label to each one. For some reason, my code doesn't seems to work.
poly_geojson = L.geoJson(poly_gon,{
onEachFeature(feature, layer) {
...
CommunityBot
- 1
4
votes
2
answers
2k
views
Leaflet: click through marker's transparent background
The icon I use on my marker does not cover the whole quadratic area.
Is there a way to be able to click through the transparent parts of the marker onto another marker or the map itself?
I'm using ...
- 20.2k
0
votes
1
answer
262
views
ESRI-Leaflet updateFeature with a changed attribute or property
I'm updating a feature in ESR-Leaflet from a feature layer based on a call to a function. What I'm having trouble with is submitting this change to the feature service.
Currently I:
Get the feature ...
CommunityBot
- 1
0
votes
2
answers
959
views
Passing GeoJSON API to Leaflet (proj4leaflet) map
I have created a geographical view of a point using Leaflet based on a coordinate system data. Since I'm using the coordinate system rather than lat and long, I'm using proj4leaflet for the conversion ...
CommunityBot
- 1
2
votes
1
answer
1k
views
Add a fill pattern to feature style instead of a fill color on a certain condition in Leaflet
As a continuation to Hatch polygons in Leaflet
I'm using Vue and Quasar but I would love to see any type of example. What I have is
statestyleCDC(feature) {
return {
fillColor: this....
CommunityBot
- 1
0
votes
1
answer
3k
views
How do I draw in a Canvas with Leaflet 1.9?
I am beginning with Leaflet 1.9.2, and so far I was able to draw a tiled map with some markers and polylines on top of the map.
Now I'd like to draw animated custom vector shapes on my map like in ...
CommunityBot
- 1
2
votes
2
answers
2k
views
Leaflet JS - open popup on button click
New to JavaScript, coming from Python background. Created a custom control and have added buttons inside the _div using a for loop and innerHTML.
I want to zoom to and open the popup of a layer of ...
CommunityBot
- 1
3
votes
1
answer
293
views
GeoJSON file content not display properly in Leaflet
I am new to Leaflet. Am facing one issue when try to display GeoJSON file in Leaflet.
Issue:
Actually some GeoJSON file only am facing this problem. In my knowledge coordinates are in different ...
CommunityBot
- 1
0
votes
0
answers
11
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.
- 13.5k
1
vote
0
answers
48
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
0
votes
1
answer
2k
views
Load Leaflet ImageOverlay with center point instead of corners
I have an image file that I am able to overlay perfectly fine onto my Leaflet map with this code:
var initLat = 38.9761;
var initLon = -77.4875;
var imageUrl = '/weather/nexrad/radar.png';
var ...
CommunityBot
- 1
1
vote
1
answer
378
views
Display shapefile data - Leaflet 1.4.0
I am using Leaflet 1.4.0 and a beginner with Leaflet and JavaScript.
I try to display shapefile data on my webmap with Leaflet. But it doesn't work.
All the data (.shp, index.html... ) in WGS84 are ...
CommunityBot
- 1
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 ...
- 20.2k
0
votes
1
answer
357
views
Esri-Leaflet getFeature returns 'undefined'
I'm using Esri-Leaflet and whenever I try to use getFeature() the console.log returns "undefined".
There are no other errors to accompany the undefined message.
var service = L.esri....
CommunityBot
- 1
0
votes
1
answer
914
views
Getting width of road segment given its end points using Leaflet?
I want to highlight a road segment on a Leaflet Map. I have the coordinates of the end point of the road segment, so could plot it as a linestring. But the problem is how can I get the width of the ...
CommunityBot
- 1
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() ...
- 26.5k
0
votes
1
answer
469
views
Map data do not show up under the Leaflet magnifier
I tried to add Leaflet magnifier to my map and it is perfectly working on the base map, but it doesn't magnify or show my own data on the map. My own data is loaded as GeoJSON to map and its visible ...
CommunityBot
- 1
3
votes
1
answer
1k
views
Creating popups in Folium (Leaflet) for GeoJSON polygon layer
Looking through the Folium documentation I can't find how to add a popup to a polygon GeoJSON layer in Folium. Looking through the Leaflet documentation it seems like its possible, but I don't know ...
CommunityBot
- 1
1
vote
0
answers
52
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;
...
- 65.3k
2
votes
2
answers
1k
views
Joining CSV to KML/GeoJSON in Leaflet webmap and showing joined data in popups?
I'm trying to create a Leaflet/Mapbox webmap with line layer (GeoJSON or KML) with some IDs and data coming from the .csv (after joining through this ID) file located on the same path as the index....
CommunityBot
- 1
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 ...
- 26.5k
1
vote
2
answers
1k
views
Showing all features by real-time API with Leaflet Map
I want to show all URL parameters or features onto a map. I have made the variable with ajax query as well as inside the loop data is printing with variable but I want to show this data with map into ...
CommunityBot
- 1
0
votes
1
answer
2k
views
Leaflet draw - Edit event after editing existing feature
I was inspired by this post
How to edit an existing layer using leaflet? I can click on an item to make it editable.
But this does not "activate" the drawControl to allow me to click save or cancel, ...
CommunityBot
- 1
1
vote
1
answer
355
views
Removing previous layer when new layer is select from drop-down menu?
I have a drop-down with some options in it, after selecting one option and button clicking I get the text and my shapefile from the GeoServer which is added to the map. So when I click on the first ...
CommunityBot
- 1
1
vote
1
answer
535
views
Cannot set zoom past 23 in Leaflet
How can I set the zoom to 23 or more? When I try to set the zoom higher the map image disappears. I am able to zoom in past 23 once the map is activated in a browser, but I can't set the zoom past 23 ...
CommunityBot
- 1
1
vote
1
answer
257
views
Draw line between China and South America through the Pacific Ocean in Leaflet
I am relatively new using Leaflet.js. I want to draw a polyline in Leaflet.js between China and South America through the Pacific Ocean. Instead, I can only draw this line through both places through ...
CommunityBot
- 1