Questions tagged [leaflet]

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

Filter by
Sorted by
Tagged with
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 ...
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 ...
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 ...
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 ...
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 ...
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(...
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 ...
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 ...
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 ...
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 ...
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=&...
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: ...
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. ...
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(...
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://...
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 ...
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, { ...
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 => { ...
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 ...
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 ...
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) ...
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:...

1 2
3
4 5
79