Questions tagged [leaflet]
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
3,906
questions
0
votes
0
answers
79
views
Leaflet: Illustrate distance along path, like "measure distance" in Google Maps
In a map in a web application, I would like to illustrate distance along a path, like how it is done with the measure distance tool in Google Maps (see attached image).
Is there a way to do this in ...
- 101
0
votes
0
answers
59
views
GeoServer Geofence WKT WFS problem
I have more than 400 users, each has its own layer view area on the map, I was able to implement this using Geofence, I added layers to the layer group in GeoServer, and configured roles in Geofence ...
- 11
1
vote
1
answer
241
views
WMS GetFeatureInfo in Leaflet to get selected polygon
I'm using Leaflet with WMS layers served by GeoServer.
The layers are displayed correctly on the map, also over a OSM background.
I want to catch the user click on the map and by using the X-Y ...
- 299
0
votes
1
answer
171
views
Generating a bounding box for leaflet is inaccurate
I am trying to generate a bounding box for an image with Leaflet, based upon 3 criteria:
Starting Latitude and Longitude (the center of the bounding box)
My value for this is 38.9761, -77.4875
...
- 53
0
votes
0
answers
90
views
How/where to add script to enable pan/zoom and information pop-ups to storymap
I haven’t work with HTML/JavaScript and Leaflet maps for at least two years and I am attempting to create a storymap (non-ESRI) using a template that I located on GitHub. It has most of the ...
- 31
0
votes
1
answer
81
views
Leaflet, L.WFST : show a Popup for the attribute
could you please help me on this ?
It's not showing the Attribute in Bindpopup
of a map in Leaflet
with this Javascript: https://mappingforyou.eu/javascript/leaflet-wfst.src.js
function onEachFeature(...
- 336
0
votes
0
answers
40
views
GeoServer WMS mastermap zoom issue on Leaflet
I have a master map consuming it from the PostGIS database via GeoServer. As per understanding if we create a GeoServer layer from PostGIS db then that layer automatically is treated as WMS. But the ...
- 53
1
vote
0
answers
89
views
Leaflet t.addlayer not a function
I am trying to implement the leaflet-panel-layer plugin and customize the included overlay to my needs. The original code uses a geojson formatted as js and I use a basic js marker list (which I load ...
- 73
1
vote
1
answer
212
views
Apply layer control to custom markers in a Leaflet map
I have a Leaflet map with custom markers.
Recently I added Layer Control so that I can make use of a legend to filter the markers.
I've managed to add the legend however it appears to recreate all the ...
- 113
1
vote
1
answer
109
views
TypeError in showResult for leaflet-geosearch
I'm using leaflet-geosearch. When I click on an address from the search bar, I get the error:
Uncaught (in promise) TypeError: Cannot convert undefined or null to object
at Function.keys ()
at ...
- 11
1
vote
0
answers
366
views
Custom Layercontrol Overlay Leaflet / React Leaflet [closed]
I am new to React Leaflet and have some experience with Leaflet. Now I am trying to build a custom Overlay to manage the markers in my map, and came accross this example which seems to be perfect for ...
- 73
0
votes
1
answer
201
views
Load Leaflet ImageOverlay with center point instead of corners
I have an image file that I am able to overlay perfectly fine onto my Leaflet map with this code:
var initLat = 38.9761;
var initLon = -77.4875;
var imageUrl = '/weather/nexrad/radar.png';
var ...
- 53
1
vote
1
answer
105
views
Leaflet.js: draw objects into PostGIS database, through Leaflet.draw, WFS-T plugin, GeoServer
I'm trying to draw objects from Leaflet (Leaflet.draw) into a PostGIS database. From https://www.npmjs.com/package/leaflet-wfst it's the Flexberry one if I'm right
I enabled JSONP in GeoServer, I ...
- 336
2
votes
1
answer
158
views
Place tiles in Leaflet map
I use leafletjs to make a interactive map. I have a fixed list of URLs to use and I can not change the URLs. I want to make a map with those tiles always in the same place and in the place I want them ...
- 23
1
vote
1
answer
198
views
Changing label position based on circle marker radius in Leaflet?
I have a circle marker var circle = L.circleMarker(latLngCoords, { radius: 5, weight: 1, color: 'black' }).addTo(map); that changes the radius based on the map zoom:
map.on('zoomend', function (e) {
...
- 221
0
votes
1
answer
86
views
Is there a limit on the number of polygons shown by GeoJson on Leaflet?
I have 15,811 block groups of Texas converted as GeoJson. I am trying to show them using Leaflet.js. Surprisingly when I use all block groups, I cannot show them on index.html. What I get is the ...
- 28
0
votes
1
answer
60
views
Leaflet Ruler check if the ruler is in use
I don't have much experience with Leaflet and I'm using the ruler from here. I'm trying to find out if it's in use when the map zoom changes.
var rulerOptions = {
position: 'topright',
...
- 221
0
votes
1
answer
69
views
Using Leaflet.motion plugin on geometry returned by WFS service?
I'm back with my Leaflet.motion service because I'd like to link it to an existing WFS service for easier and live updating.
The Javascript plugin for WFS and Leaflet motion are:
<script src=&...
- 336
2
votes
2
answers
861
views
Changing marker icon on click and then back to original state when click elsewhere in Leaflet?
I'm trying to get this function on my custom Leaflet map https://rodadagua.netlify.app/
I've found some very close examples and questions on here but being a complete novice unfortunately I have no ...
- 25
0
votes
2
answers
286
views
Using GeoJSON as input to leaflet.motion plugin in Leaflet
I'm interested by the script Leaflet motion.
I tried to update the code to add a custom GeoJSON created from QGIS or any tool.
But the current error is :
leaflet.motion.min.js:9 Uncaught TypeError: ...
- 336
1
vote
1
answer
214
views
Adding GeoJSON layer to a Layergroup so that it shows as radio button in layer control?
I want to display both the basemaps and the overlaymaps with radio buttons in my LayerControl. I tried this via Layergroups and ran into some difficulties there.
I have two GeoJSON layers that get ...
0
votes
0
answers
119
views
Deselecting features when zooming to certain zoom-level in Leaflet
I am currently setting up a Leaflet map. I have a GeoJSON-layer and I filter it at a certain Zoom-level. So when I zoom out all of Europe is showing and when the Zoom-level is greater than 10 some ...
1
vote
1
answer
250
views
Adding labels to first and last joint in polyline using Leaflet
I am new to Leaflet, I am currently trying to add two labels, at the first and last joint of my GeoJSON polyline. I tried to open tooltips directly on map and adding markers with coordinates and a ...
- 271
0
votes
0
answers
114
views
Display features OSM buildings
Using Leaflet, I've installed OSMBuildings, yet I'm unable to display buildings features although it's allowed on https://osmbuildings.org/
It seems like there is a latitude and longitude once we ...
- 1
0
votes
1
answer
68
views
Access WMS server error message in Leaflet TileLayer.WMS
I am loading WMS maps using react-leaflet's WMSTileLayer.
Depending on the layers loaded, the image appears or not.
When the image is not loaded, I have found that Leaflet returns a bunch of tile ...
- 155
2
votes
0
answers
405
views
Div on top of leaflet map [closed]
How can I make the text appear on the map ? , I tried making the div relative and doing z-index=9999 but its still above it and not on top of it
1
vote
0
answers
289
views
Change state in popup button
I have a state called modal which by default is false and im trying to change the state with a button inside the popup but its stays false
import { MapContainer, GeoJSON, useMap } from "react-...
0
votes
1
answer
98
views
Leaflet map not aligning GeoServer TMS and not showing most layers
I uploaded a GeoTIFF in my store in GeoServer and when I tried to view it via TMS it simply did not show up. So I decided to try it out with some of the sample datasets and some of them showed up. But ...
- 63
0
votes
0
answers
170
views
Center tool tip on each country
I'm trying to center the tooltip with the name of the country so it will show at the middle of the country but they are all over the place.
import { MapContainer, GeoJSON, useMap } from "react-...
1
vote
0
answers
46
views
Django Leaflet Back-end Service for Map Screenshot
I am developing an application in Django using leaflet, i have a questionnaire that when user fill they type the address, and then using google address api, i fetch the address details e.g. lat/long.
...
- 2,245
0
votes
0
answers
29
views
Raster data is displayed in Ipyleaflet with a wide border
When I load my raster data into Ipyleaflet, they are displayed with a wide border, so that the background map can no longer be read correctly. When I download the data and view it in GIS this border ...
- 195
0
votes
1
answer
55
views
How to pass header with L.GeoJSON.AJAX
I'm looking for a way to pass header keys and values. It's not entirely clear how i should do it.
So this is the code, but the X api key part isn't working:
myGeoJsonLayer = new L.GeoJSON.AJAX(...
- 101
1
vote
0
answers
220
views
Loading shapefile data into L.shapefile says nodebuffer is not supported by this platform
I am having a shapefile that is converted to a Base64 string. I am converting it to a file and then trying to convert to arrayBuffer using 'FileReader' to fit the data to match (L.shapefile)
https://...
- 243
0
votes
1
answer
596
views
Leaflet Map moves to opened popups when zooming in (React-leaflet)
i wanted to open the popup Markers when the MapZoom is at a certain value ,i got the
mapZoom using the map.getZoom() on the zoomend Event , a state is set for the MapZoom when the user scrolls ...
1
vote
1
answer
393
views
FeatureGroup polygon and polyline cannot be edited with Leaflet-draw
I don't have much experience in Leaflet and I'm trying to learn from my mistakes. I have multiple polygons (just polygons) and some that have a polyline on top of it grouped as a featureGroup like:
...
- 221
0
votes
1
answer
152
views
Strange 404 error when loading Leaflet map [closed]
I set up a Leaflet map on our server with several layers tiled by the leaflet-geojson-vt plugin. On my local machine everything runs fine, but as soon as I start it up from the server and click on a ...
- 305
2
votes
1
answer
413
views
Detecting Leaflet layer type (react-Leaflet)?
I am using the EachLayer() Method to know how many and what Layers are in my Map now
mapView.eachLayer(layer=>{
console.log(layer)
})
const map = useMapEvents({
layeradd(e){
//...
1
vote
0
answers
211
views
Leaflet: intersection click event with Point
I am trying to catch intersecting features. So when a user clicks on the map I would like to identify all layers that has been clicked on, and show the menu - from which parcel the user wants to get ...
2
votes
2
answers
532
views
Change popup content with JavaScript
How can I dynamically change the HTML content of a Leaflet popup using JavaScript?
I have text in the popup that I want to change when it's clicked:
map_layer = L.geoJSON(countries, {
...
- 63
1
vote
1
answer
57
views
Count Features using WFST-Leaflet
I have basic point data and I want to count the number of points in the data. I am displaying the data using WFST-Leaflet since I need to also apply filters and this plugin seems like the cleanest ...
- 307
0
votes
1
answer
61
views
Implement plot purchases on fictional map [closed]
I have a high res fictional map (PNG) of a ancient city. How can implement it as a game where people buy plots on it?
I have an image with Dimensions - 2000 x 2000.
I Managed to use Maptiler and ...
1
vote
0
answers
83
views
Get GeoJSON from a VectorGrid.Protobuf layer on click event
I am trying to get the GeoJSON of a VectorGrid layer on a click event.
Something like this:
...
var vectorTile = new L.vectorGrid.protobuf(url, options).addTo(map)
vectorTile.on('click', e => {
...
- 11
0
votes
1
answer
144
views
Turn Leaflet Layers On or Off Based on Zoom Levels
I have a point layer that I'd like to turn off past a certain zoom level. It's being added with an AJAX request from json and calling the drawMap function I've seen many examples using 'zoomend' but I ...
- 33
1
vote
1
answer
202
views
Read geo-spatial data in R via Leaflet
I have some site boundary data as follow:
UNB_BDSB_SiBdry_v08_201028lico_25831.cpq
UNB_BDSB_SiBdry_v08_201028lico_25831.dbf
UNB_BDSB_SiBdry_v08_201028lico_25831.prj
...
- 113
1
vote
1
answer
226
views
Leaflet - add circle around mouse icon on draw
I'm a beginner in Leaflet and I have the draw control added for polygon drawing:
var drawControl = new L.Control.Draw({
draw: {
marker: false,
polyline: false,
rectangle: false,
circle:...
- 221
1
vote
1
answer
127
views
Leaflet geoJSON - function within setStyle()
I have 2 styling methods for countries on my map:
style_init() for the initial style of a country,
style_new() for when a country changes and I want to re-style it on the map:
style_init(feature: any) ...
- 63
2
votes
2
answers
82
views
Drag Scale on Leaflet?
Is it possible to drag the scale on a Leaflet map ?
L.control.scale({'position':'bottomleft', 'metric':true,'imperial':false}).addTo(map);
I used this possibility for a wind rose with this code
north....
- 175
0
votes
0
answers
42
views
How I can request a cached WMTS layer when Data Security is enabled for GeoWebCache?
I've got a WMTS layer stored in GeoWebCache of Geoserver for which the Data Security option is enabled.
I'd like to add this layer to a basic leaflet map by passing the basic authentication parameters ...
- 91
0
votes
0
answers
79
views
How do I take user input and apply to a GeoServer CQL filter using Leaflet?
I'm very new to any kind of coding so please bear with me.
I have a layer on GeoServer that I can apply a specific CQL filter to as shown below:
var wmsLayer = L.Geoserver.wms("http://localhost:...
- 111
1
vote
1
answer
335
views
Leaflet geoJSON tooltip coordinates
How can I manually set the coordinates for a tooltip in Leaflet with geoJSON?
This is how I'm adding it to the map:
layer.bindTooltip(country_name, {
permanent: true,
opacity: 1,
direction:...
- 63