Questions tagged [leaflet]
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
4,027
questions
2
votes
1
answer
408
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
0
votes
1
answer
20
views
Why does Leaflet layer control require null to be expanded by default
I have the following code which is used the create a Leaflet layer control and keep it open by default:-
const layerControl = L.control.layers(baseLayers, null, {collapsed:false, position: '...
- 1,357
0
votes
0
answers
30
views
How to create rectangle just like Leaflet in OpenLayers 3
In Leaflet, we create rectangle using below code
var pointList = [pointA, pointB];
// lines of longitude
lngPolyLayer = new L.rectangle(pointList, {
color: "#9fd1d4",
weight: 2,
...
- 19.5k
1
vote
1
answer
13
views
How to use getBounds() in OpenLayers 3
I am working on a project to create map using OpenLayers 3. Previously I was working with Leaflet but now I am working with OpenLayers 3.
In Leaflet, I was fetching bounds using below code
var bounds =...
- 11.5k
10
votes
3
answers
39k
views
How to open popup menu on right click in Leaflet
I want to open a popup menu list on right click with Leaflet map. I have tried the ContextMenu of leaflet but couldn't do it. Here is the sort of code I used.
map.on('contextmenu', L.popup()
....
1
vote
1
answer
323
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
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
240
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
0
votes
1
answer
181
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
77
views
R Shiny/R Leaflet/ R : Dynamically render choropleth map with sliderInput in R shiny
I am trying to use the slider function to select and only display selected polygons using Shiny on a Leaflet map.
The code below gets the slider to react, but I want the colour scale to represent the ...
1
vote
1
answer
117
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
2
votes
1
answer
79
views
Polygon fill pattern not visible in screenshot taken with Leaflet simpleMapScreenshoter plugin
We are using Leaflet to display polygons with fill patterns using the leaflet-polygon.fillPattern.js plugin. Additionally, we are using the leaflet-simple-map-screenshoter.js plugin to allow users to ...
- 64.5k
1
vote
1
answer
192
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
-1
votes
0
answers
19
views
imageoverly not working for mobile leaflet.js interactive map project [closed]
When opening the page on mobile devices, the image does not appear on the map, but it does appear on the computer and iPad.
Is there a solution to this problem?
- 64.5k
1
vote
1
answer
5k
views
How to detect "delete" or "edit" events in popup menu created with Leaflet-draw-toolbar plugin?
In this example you may create a polygon and then click it and popup menu shows. There is three buttons: edit, delete and pick a color. How can I detect event and determine which of it - delete or ...
- 19.5k
2
votes
1
answer
2k
views
Leaflet setView with non lat/long CRS
Is it possible to use setView when using an alternative CRS?
var map = L.map('map',{crs: L.CRS.EPSG26915}).setView([4970081,477018], 13);
// Returns: Uncaught TypeError: Cannot call method '...
- 64.5k
1
vote
0
answers
66
views
Use TMS or WMTS to get vector tiles served from Geoserver in Leaflet [duplicate]
Question: Is there a reason to use a TMS over WMTS call to GeoServer to pull vector tiles?
My goal is to pull vector tiles from my Geoserver to my Leaflet-based web application. Unfortunately, the ...
- 31
2
votes
1
answer
388
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
...
0
votes
0
answers
31
views
Leaflet: Allow user to add image to marker popup [closed]
I currently have a Leaflet app that allows the user to place markers on a map. After they do this they are given a prompt where they provide the description for the marker. Is there a way to make it ...
- 19.5k
2
votes
1
answer
44
views
Displaying flatgeobuf file in Leaflet [closed]
I am trying to read flatgeobuf file (see https://flatgeobuf.org/examples/leaflet/) in Leaflet, but it returns blank.
Here is my code:
import './style.css'
import 'leaflet/dist/leaflet.css'
import '...
- 19.5k
3
votes
2
answers
135
views
GeoJSON from SQL View
I am trying to select database table features within a certain distance from a leafleat generated geosjon using an sql view in geoserver. I first used a GET function and a user here suggested POST. I ...
- 26.9k
1
vote
0
answers
190
views
Poor GeoTIFF display performance using JS plugins contrary to Leaflet for R package
I have question regarding displaying GeotTIFF using leaflet or react-leaflet.
There are some packages allowing displaying tiffs, for example I had used:
https://github.com/stuartmatthews/leaflet-...
0
votes
0
answers
32
views
Preloading map tiles for different zoom levels in Leaflet
Preload map tiles that are outside current map view in Leaflet talks about how to preload map tiles that aren't currently in the viewport but are at the same zoom level. But what if I wanted to ...
- 19.5k
3
votes
1
answer
180
views
Get GeoJSON from a VectorGrid.Protobuf layer on click event
I am trying to get the GeoJSON of a VectorGrid layer on a click event.
Something like this:
...
var vectorTile = new L.vectorGrid.protobuf(url, options).addTo(map)
vectorTile.on('click', e => {
...
CommunityBot
- 1
-1
votes
0
answers
37
views
Cannot save and load a map with Leaflet [closed]
I display a map and draw lines or polygons with Leaflet. Every thing works fine but I want to save the mapa with their draws, but I do not know how to do it. I have this code and I can save a png ...
- 69k
0
votes
1
answer
2k
views
Handling popups with overlapping layers in Leaflet
I have two polygon layers (polygons) that overlap. I've created a leaflet map using qgis2web. The issues is that, if I click on the overlapping area, the popup only shows information for the topmost ...
- 1
2
votes
1
answer
39
views
Create a toggle for users to place markers in Leaflet?
I am working on an webpage that uses Leaflet. The users can currently place a marker on the map when they click a specific area. I was wondering if there is a way to add a toggle so that the user can ...
- 20.4k
1
vote
1
answer
777
views
Display leaflet layerswitcher on click event
I would like to click on a sidebar/menu icon, and when I do the layerswitcher Icon should appear.
Right now the layerswitcher is always displayed.
I know how to make it disappear with the command
...
CommunityBot
- 1
2
votes
1
answer
52
views
Leaflet.js transfer information of a point: latitude, longitude, feature properties and variables, to a function
I'm trying to extract some information from a L.geojson feature of the map, containing points, through a newly created button inside a BindPopup feature, pointing to a function. Such function then ...
- 412
1
vote
1
answer
119
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
26
views
Shift in Raster image in R Leaflet
I am trying to plot a raster image on a leaflet map - the raster I am using is downloaded from Environment Agency and the CRS of the raster is British National Grid (EPSG:27700). You can find the file ...
- 58k
0
votes
1
answer
386
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
0
votes
1
answer
384
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
2
votes
1
answer
5k
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 ...
CommunityBot
- 1
0
votes
1
answer
583
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
296
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
2
answers
64
views
Offset of markers and polygon depending on zoom level in Leaflet
I have run into a problem with a suspicious offset what comes to self created polygon using Leaflet. I am creating a website using NodeJS (and Pug for rendering the HTML itself). Using Leaflet, I ...
- 21
0
votes
1
answer
1k
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
60
views
Specify tilelayer position on Leaflet
I have 2 raster images (.png), 2 maps that are geographically next to each other (east part and west part of a city). These images are part of a bigger set, and cannot be merged (or my PC dies).
These ...
- 4,449
1
vote
0
answers
39
views
Where to set CRS property in react-leaflet?
I am changing my reference system in my Leaflet app. I am using the react-leaflet library since I am building it with React.
import { MapContainer, TileLayer, ImageOverlay, useMap } from 'react-...
- 495
1
vote
0
answers
27
views
ImageOverlay bounds in Leaflet from GDAL processed image
I am displaying an image to Leaflet. The image is a result of a process from a backend I am also building. I cannot get the right bounds for the image. I return the bounds from the function gdal.Info.
...
- 495
1
vote
1
answer
296
views
mapfish.print.InvalidValueException: url has an invalid value
I have the config yaml set us below:
- !image
maxwidth: 120
maxheight: 40
align: left
url: "file:\\C:\Program Files (...
CommunityBot
- 1
2
votes
1
answer
1k
views
Adding a popup to features in a leaflet.vectorgrid layer
I am loading a tile set from MapTiler to my leaflet map. I have no trouble styling each feature in the tile set. I can set each feature to the appropriate color.
I would like to also add a popup to ...
CommunityBot
- 1
1
vote
1
answer
174
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
3
votes
1
answer
49
views
Crossing lines when displaying multilinestring from GeoJSON in Leaflet
I'm stuck with something simple. I'm trying to draw a multilinestring from a GeoJSON file in a Leaflet map.
I've taken the GeoJSON data from an application (built with OpenLayers + GeoServer), which ...
- 20.4k
8
votes
5
answers
26k
views
Custom ordering/z-index of icons in Leaflet layer
I have a single layer (points) with a bunch of markers. Each point has an attribute that is regularly updated. I understand by Leaflet sorts the layers such that those lower in latitude are on top for ...
- 69k
1
vote
2
answers
4k
views
Leaflet on mouse wheel event change zoom by delta
I am trying to find a way to change zoom by delta when using mouse wheel event (scroll) in Leaflet.
E.g. current map zoom is on 0 and if "scrolled" into map, zoom should be 5.
Also, zoom change ...
1
vote
1
answer
51
views
Pass GeoPackage layer attributes to marker popup in leaflet without click on the marker
I am working on querying a GeoPackage layer based on leaflet and leaflet-geosearch.
Here is the plain js code.
import './style.css'
import 'leaflet/dist/leaflet.css'
import 'leaflet-geosearch/dist/...
- 20.4k
2
votes
1
answer
89
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....
2
votes
1
answer
2k
views
With leaflet-routing-machine, how to bring a route on top?
On a simple Leaflet map, with leafleat-routing-machine, if two routes pass by the same place, only the top one is visible. I can live with this if I can choose which route is on top, (for example by ...
- 161