Questions tagged [leaflet]
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
4,056
questions
3
votes
1
answer
585
views
Dynamically changing fillColor variables in leaflet
When I want to style a polygon using a property the traditional way is to assign a function that returns a style object. Within that object you assign the fillColor property to a getColor function
...
CommunityBot
- 1
1
vote
0
answers
31
views
Leaflet markercluster plugin doesn't display locations correctly
let sampling_location_layer=L.layerGroup().addTo(map);
var markers = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: false,
zoomToBoundsOnClick: true
});
fetch(url+sql)
.then(...
- 19.7k
1
vote
1
answer
346
views
How to make legend have no number overlap in Leaflet
I'd like my legend to go from 0-25 to 26-50 to 51-75 rather than what it is in the screenshot included.
How should I go about doing that?
function getColor(d) {
return d >= 75
? "#...
CommunityBot
- 1
0
votes
2
answers
2k
views
Pass Leaflet Draw Marker to Turf.js point
I am trying to dynamically supply turf.point([coordinate array]) with values from leaflet.draw markers.
I can only find hard coded examples for all turf examples.
I will demonstrate:
// Draw controls
...
- 64.6k
1
vote
1
answer
87
views
Polygons not showing when added to Leaflet map, may or may not show when page is refreshed
I am trying to create a map to which users can add layers from ArcGIS data. They click a button, which opens a modal. In the modal, they enter the URL of the ArcGIS layer, choose a colour for the ...
- 21.5k
1
vote
1
answer
368
views
Mapbox GL JS Equivalent to Leaflet LayerGroup?
Does anybody know of an equivalent to the Leaflet L.layerGroup in Mapbox GL JS? I can do this in leaflet:
var layerGroup = L.layerGroup().addTo(map);
And then if I want to add, say, a marker to the ...
CommunityBot
- 1
2
votes
1
answer
2k
views
L.control.sidebar is not a function
I have install leaflet-sidebar-v2 via npm. However when I try to simply initialize the side bar I get this error.
L.Control.Sidebar is not a function.
here is my index.html import scripts etc
&...
CommunityBot
- 1
3
votes
1
answer
73
views
How to apply the Four Colour theorem on GeoJSON feature collection with Leaflet
Imagine you have a GeoJSON feature collection of adjacent colored polygons presented in a Leaflet map; in the present case the parishes of the city of Lisbon
fetch('https://geoapi.pt/municipio/lisboa/...
- 21.5k
0
votes
2
answers
1k
views
Edit a shapefile with Leaflet.pm
I am new to Leaflet but so far so good. I managed to add the plugins I needed and they work. Except the shapefile editing.
I am using leaflet.pm to draw, snap, cut polygons (only polygons). I also ...
CommunityBot
- 1
0
votes
1
answer
1k
views
input data coordinates to database from input data inside leaflet js
i have a problem with my update data coordinates form leaflet popup. i just want to make edit form inside leaflet popup. if i click marker in a map it shown coordinate with input form, if the building ...
CommunityBot
- 1
1
vote
1
answer
74
views
Use data from JSON file with Leaflet GeoJSON marker
I have a JSON file that I am fetching from and I would like to use the 'LAT' and 'LON' attribute to place markers. The problem is I am unable to see any markers appear. I think it's because the file ...
- 21.5k
0
votes
0
answers
23
views
Add Locate button LeafletWidget() in GeoDjango
I created a new widget that inherent from LeafletWidget() . I'm trying to add Locate Button to the map but i keep getting errors.r
Widgets.py
from django.forms.widgets import Widget
from django.utils....
- 64.6k
1
vote
1
answer
731
views
Adding ArcGIS Online Feature Layer to Leaflet project
I have a hard time adding a simple feature layer from my ArcGIS Online account to a Leaflet project. This is my approach:
<script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"&...
CommunityBot
- 1
1
vote
1
answer
359
views
Leaflet styling geoJSON object radius by its feature property
I am trying to style geoJSON objects by its feature properties (Capacity). I tried 2 ways:
1:
function getWidth(Capacity) {
return Capacity >= 40 ? 12 :
Capacity >= 30 ? 8 :
...
CommunityBot
- 1
2
votes
1
answer
255
views
Struggling to find a shiny workaround to flush data from $finished while using EditMod in the mapEdit package
This is a crosspost from the mapedit issues github page here. I am attempting to build a shiny app that allows a user to plot a subset of data after selecting polygons using the mapedit package. While ...
CommunityBot
- 1
3
votes
1
answer
655
views
Update content of popup on a polygon click event in Leaflet?
I work with Leaflet.js v 1.7.1 and have stuck with a problem of updating popup content data of data The data set is on a local disk Currently I have a local set of data:
var data =[
{
type: &...
CommunityBot
- 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
1
vote
1
answer
358
views
Can't close custom popup at fixed position
I created this custom popup at a fixed position. When clicking a marker a popup opens, I'm able to close the popup and open another one clicking a different marker, then I'm not able to close the ...
CommunityBot
- 1
2
votes
2
answers
128
views
Changing size of leaflet.wms plugin popup in Leaflet?
I've created a webmap viewer with Leaflet and used the plugin leaflet.wms to call the WMS GetFeatureInfo service to query a map layer and return information about the underlying features. My code is ...
- 3,000
2
votes
1
answer
75
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 Leflet. 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 this ...
- 21.5k
2
votes
1
answer
73
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 ...
- 21.5k
0
votes
2
answers
2k
views
When using react-leaflet, for Marker it shows <img src=[object Module]>
When using react-leaflet with create-react-app, for Marker it shows <img src=[object Module]> in console after changing the default icon as given in here - https://github.com/PaulLeCam/react-...
CommunityBot
- 1
0
votes
1
answer
594
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
2
answers
1k
views
Leaflet map altering page scroll behavior
When scrolling down a page and past a leaflet map, if the user's mouse cursor is inside of the map, then the scroll bar stops and the browser window becomes stuck on the map.
Is there a way to ...
- 101
2
votes
1
answer
714
views
Incorporating Ordnance Survey map with other layers in Leaflet
I am trying to incorporate the Ordnance Survey layer into my Leaflet map. The goal is to enable it as another map layer amidst a few existing ones.
One of the code looks like this:
var link = L....
CommunityBot
- 1
1
vote
1
answer
152
views
Create a map survey and download the result
I have a shapefile of our state boundary. I want people to be able to drop a pin and add their names to the pin as an attribute. From there I would like to download all the pins as a shapefile and ...
CommunityBot
- 1
3
votes
1
answer
90
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 ...
- 19.7k
2
votes
1
answer
139
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 ...
- 235
3
votes
1
answer
234
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
211
views
ESRI-Leaflet updateFeature with a changed attribute or property
I'm updating a feature in ESR-Leaflet from a feature layer based on a call to a function. What I'm having trouble with is submitting this change to the feature service.
Currently I:
Get the feature ...
CommunityBot
- 1
1
vote
1
answer
31
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/...
- 59.3k
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
1
vote
1
answer
858
views
Leaflet ignore click event when popup is open
I am building a tool allowing to edit some GeoJSON props on a popup opened over the GeoJSON element/layer. When the popup is closed the props are shown in a fixed tooltip over the polygon.
However, ...
CommunityBot
- 1
2
votes
3
answers
8k
views
Download tile layers for use offline
I would like to download tile layers in this form:
{atlas_name}/{z}/{x}/{y}.png
Because I want to use them offline with my leaflet map.
However, I can't find what are the approaches to download ...
1
vote
1
answer
322
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
236
votes
4
answers
251k
views
EPSG 3857 or 4326 for Web Mapping
The discussion at What is the difference between WGS84 and EPSG4326? shows that 4326 is just the EPSG identifier of WGS84..
Wikipedia entries for Google Maps and OpenStreetMap shows that they both ...
- 64.6k
0
votes
2
answers
715
views
Passing GeoJSON API to Leaflet (proj4leaflet) map
I have created a geographical view of a point using Leaflet based on a coordinate system data. Since I'm using the coordinate system rather than lat and long, I'm using proj4leaflet for the conversion ...
CommunityBot
- 1
5
votes
1
answer
115
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 ...
- 64.6k
2
votes
1
answer
263
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
1
vote
1
answer
573
views
Drawing on Leaflet map give incorrect coordinate
I am using Leaflet and OpenLayers. When I draw a bounding box I am getting the correct lat and lon if I use OpenStreetMap tilelayer. When I switch to using EarthData tilelayer the bounding box is ...
CommunityBot
- 1
0
votes
0
answers
69
views
Call current position in onEachFeature leaflet
How can I call my current location inside onEachFeature in Leaflet.
It's working outside but I just want to call it inside L.Controler.Layers.
var cauayan = L.geoJSON(cauayan, {
onEachFeature: ...
- 21
-1
votes
1
answer
220
views
Calling function in linked JavaScript file on click - Leaflet Maps
I have a simple button which upon click will display a simple message
HTML code is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"...
- 19.7k
1
vote
0
answers
171
views
Refresh markers on moving map, Leaflet Photo (Leaflet Markercluster)
Some geotagged photos are saved in a Piwigo library, and this page aim is to put them into a Leaflet map only if they fit into the bounding box and are inside a certain category, and display a ...
- 21
0
votes
1
answer
275
views
Exporting geojson layer to file
I want to export the feature properties of a layer created with a function that takes the input of a user and then loops trough the .js file and creates a layer of markers, that correspond to the ...
- 21
0
votes
1
answer
385
views
Color-code a Leaflet GeoJSON polyline based on additional values [closed]
I almost repeated Color-code a Leaflet polyline based on additional values, e.g. altitude, speed, because after more than eight years, I have not found a satisfactory answer.
I need a gradien color of ...
- 21
1
vote
1
answer
100
views
Leaflet script error
I use Leaflet in my WPF C# program. I want to draw polygon on the map. I use System.Windows.Forms.WebBrowser for showing the map:
<Grid>
<WindowsFormsHost Name="wfhSample">
...
- 21
0
votes
0
answers
52
views
Using Leaflet layer control not accepting two L.control
I am using a L.control.search to search for points in GeoJSON file and create a layer with the points I´m seaching according to a features.properties.value, and dispay them on a map.
The var that ...
- 21
3
votes
1
answer
55
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 ...
- 28k
1
vote
0
answers
48
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
0
votes
1
answer
271
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