Questions tagged [leaflet]
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
4,117
questions
2
votes
1
answer
302
views
Leaflet KML imported with Omnivore filled only with default blue and not the color set in KML file
I have a KML file which I need to import in a map using Leaflet. If I use leaflet-kml I can see all polygons with color set from KML file.
But because I need to show only one polygon extracted for ...
- 45
2
votes
1
answer
139
views
Show only one polygon from KML loaded with Leaflet
I'm using Leaflet with Leaflet-KML plugin to show a KML file with multiple polygons. In this KML file there are 125 polygons. I want to pick only one to show on the map. The choice is made directly ...
- 45
3
votes
1
answer
313
views
turf.nearestPointOnLine() returns different distance when several nodes are passed at once
For my question I have prepared a jsFiddle demo where you can drag a marker around and the nearest way is drawn in red color:
function distancePointSegment(lat, lng, lat1, lng1, lat2, lng2) {
var ...
- 255
1
vote
1
answer
42
views
CRS Options for Geospatial Plots
I am trying to learn about geospatial visualization.
Here is a shapefile I downloaded for the UK:
library(sf)
library(leaflet)
# Set the URL
url <- "https://data.london.gov.uk/download/...
- 29
2
votes
1
answer
498
views
Calculate distance between location and way segment
For my question I have prepared a JsFiddle demo which works well and is fun to play around with:
My question is neither about JavaScript nor OpenStreetMap though.
It is about mathematics.
When you ...
- 255
0
votes
1
answer
531
views
Using a custom button to start editing with leaflet-geoman is automatically placing a first vertex on the Leaflet map (Next.js, React)
Using Next.js@12 & [email protected]
I have a custom toolbar with a number of buttons to enable drawing (polygon, rectangle, marker), when I click a button to start drawing, the first vertex is ...
- 11
1
vote
0
answers
126
views
How do I change the tile type for one area of the map?
The whole map has a TileLayer = 'OpenStreetMap'. How to change the Title Layer only for the area indicated by the polygon?
import folium
X1 = 61.70029083832628
Y1 = 27.24609375
X2 = 61.68987220046
Y2 ...
- 11
3
votes
1
answer
78
views
Leaflet draw shapes and get the overlapped/included zipcodes
I am new to the GIS world but I have experience in programming. I am trying to build an app where users draw circles on a leaflet map and it returns the zipcodes "touched", but I think the ...
- 31
2
votes
0
answers
55
views
Unwanted different line thickness in multipolygon's shared borders
I have a multipolygon in a Leaflet map in a R Shiny app. There is always one subpolygon selected to be displayed while the other subpolygons are hidden (i.e. it's fill is transparent and the others ...
- 237
1
vote
0
answers
137
views
Add functionality to Leaflet Map (Search, Add on Client Select) [closed]
I've tried so many ways to do it but is there a way to do this or not?
I would like to have it so that the user can search on the page (doesn't have to be a control in Leaflet) for a building with ...
- 11
5
votes
1
answer
236
views
Unable to remove GeoJSON features/layer in Leaflet
I am able to select a decal and display the GeoJSON on the map. Once I select another decal from the select dropdown it shows the new GeoJSON shape but doesn't remove the old ones. I've tried multiple ...
- 65
1
vote
1
answer
448
views
Get the bounds of a WMS layer in Leaflet using JavaScript [duplicate]
Is there a function for calculating the bounds of a line in Leaflet maps. I have many single line layers on a leaflet map. The lines are served from GeoServer WMS. Line layer example:-
var HKL = L....
- 1,397
1
vote
1
answer
136
views
Leaflet shapefile plugin doesn't show the shapefile layer
I'm trying to use the Leaflet Shapefile plugin (https://github.com/calvinmetcalf/leaflet.shapefile). A demo page also shows the plugin's output (http://calvinmetcalf.github.io/leaflet.shapefile/). I ...
- 159
0
votes
1
answer
90
views
Bootstrap control modals plugin changing icons in Leaflet? [closed]
I'm using Leaflet plugin L.Control.BootstrapModal (see https://github.com/gregallensworth/L.Control.BootstrapModal) to add a few layer controls on my map which toggle a modal displaying some country ...
0
votes
1
answer
278
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,397
1
vote
1
answer
233
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 =...
- 111
1
vote
0
answers
76
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
200
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 '...
0
votes
0
answers
203
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 ...
- 360
2
votes
1
answer
234
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 ...
- 123
2
votes
1
answer
221
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 ...
- 488
3
votes
2
answers
242
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 ...
- 221
0
votes
1
answer
172
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 ...
- 459
3
votes
1
answer
455
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 ...
- 41
2
votes
1
answer
200
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 ...
- 23
1
vote
0
answers
658
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-...
- 561
1
vote
0
answers
134
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.
...
- 561
1
vote
2
answers
452
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
4
votes
1
answer
192
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 ...
- 43
1
vote
1
answer
156
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/...
2
votes
1
answer
658
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....
- 131
0
votes
0
answers
251
views
Leaflet mask imagelayer with GeoJSON polygon layer
Is there a way in Leaflet or a Leaflet plugin that lets you mask an ImageLayer from a GeoJSON layer? I know that a backend can mask the images for you then return the masked image to Leaflet but I am ...
- 561
1
vote
1
answer
113
views
Toggle Leaflet JS KML layers individually
I'm creating a map with multiple KML layers, and have been able to get the KMLs to appear, however, implementing a simple checkbox to turn each layer on and off is proving to be a problem. I've tried ...
- 13
0
votes
0
answers
129
views
Wikipedia layer in Leaflet
I have been trying to move examples of Wikipedia layers to my file server. They work when opened via file explorer, but not when uploaded. All that I have changed are the addresses for the JS files. I ...
0
votes
1
answer
275
views
Make a Leaflet Tooltip draggable
I have got the following tooltip:
var tooltip = L.tooltip()
.setLatLng(latlng)
.setContent('Hello world!<br />This is a nice tooltip.')
.addTo(map);
Now it it fixed (it does not move). Is it ...
- 56
0
votes
0
answers
131
views
Plot reference lat/lon lines in Leaflet
Basically taking the code from the sample provided by the leaflet website, I am able to get the general map for leaflet:
Now, I would like to add reference lat/lon lines. For example, 0, 10, 20, ... ...
- 141
0
votes
0
answers
318
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 ...
- 17
0
votes
0
answers
55
views
R leaflet on mobile
I have a leaflet map created in R and which will laterr be implemented as iframe on a website. When scolling with one finger the map scrolls as well. I would like the map to respond to two fingers ...
- 141
1
vote
1
answer
666
views
Leaflet.draw change polygon filling programmatically
I'm using Leaflet.draw to draw and edit polygons.
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems,
edit: {
selectedPathOptions: {
...
- 255
0
votes
0
answers
47
views
Determining number of zoom levels in spatial tile set?
I've been given a tile-map as a set of nested folders of image data, to use as a backdrop in a leaflet map.
I need to provide leaflet with the maximum zoom level, so it doesn't try to zoom in too far.
...
- 195
3
votes
1
answer
387
views
Detect if features are next to each other but not overlapping using Turf.js
I would like to detect if two features are only sharing one or more edges but do not overlap using Turf.js. What I have tried so far is using all the relevant boolean functions of turf. Unfortunately ...
- 2,286
0
votes
1
answer
689
views
imageOverlay is not working with Leaflet side-by-side
I'm trying to render the two images on side by side comparison view.
var map = L.map("map", {
center: [23.14, -101.887],
zoom: 5
});
map.createPane("left");
map.createPane(&...
0
votes
0
answers
353
views
How to add GeoJSON file to Leaflet map
I am new to JavaScript, HTML, and Leaflet. I would like to add a polygon to my Leaflet map.
Here is where I store the file. I want to use this file and don't want to add thousands of coordinates to my ...
- 1
1
vote
2
answers
720
views
Layer's feature color (Leaflet map)
How can I assign a color for each feature without defining the attribute value?
Problem: I have many features, I don't want to define the ID values manually when calling getColor() like this:
function ...
- 33
1
vote
1
answer
875
views
Create custom layer control for Leaflet map
I am trying to create a custom leaflet layer control for making layers visible or hidden. I created a html div which has a checkbox to hide or make visible a layer.
<input type="checkbox" ...
- 1,397
3
votes
2
answers
291
views
Add ESRI wayback WMTS service in ipyleaflet
I'm struggling to use the ESRI wayback WMTS service in (ipy)leaflet.
I tried the options below but none of them worked.
Via wms
from ipyleaflet import Map, basemaps, WMSLayer, TileLayer
wayback_url = ...
- 2,272
1
vote
0
answers
579
views
How to make folium multiple markers's popups display simultaneously on click on any one of them?
this code works fine but it only displays the popup of the clicked marker. I rather want that all markers' popups display when clicking on any marker of them.
import folium
import pandas as pd
data = ...
- 93
0
votes
2
answers
425
views
MapLibreGl, how to use it with specific Tiles? [closed]
On a personal site, I use leaflet to display a map.
var cartoDb = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="https://...
- 241
0
votes
1
answer
400
views
MapServer slow rendering on Leaflet viewer
I am trying to use display shapefile data on top of raster images using Leaflet.
I render the shapefile data using leaflet L.tileLayer.wms function.
The size of shapefile is 300mb. The problem is that ...
- 41
2
votes
1
answer
150
views
Problem with displaying GeoJSON in EPSG:3575 projection in Leaflet
In the EPSG:3575 projection in the Leaflet, all settings are identical, but GeoJSONs are displayed differently for different rasters.
For rasters, the difference is only in the size of the tiles.
The ...
