Questions tagged [leaflet]
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
4,152
questions
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
0
votes
0
answers
21
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 ...
- 65.1k
1
vote
1
answer
46
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 ...
- 25.7k
0
votes
0
answers
27
views
Viewports for nested iframes when used on a mobile device [closed]
I have a parent page with a number of tabs. Two tab divs contain Leaflet maps in iframes; both are fullscreen but map one has HTML buttons overlaid on the map, map two just uses Leaflet elements.
A ...
- 13
1
vote
1
answer
80
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 ...
16
votes
2
answers
19k
views
Placing controls outside map container with Leaflet?
Can someone tell me how I can place controls outside of the map content with Leaflet?
In this case, I just want to place the layer switch control outside the map object.
- 1
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
3
votes
1
answer
274
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
1
answer
2k
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
0
votes
0
answers
22
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
7
votes
2
answers
17k
views
Load a raster file directly in Leaflet
Is it possible to load a raster file (e.g. GeoTIFF or Erdas img) directly into a Leaflet map? If so, can you guide me to the correct documentation or method to do this?
I am trying to do this with the ...
1
vote
1
answer
693
views
How to avoid popup open after drag
I implemented a draggable CircleMarker with popup, however when the circle is moved the popup opens right away. How can I avoid that?
Is there a way to cancel the popupopen event?
[Edit]: Ideally the ...
CommunityBot
- 1
0
votes
0
answers
41
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.
...
- 20.1k
2
votes
1
answer
916
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
77
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/...
- 358
1
vote
1
answer
359
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
votes
1
answer
111
views
About CRS and map origin setting, What is their relation and math equation in leaflet.js via using proj4leaflet.js
I meet a problem about CRS function and map origin setting in leaflet.
I use proj4leaflet.js as the basic CRS function, and then after setting the origin of crs and
resolution, I can get the correct ...
- 65.1k
1
vote
1
answer
215
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
0
votes
1
answer
336
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
-2
votes
1
answer
103
views
How to use AJAX request to filter WFS data?
I want to create a mash-up that shows sites in Italy on a basemap. With the AJAX call I want to include the number of earthquakes within a certain distance to each site. I want to use the AJAX call ...
- 83
1
vote
1
answer
33
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: ...
- 25.7k
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
898
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
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
votes
1
answer
49
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 ...
- 65.1k
0
votes
1
answer
57
views
Install Leaflet plugins in Python based environment for web GIS building purpose
I am in the middle progress of building a webgis that utilize python Flask as backend and Leaflet to build the maps. I can still manage until the step where I implemented the vanilla Leaflet and just ...
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
173
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
15
votes
2
answers
31k
views
Overriding Leaflet tooltip style?
I'd like to override the default style of Leaflet 1.0.0 tooltips, especially the bubble/frame. I don't see any options or methods for this. How do I hook into the CSS? I want to change layers ...
- 1
2
votes
1
answer
59
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 ...
- 25.7k
1
vote
1
answer
204
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
40
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
2
votes
1
answer
471
views
Use self-defined Leaflet identifiers to work with jsTree checkboxes
I have some hierachic structured point-layers in a GeoJSON file using jsTree (ajax) with checkboxes to add them to the map. As I have about 20.000 points structured in 2.000 nodes representing the ...
CommunityBot
- 1
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
0
votes
1
answer
888
views
How to add and remove the pop-up text based on the condition by using Leaflet
I want to show and hide the popup text based on the condition given below.
.component.ts
var insidecirclespace1 = (lat, long) => {
for (var i = 0; i < this.sensors.length; i++) {
...
CommunityBot
- 1
1
vote
1
answer
181
views
refreshClusters on esri.Cluster.featureLayer
I am trying to 'refresh' a cluster layer which is created by L.esri.Cluster.featureLayer and a feature url. I have tried to remove and re-add the layer (with no succees). But the refreshClusters is ...
CommunityBot
- 1
1
vote
1
answer
483
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
0
votes
1
answer
456
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
96
views
AJAX calls for leaflet
I want to create a mash-up showing sites on a basemap as I did in the first part of my code. With the AJAX call I want to include earthquakes so that the pop-up of each site shows its name However, I ...
- 83
1
vote
1
answer
344
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
339
views
How to get the geometry of Vector Tiles Protobuf integrated in Leaflet
I use the Vector Grid plugin to integrate Vector Tiles (Protobuf format) in my Leaflet application. How can I access the geometry of a selected feature? I include the Vector Tiles as follows: L....
CommunityBot
- 1
0
votes
1
answer
482
views
Make background image visible at all scales in webmap QGIS2web
I'm trying to produce a web map using the QGIS2web plug in and leaflet output, but the background image is not visible when I zoom in beyond some scale. Is there a way to control the scales a ...
CommunityBot
- 1
1
vote
1
answer
672
views
Leaflet Javascript: zoom to layer only on load
I have a WFS layer, updated in a loop, and I want the view to be centered on it only the first time the map is loaded; next, when the user moves the map or waits 20 secs, there is a movend function ...
CommunityBot
- 1
2
votes
1
answer
328
views
View vector GeoServer line layer in Leaflet
I have simple line layer created based on shapefiles. It can be viewed in GeoServer with OpenLayers preview:
I also can be imported and correctly viewed in QGIS.
I tried to visualize this layer over ...
CommunityBot
- 1
3
votes
2
answers
6k
views
Leaflet Routing Machine: how to dinamically change router settings?
I'm using Leaflet Routing Machine in a litte Leaflet + Javascript map.
I'm using Graphhopper as router in this way ....
var control = L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
...
- 65.1k
0
votes
1
answer
218
views
Manipulating data with a Handsontable spreadsheet in a Leaflet GeoJSON Layer and rerender the map
The goal is to add a spreadsheet view to a GeoJSON Layer to comfty edit the properties directly in the spreadsheet and the location (lat/long) within the map by dragging the marker with leaflet.draw.
...
CommunityBot
- 1
0
votes
0
answers
35
views
Using OSMBuildings in Vue.js with Leaflet
I am currently working on building a GIS system using Leaflet in Vue.js and am attempting to integrate OSMBuildings to incorporate 3D models. However, it seems that OSMBuildings does not have a ...
0
votes
1
answer
2k
views
Leaflet Map moves to opened popups when zooming in (React-leaflet)
i wanted to open the popup Markers when the MapZoom is at a certain value ,i got the
mapZoom using the map.getZoom() on the zoomend Event , a state is set for the MapZoom when the user scrolls ...
CommunityBot
- 1
2
votes
1
answer
855
views
Generate tiles from Leaflet polygons
I have a set of shapes drawn in Leaflet (using Leaflet.draw). I need to rasterize these into a tileset and export it because I need to use the images elsewhere.
My initial idea was to go through ...
CommunityBot
- 1
1
vote
0
answers
61
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 ...
- 20.1k