Questions tagged [leaflet]

An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps

Filter by
Sorted by
Tagged with
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 ...
user6634742's user avatar
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 ...
user6634742's user avatar
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 ...
Alexander Farber's user avatar
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/...
SiuMai2k22's user avatar
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 ...
Alexander Farber's user avatar
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 ...
jamaro's user avatar
  • 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 ...
Centrus's user avatar
  • 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 ...
RmCs's user avatar
  • 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 ...
bathyscapher's user avatar
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 ...
mmaguigan's user avatar
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 ...
Nat's user avatar
  • 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....
mapperx's user avatar
  • 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 ...
Melanie's user avatar
  • 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 ...
Simone Ghilotti's user avatar
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: '...
mapperx's user avatar
  • 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 =...
Ankit's user avatar
  • 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 ...
Logreen's user avatar
  • 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 '...
darthvaderlives's user avatar
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 ...
neubert's user avatar
  • 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 ...
Buzzkillionair's user avatar
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 ...
Vincent Dc's user avatar
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 ...
Ayogo's user avatar
  • 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 ...
rm167's user avatar
  • 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 ...
Pavan Yogi's user avatar
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 ...
Astrosias's user avatar
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-...
Nikko's user avatar
  • 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. ...
Nikko's user avatar
  • 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 ...
user220669's user avatar
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 ...
user2735267's user avatar
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/...
darthvaderlives's user avatar
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....
Bill's user avatar
  • 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 ...
Nikko's user avatar
  • 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 ...
John Spartan's user avatar
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 ...
WombatBill's user avatar
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 ...
losted's user avatar
  • 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, ... ...
Miss_Orchid's user avatar
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 ...
AlexaQuinoa's user avatar
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 ...
SPet's user avatar
  • 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: { ...
LAffair's user avatar
  • 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. ...
ianmayo's user avatar
  • 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 ...
Bernd Loigge's user avatar
  • 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(&...
piruthivi raj's user avatar
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 ...
excel_zm's user avatar
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 ...
Hamad's user avatar
  • 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" ...
mapperx's user avatar
  • 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 = ...
Loïc Dutrieux's user avatar
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 = ...
Mahfoud B.'s user avatar
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: '&copy; <a href="https://...
blogob's user avatar
  • 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 ...
SomeOne's user avatar
  • 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 ...
Nikolay Zolotov's user avatar

1 2
3
4 5
83