Questions tagged [leaflet]
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
4,056
questions
0
votes
1
answer
331
views
Using Himawari 8 in Leaflet.js from NASA GIBS
I'm currently developing a Leaflet based map webpage and want to display satellite imagery, specifically from the Himawari 8 satellite. NASA have the GIBS api which appears perfect for my purposes. ...
CommunityBot
- 1
0
votes
2
answers
1k
views
Updating popup of a Leaflet Polygon
I am trying to update a popup for a polygon that I have drawn with Leaflet.Draw. Now I understand that to set a popup to a layer I just created, it's all fine. I can also get the id of that layer I ...
CommunityBot
- 1
1
vote
1
answer
476
views
Error while rendering Leaflet map on Shiny
I have been trying to reproduce a Leaflet map on a Shiny webpage. I have made this code so far:
library(shiny)
library(shinydashboard)
library(leaflet)
library(rgdal)
library(dplyr)
library(DT)
Map &...
CommunityBot
- 1
0
votes
1
answer
249
views
How to add an accordion inside a leafletjs popup marker?
I would like to include a collapsible button/accordion inside a leaflet pop-up marker. I have added a button, +css, +js, but It is always closed despite clicking it. Has anyone experienced this issue. ...
CommunityBot
- 1
0
votes
0
answers
251
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
1
answer
495
views
Leaflet.VectorGrid throws error Input data is not a valid GeoJSON object
This is a cross-post from SO. I am trying to use Leaflet.VectorGrid.Slicer, but I am getting error:
Input data is not a valid GeoJSON object
codesandbox
VectorGrid.js
import { useEffect } from "...
CommunityBot
- 1
1
vote
2
answers
2k
views
Changing Color and Opening Label on Hover
I'm initializing GeoJSON markers in Leaflet, and I'm trying to change the color and open a label on mouseover. Upon mouseout, I want to change back to the default color and close the label. However, ...
CommunityBot
- 1
3
votes
2
answers
831
views
Overriding default popup anchor in Leaflet GeoJSON polygon?
By default popups open wherever you click within the boundaries of polygons in Leaflet geojson layers. Here's an example:
JsFiddle
I would like to anchor the popup either:
so it opens in a specific ...
CommunityBot
- 1
2
votes
1
answer
95
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 ...
- 21.4k
1
vote
1
answer
195
views
What routing system support off-road routing for Leaflet integration?
I have a collection of regionally specific linestrings and multi-line strings which are off-road paths. I would like to be able to integrate these into a Leaflet routing systems which would ...
CommunityBot
- 1
2
votes
1
answer
120
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" ...
- 13k
3
votes
2
answers
6k
views
Animated lines and line styles in Javascript [closed]
I'm using Leaflet library and Mapbox. I need to create animated line from one city to another, slow motion "travelling" from one point to another point.
Is that possible in javascript and ...
- 64.6k
1
vote
1
answer
3k
views
Adding a position.watch and update feature to live map with leaflet.js?
I have an app working in node.js that locates a user and plots their location on a leaflet map. When others connect it shows them too. It keeps their marker live as long as they move the mouse.
I ...
CommunityBot
- 1
0
votes
1
answer
1k
views
Creating layers depending on a property?
I have a .js file with coordinates for internships:
var internships = [{
"features": [
{"type":"Feature","properties":{"category":"entretient","Name":"green"},"geometry":{"type":"Point","...
CommunityBot
- 1
2
votes
1
answer
479
views
Cannot add Leaflet markers to map iterating through CSV
I have data from a CSV that I want to turn into markers using the latest version of LeafletJS. I can successfully turn the CSV into an array of js objects and have confirmed that the latlng ...
CommunityBot
- 1
1
vote
0
answers
85
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": [
...
- 3,349
1
vote
0
answers
58
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 ...
- 19.7k
29
votes
3
answers
43k
views
Click Events with Leaflet and GeoJSON
How do I attach a click event to a GeoJSON that then executes an Ajax function when clicked. I looked into onEachFeature but that executes when the GeoJSON is loaded, not when clicked, thus executing ...
- 29.8k
1
vote
2
answers
300
views
Calculate TMS tile coordinates (XYZ) for a given Lat/Lng pair in EPSG:27700 projection?
I am new to GIS in general and struggling with the correct approach to achieve my goal.
I have a list of 100,000 or so Lat/Lng taken from a GPS and I need to retrieve the singular tile for each of ...
- 13k
0
votes
1
answer
224
views
Leaflet OS Mastermap raster tile layer max zoom level 14?
I have a leaflet map displaying OS premium raster tile service Leisure_27700 ZXY. I would like the max zoom level to be 14. It worked perfectly down to zoom level 13. I tried to extend it to zoom ...
CommunityBot
- 1
0
votes
0
answers
31
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?
- 19.7k
3
votes
1
answer
255
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 ...
- 21.4k
0
votes
0
answers
192
views
Leaflet to GeoJSON circle not working
My Leaflet draw plugin doesn't export circles properly. They come as points instead. I tried to find a quick solution for it and this one:
https://gist.github.com/codeofsumit/...
- 19.7k
1
vote
0
answers
251
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-...
1
vote
0
answers
126
views
Print Leaflet map in PDF using django-wkhtmltopdf
I have a Django app I am trying to print a Leaflet map in PDF using django-wkhtmltopdf, but the map is not rendering correctly. I even try to give more time to the 'javascript-delay' parameter but is ...
- 19.7k
6
votes
2
answers
13k
views
Load a raster file directly in Leaflet
Is it possible to load a raster file (e.g. GeoTIFF or Erdas img) directly into a Leaflet map? If so, can you guide me to the correct documentation or method to do this?
I am trying to do this with the ...
- 13k
0
votes
0
answers
15
views
Does Leaflet support GeoTIFF ImageOverlay? [duplicate]
I am planning to use Leaflet to display my raster images. I see the example usage in ImageOverlay is using a .jpg format.
Would it also be possible if the image is GeoTIFF, .tif format?
I am just ...
- 13k
1
vote
1
answer
543
views
Dividing GeoJSON into two separate layers in Leaflet
Basing on this example:
http://www.gistechsolutions.com/leaflet/DEMO/sports/sports.html
I would like to do the same in my case, however, my way is slightly different:
Firstly I have made a major ...
CommunityBot
- 1
1
vote
1
answer
60
views
Leaflet - populate circle when clicking on the marker - based on csv data
I've produced Leaflet map based on the CSV data as per the project below:
https://github.com/HandsOnDataViz/leaflet-map-csv
https://handsondataviz.org/leaflet-maps-with-csv.html
It works well, ...
- 21.4k
6
votes
2
answers
25k
views
How to edit an existing layer using leaflet?
I am used to working
with OL3 and I wanted to try using leaflet and see if it is as powerful as OL. I loaded a map with some data from a GeoServer WFS layer using this tutorial from Georepublic.
var ...
4
votes
1
answer
331
views
Python folium add marker in random place
I would like to add a marker in a random place in Python folium.
I found the example, which I would like to implement, which is here:
http://kody.wig.pl/javascript/dodawanie-przesuwanie-i-kasowanie-...
0
votes
0
answers
149
views
Use ArcGIS basemap vector tile in Leaflet
I want to use this on my school project, I searched many ways but still not.
https://basemaps.arcgis.com/arcgis/rest/services/OpenStreetMap_v2/VectorTileServer From https://www.arcgis.com/home/item....
- 19.7k
3
votes
1
answer
2k
views
How to show marker information into a tab
I have a lot of information that I want to show on a Leaflet Popup. For these type of markers (I have four different layers and each marker show different information) I have three elements:
General ...
- 21.4k
0
votes
0
answers
28
views
Popup with multiple information different tabs [duplicate]
I have a lot of information that I want to show on a Leaflet Popup. In my case I have a GeoJSON file with different points. However in my case one point represent the same location, but it was ...
- 19.7k
4
votes
2
answers
3k
views
Stop Leaflet event propagation?
I have a feature layer and some pins on it, with mouseout, mouseover events callbacks on the feature. When the mouse is over the pin icon, that triggers mouseout event (mouseout from the feature layer)...
- 111
0
votes
0
answers
146
views
Export selected area in Leaflet Folium
I am using Folium library with Python to visualize some data (markers, polylines...) where those objects have some values in popup window. I am looking for a option to select an area (for example by ...
- 3,349
3
votes
2
answers
4k
views
Leaflet - How to show feature properties in a box that is not a popup?
Popup giving features properties are interesting but I would like to make a side bar where properties of a clicked feature would show.
I've got the traditional code for displaying geojson features ...
- 3,543
0
votes
0
answers
149
views
Leaflet on-click circle doesn't work in Python folium
I would like to make the Leaflet circle an on-click feature in my Python folium map.
Unfortunately, the code returns nothing despite no information from the console.
range_js = """
$(...
- 3,759
0
votes
0
answers
119
views
JavaScript fetch function fails to get .txt file
I'm creating a web page with a Leaflet map, and when clicking on a certain marker on the map, information about the location appears in a div beside it.
I can update this information directly in the ...
- 64.6k
-5
votes
2
answers
1k
views
Leaflet-JS Not sure what is wrong with my script below [closed]
I have posted a screenshot of my index.html and JavaScript files. The issue is that no webmap is displayed. Only the head (h1 in my html) is visible to me. Any thoughts on this?
[
- 9
0
votes
1
answer
345
views
Leaflet displaying a single GeoJSON layer even though multiple are supplied
I have a simple Leaflet map and I am trying to display multiple point layers. I know this question has been asked quite a few times and I have tried every single solution but didn't work.
I get valid ...
CommunityBot
- 1
2
votes
1
answer
373
views
Trying to switch information from popup to sidebar
How can I move the information from a popup to a sidebar? On the cluster click I don't want a popup to show up, instead I want the information to be shown in a sidebar.
With the polygon layer I could ...
- 856
0
votes
1
answer
131
views
Converting Turf Polygon to Leaflet Polygon
I'm using Geoman and Turf to handle polygons on my map. In order to add a new functionality, I have to transfer an element from a function where it's typed as a Turf Polygon to another function which ...
- 21.4k
5
votes
3
answers
7k
views
MySQL to GeoJSON - Formatting Issue
I'm trying to make a select on a mysql table and then write it out to a geojson file. I'm getting close but there are a few issues. Here's what I have so far:
<?php
require("dbinfo.php");
// ...
- 64.6k
3
votes
1
answer
97
views
Changing color of newly created line feature on mouseover in Leaflet?
How to highlight one feature on hover from a featureGroup layer?
It's easy when the layer is predefinied and static - I could write a highlighFeature and onEachFeature functions and pass them as ...
- 21.4k
8
votes
3
answers
11k
views
How to make both hover and click popup work?
I am pretty new to all of this.
I want to have a hover/mouseover AND click popup work on my geojson layer.
Here is the code so far, but I don't know where to include the hover without messing up the ...
- 1
0
votes
0
answers
142
views
Python folium: ValueError: Marker location must be assigned when added directly to map
I am working on customizing the marker in Folium
The initial link, from where I took the approach is here:
https://github.com/python-visualization/folium/blob/main/folium/vector_layers.py#L318
now, my ...
- 3,759
0
votes
0
answers
77
views
How to make selection of multiple grids via mouse click and hover event on leaflet map
I am working on a project where I need to create a map and show grid on map just like the website https://app.nextearth.io/. I was able to create grid using below code but don't know how to create ...
- 111
2
votes
1
answer
137
views
Leaflet VectorGrid - circle markers cut off at border in custom implementation
I am extending a custom class from Leaflet.VectorGrid in an effort to optimize rendering high-volume data on a leaflet map, through our api. My chosen tactic is to create a grid, where each tile is ...
- 21.4k
1
vote
2
answers
159
views
Leaflet and GeoJSON coordinates usage
I have a GeoJSON object “feature” stringified as :
{
"type": "Feature",
"properties": {
"id": 1039215298,
"version": 1,
...
- 372