Questions tagged [leaflet]
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
4,030
questions
0
votes
1
answer
25
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 ...
- 137
0
votes
0
answers
14
views
L.imageOverlay with JPG image (leaflet) not working
I created a page using leaflet where I hosted some geographical information. Besides that, I have an ortophoto in JPG format that I want to spatially represent. I used this code:
var ...
- 1,459
0
votes
1
answer
24
views
Bootstrap control modals plugin changing icons in Leaflet?
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
22
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
35
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,
...
- 111
1
vote
1
answer
15
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
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
0
votes
0
answers
32
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 ...
- 123
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 '...
-1
votes
0
answers
20
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?
0
votes
0
answers
34
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 ...
- 304
-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 ...
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 ...
- 123
2
votes
1
answer
53
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
3
votes
2
answers
136
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
27
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 ...
- 427
2
votes
1
answer
81
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 ...
- 31
2
votes
1
answer
63
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
43
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
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
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 ...
- 33
1
vote
1
answer
53
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
96
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
29
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 ...
- 495
1
vote
1
answer
34
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
59
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
53
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
22
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, ... ...
- 27
0
votes
0
answers
79
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 ...
0
votes
0
answers
19
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 ...
- 111
1
vote
1
answer
85
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: {
...
- 243
0
votes
0
answers
22
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
2
votes
1
answer
61
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,076
0
votes
1
answer
139
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
64
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
138
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
102
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,357
2
votes
2
answers
80
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,203
0
votes
0
answers
109
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 = ...
- 83
0
votes
2
answers
91
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://...
- 231
0
votes
1
answer
93
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
74
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 ...
2
votes
1
answer
82
views
Why Leaflet can't download the right tiles in WMTS?
I use basemap.at and try to show with Leaflet. It can always download some tiles, but other parts of the tileset have wrong request.
This is my code in index.html:
<link rel="stylesheet" ...
- 21
1
vote
0
answers
41
views
@turf/boolean-contains returns false, even though one polygon is fully contained in another
I'm having trouble with some polygons.
I'm using BooleanContains from the turf library to try to highlight some errors in my map. The thing is that in some polygons BooleanContains acts weird. For ...
- 11
0
votes
1
answer
72
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 ...
- 1,357
1
vote
0
answers
66
views
Use external data for a Leaflet Choropleth map
I'm using Leaflet.js in a Vue project.
When I create the counties within a US State my GeoJSON looks like:
{
"type": "FeatureCollection",
"features": [
...
- 131
0
votes
0
answers
30
views
Make raster tiles in Albers projection or Equidistant Conic
It`s necessary to make tiles in the non-Mercator projection to display them in Leaflet using the Proj4Leaflet library. How can I do this?
3
votes
1
answer
124
views
Get the distance and bearing of each pathline using Leaflet.PolylineMeasure plugin?
I have been playing with polylinemeasure:change and I see I can get the value of the total distance easily with currentLine.distance.
But how can I get the value of each pathline distance and its ...
- 141
1
vote
0
answers
51
views
How to make button in Leaflet in Front of Map [closed]
I'm making a map using a leaflet. And, the button that i created cant in front of the map. How to make the button appear in front of the map?
this code in JSX :
<div className="bottom-0 right-...
