Questions tagged [leaflet]

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

Filter by
Sorted by
Tagged with
1 vote
1 answer
60 views

Remove previous features from GeoJSON layer on filtering data in Leaflet

The following block corresponds to a temporal slider that should update (add and remove) a set of points in a leaflet map. The code below is currently working as I want, it can add the points when the ...
PedroMTG's user avatar
0 votes
1 answer
53 views

Problem with GeoJSON layer method .addData in Leaflet

Trying to implement a time range control in some point on a Leaflet map. I tried to defined the Max and Min values, as a GeoJSON layer already open in the map 'todos_os_pontos'. Then I tried select (...
PedroMTG's user avatar
0 votes
0 answers
70 views

Polygon grid and raster layer do not align R

I noticed that polygons and raster cells are not perfectly aligned. Why the border of the cells and the colors do not align perfectly? There is a little misalignment (the colors do not change exactly ...
baccione's user avatar
0 votes
1 answer
323 views

Way to hide the OpenStreetMap country boundaries in the sea in Leaflet

Is there a way to remove the maritime country borders on a map? (Without using Mapbox). I'm new to leaflet and openstreetmap so may be overlooking something obvious. How it currently looks: What I'd ...
Space's user avatar
  • 109
0 votes
1 answer
40 views

Why L.vectorGrid.protobuf return undefined?

I have this component: import L from 'leaflet'; import { useEffect } from 'react'; import { useMap } from 'react-leaflet'; import { useSelector } from 'react-redux'; import { selectLayersStatus } from ...
Kambei's user avatar
  • 170
0 votes
0 answers
252 views

Leaflet dynamically change marker color based on value passed to function

I have some JavaScript code that looks like the following: <script type='module'> import { circleOptions } from './colors.js'; ... ... value = do_math_on_some_number(number) const circle = L....
Miss_Orchid's user avatar
0 votes
0 answers
47 views

Choropleth map layer not displaying in Leaflet

I have a web map showing various selectable features (point, lines, polygons) and am trying to add a choropleth layer of U.S. state data. The layer displays in the legend where I can toggle it on/off, ...
MapAnalyst's user avatar
0 votes
1 answer
77 views

Handling layer events according to their z-index in Leaflet?

I am adding layers to a map, one which uses this third party Leaflet extension for UTF grids: https://github.com/danzel/Leaflet.utfgrid. The layer with the UTF grid has a higher z-index and has a ...
Rob Dennett's user avatar
0 votes
0 answers
168 views

React Leaflet, convert GeoJSON coordinates to Leaflet format

I am trying to plot a GeoJSON using Leaflet. I know the order of co-ords is different for GeoJSON and leaflet ([long, lat] vs[lat, long]). Here is my GeoJSON file : { "type": "...
John's user avatar
  • 1
0 votes
1 answer
99 views

About CRS and map origin setting, What is their relation and math equation in leaflet.js via using proj4leaflet.js

I meet a problem about CRS function and map origin setting in leaflet. I use proj4leaflet.js as the basic CRS function, and then after setting the origin of crs and resolution, I can get the correct ...
abramhum's user avatar
  • 125
1 vote
1 answer
131 views

Setting custom SVG icon for external GeoJSON point layer in Leaflet

I am attempting to make a public transport map of Berlin within Leaflet. I have exported layers from QGIS as GeoJSON and edited the file and added a var within a text editor. I am having some ...
Gregory C's user avatar
  • 147
0 votes
0 answers
29 views

leafsync strange behaviour - duplicate maps when syncing two different maps

I have a bizarre thing going on with leafsync::sync. I have two maps generated using mapview function in r. The underlying data is in sf format map1 map2 As you can see they are two different maps ...
rm167's user avatar
  • 459
1 vote
1 answer
248 views

Disabling Geoman edit mode for certain layers in Leaflet?

Cross post from SO. I use leaflet geoman for editing lines and leaflet-arrowheads for rendering lines direction. I am looking for a way to disable leaflet geoman edit mode for layers generated by ...
Matt's user avatar
  • 85
1 vote
1 answer
145 views

Retrieve geometry from GeoJSON to L.polygon in Leaflet?

Since I have a problem with Leaflet draw, which, unfortunately is discontinued, I'm trying to rely on Leaflet editable for editing: before I learn how to save edits, I just want to retrieve a polygon ...
Vincent Dc's user avatar
1 vote
1 answer
130 views

Draw line between China and South America through the Pacific Ocean in Leaflet

I am relatively new using Leaflet.js. I want to draw a polyline in Leaflet.js between China and South America through the Pacific Ocean. Instead, I can only draw this line through both places through ...
Carlos Muñoz's user avatar
0 votes
1 answer
146 views

Using Overpass Turbo output as GeoJSON input to leaflet.js [closed]

I'm trying to get GeoJSON using Overpass Turbo for a number of roads within a certain area. The input to Overpass below produces a map with the selected roads highlighted and what looks like JSON, ...
Chris's user avatar
  • 73
0 votes
1 answer
224 views

Adding title for each part of layer control in Leaflet

I create a Leaflet map containing some base maps and overlay maps. I want to organize the layer control so that these two parts separated by a title, so I want to have such a view on my layer control: ...
Solmaz's user avatar
  • 149
3 votes
2 answers
268 views

Create wider selection area to select lines on map using LeafletJS

When there are thin lines on the map, it is very difficult to click them with the mouse cursor. So is there any option to wider the selection area for lines in LeafletJS, without increasing the line ...
Kishor's user avatar
  • 536
2 votes
0 answers
259 views

How to rotate folium CustomIcon

I have dataframe; it has name, latitudes, longitudes and heading. Heading value will between 0 and 360. According to the angle we need to rotate. I printed my dataframe items inside folium map in ...
heshjse's user avatar
  • 121
1 vote
0 answers
129 views

Using the L.CRS.Simple in Leaflet, can I make my map wrap?

I'm using Leaflet with L.CRS.Simple and a L.imageOverlay custom non-earth map (no tiles). I'd love to wrap longitude around the image's bounds, but that doesn't seem to be supported in this CRS, or is ...
Dan's user avatar
  • 21
0 votes
1 answer
105 views

Only blue geometries shown for protobuf vector tiles in Leaflet

I'm trying to use my vector tile server with Leaflet. I have this index.html: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ...
Kambei's user avatar
  • 170
0 votes
0 answers
671 views

Developing Heatmap using Next.js and react-leaflet

For a research project, I was tasked to develop a GIS very similar to https://cwfis.cfs.nrcan.gc.ca/interactive-map. This is the first time I will develop a GIS-related web application and I do not ...
Sonny's user avatar
  • 13
0 votes
1 answer
144 views

Limit map zooms to integer zoom level after initial fractional zoom in Leaflet?

I have a map that defaults to a fractional zoom level for a particular reason. (I need to keep it this way if at all possible.) However, whenever the user zooms in or out by any means, I want the map ...
ysi_d's user avatar
  • 25
0 votes
0 answers
54 views

Combined style for GeoJSON line in Leaflet

In leaflet I have a GeoJSON of line type. I want the latter to have two styles, the solid color in the background and a dotted line inside, as shown in the following image: In the image, I have two ...
MrShaggy87's user avatar
0 votes
1 answer
93 views

Zoom to layer bounds on popup close in Leaflet

I have a GeoJSON data layer in a small Leaflet project and initially I zoom to its bounds. map.fitBounds(dataLayer.getBounds()); I bind popups to each feature and zoom to the clicked feature when the ...
winnewoerp's user avatar
  • 1,508
1 vote
1 answer
76 views

Initial zoom to GeoJSON object from file (.js) in Leaflet

I am building a viewer with Leaflet API and OpenStreetMap base. I want that when I enter this viewer it shows me immediately in the initial visualization the extension of my layer that I am using. For ...
MrShaggy87's user avatar
1 vote
1 answer
123 views

L.geoJSON layer - it seems to add a layer for every feature rather than being a group?

I have a topojson file that describes 2400 features. When I add it to the map and then mapObj.eachLayer(function(layer) { console.log(layer) } I wind up with 2400 layers being printed to the ...
MKF's user avatar
  • 571
0 votes
1 answer
120 views

MarkerCluster element popup does not appear when clicking a spiderfy element, instead unspiderfy is triggered in Leaflet

I have created a custom popup that appears whenever an element on my map is clicked. However, when spiderfy happens (when a marker cluster is clicked and the map cannot zoom to a level that would ...
ysi_d's user avatar
  • 25
1 vote
0 answers
254 views

MarkerCluster does not zoom when cluster clicked if it cannot reach a zoom level that will separate elements. How can I check for this? [closed]

I have a map with a maximum zoom level of 18. It is possible to have data points that are so close together that they are still clustered at zoom 18, and it is also possible to have multiple data ...
ysi_d's user avatar
  • 25
1 vote
1 answer
97 views

Generate popup message which shows the coordinates on drawn and edited polygon in Leaflet?

I am using Leaflet map. I am trying to have a popup message which shows the coordinates on drawn polygon. However when I am trying to edit the drawn polygon using the edit layer the coordinates in the ...
dines dayrit's user avatar
1 vote
0 answers
265 views

Click feature doesn't work dash-leaflet

I've created one dashboard with spatial data and plot it with dash-leaflet package. The main screen above: The goal is create a popup filled by picture map like it: I put the monitoramento-dissolve ...
Diogo Caribé's user avatar
1 vote
1 answer
130 views

Creating a HTML webmap using both ESRI JavaScript API and Leaflet

I have created an ESRI JavaScript based map. It is reading in a webmap from my ArcGIS Online account and works as is required. I would like to include some additional context to my webmap through the ...
Keagan Allan's user avatar
  • 3,706
2 votes
0 answers
299 views

Mbtiles to plot in map using react-leaflet

I am new to map technology and I am using react-leaflet to plot GEOJSON to map. It was all going well but then I m facing load time with massive GeoJSON data, so need to convert GeoJSON to mbtiles. ...
Silen's user avatar
  • 21
0 votes
0 answers
37 views

Query Oracle for new data based on properties of visible markers?

I'm very new to R/Shiny/Leaflet. I have a barebones working example where I can display points on map based on their lat/long in a table I pull from Oracle: siteData <- conn %>% tbl(in_schema(&...
Eddie Rowe's user avatar
1 vote
2 answers
194 views

Prevent automatic zoom on location found event in Leaflet?

I have created the beginnings of a web app which will track locations in real time. It's all working, but every time the location updates, the zoom level refreshes to something that seems pre-defined. ...
quilkin's user avatar
  • 113
1 vote
1 answer
412 views

Project React-Leaflet map in different projection

I am working on a college project that deals with MAPS. Our project is related to mapping the location of stadiums for the recent FIFA worldcup. The tileserver url provided to us is custom. When I use ...
Antonius Carvalho's user avatar
0 votes
1 answer
73 views

Leaflet.markercluster with GeoJSON via AJAX [closed]

I am pretty new to this. Have found a similar question here but I have been unable to implement it in my own case. The markers show up just fine but no clustering happens. function onEachFeature(...
SoranDK's user avatar
  • 11
0 votes
0 answers
375 views

Uncaught TypeError: L.geoJSON is not a function

I am new to Leaflet and trying to add popup in leaflet map. I saw the example in leaflet website to add geojson polygon and popup on it. However when i tried to run it shows error: "Uncaught ...
Akhil Kumar's user avatar
0 votes
1 answer
161 views

Resizing Window leads to Zoom = 0 in Leaflet

I am working on a small hobby project for the mobile phone. Everything works fine except when I change the windows size (eg. by flipping the orientation of the smart phone). As soon as I change the ...
naticarl's user avatar
0 votes
0 answers
75 views

Using iPhone coordinates with Leaflet

I'm working on a Leaflet map using Chrome on a PC and everything works fine when I use my computer or Android phone. But when viewed in Chrome on an iPhone, the coordinates get shifted, like below. . ...
mmaguigan's user avatar
0 votes
1 answer
80 views

Property e.propgatedFrom.feature not available in marker cluster click event in Leaflet

In a Leaflet map, when a point feature is clicked I want to capture its attributes and pass them onto some variables. The point feature is part of a cluster. The leaflet marker cluster is sourced as ...
user3072602's user avatar
0 votes
0 answers
89 views

How to format the text and font color or background in a React-Leaflet Overlay component

I am using the react-leaflet library and am using the LayersControl components. I have numerous categories where I would like to format the text and color of the font to match the color of the that ...
zakariah1's user avatar
  • 201
0 votes
1 answer
417 views

Need to draw exact polygon of political boundary

I have a map in Leaflet: <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="...
Seba's user avatar
  • 5
1 vote
1 answer
221 views

Changing turf.js buffered polygon corners to sharp corners in Leaflet?

I'm using Turf JS to make a polygon bigger with 10 meters: var buffered = turf.buffer(polyGeoJSON, 10, { units: 'meters' }); and after, I'm adding it to the map var outerBuff = L.geoJSON(buffered , { ...
LAffair's user avatar
  • 255
1 vote
1 answer
185 views

Setting bounds to combination of two GeoJSON layers in Leaflet?

I am creating an app with django, geodjango and Leaflet, I am also using django-geojson and django-leaflet. I manage to insert on a map two features that contain points. But I am getting problems ...
Ernesto Ruiz's user avatar
1 vote
1 answer
112 views

Determine loading state of base map layers in Leaflet?

What is the JavaScript command to know the loading state of the current layer? I'd like to know is the layer is loading, with 'true' or 'false', when the page loads or when I move the map. This ...
Vincent Dc's user avatar
2 votes
0 answers
175 views

TIFF image layer doesn't show on Leaflet map

Trying to display an image as layer on a Leaflet map but having some trouble. I don't know what I'm doing wrong. %pip install segment-geospatial groundingdino-py leafmap localtileserver import ...
Stewie's user avatar
  • 21
0 votes
0 answers
85 views

Way for popups to be shown when using the clustering feature of QGIS2Web (Leaflet)

I have been making use of the QGIS2Web Plugin (current version 3.16.0) to create interactive maps (Leaflet) with great success thus far, however I have now discovered an issue when I use the "...
Caties96's user avatar
1 vote
1 answer
142 views

Displaying streaming video in popup Leaflet?

I have a GeoJSON with CCTV camera tags and links to m3u8 streaming video. I'm trying to open a streaming video from surveillance cameras in a popup on Leaflet, but nothing comes out. I don't know much ...
Nikolay's user avatar
  • 19
0 votes
1 answer
1k views

Setting marker cluster icon color dynamically in Leaflet?

In a Leaflet map, when a school point is clicked it passes an id of that school and adds a student point layer specific to that school. The point layer is rendered on the map as marker cluster. So, ...
user3072602's user avatar

1
2
3 4 5
83