Questions tagged [leaflet]

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

Filter by
Sorted by
Tagged with
1 vote
0 answers
21 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://...
1 vote
1 answer
390 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 ...
0 votes
1 answer
14 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 ...
0 votes
0 answers
7 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 ...
0 votes
0 answers
8 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(...
0 votes
1 answer
57 views

Leaflet vectorigrid Uncaught Error: Unimplemented type: 6

I am using Leaflet vectorgrid plugin with a folder of .pbf files(created from a .mbtiles file using mbutil) to load a map using Apache server.However,when I load the map on the browser,I take this ...
1 vote
0 answers
33 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 ...
1 vote
1 answer
27 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: ...
3 votes
1 answer
2k views

Leaflet tiles are not loading for multiple Bootstrap tabs

I am making a web app for different areas using Leaflet library. I have different Bootstrap tabs, each tab opens a new map of a new area. The problem I am facing is that the tiles on the first tab ...
0 votes
0 answers
28 views

React-Leaflet - using GeoJSON style

I have a React-Leaflet map with geoJSON component and I am using a mouseover, mouseout, and click events. I am also using a style, after a click on the country in the map the click event will be used ...
0 votes
1 answer
21 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 ...
1 vote
1 answer
32 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){ //...
0 votes
1 answer
284 views

Show WMS information in popup on Leaflet map?

I need to view WMS information through a popup in Leaflet map. I tried with the code below, but the popup doesn't come out with information, but automatically downloads a file. map = L.map(document....
2 votes
1 answer
1k views

Leaflet search and popup at other position

In leaflet I want the popup on another position then the standard. So I created a div in which the popup-information is opens. countryLayer = L.geoJson(countryLayer, { onEachFeature: ...
0 votes
1 answer
121 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 ...
0 votes
1 answer
4k views

How to make the value showing on a Leaflet heatmap like this one?

I'm attempting to use leaftlet.js, and heatmap.js (github.com/pa7/heatmap.js/) following this example: But I want to show the value on the heat map like this crime page (with two options on: "Crime ...
1 vote
0 answers
45 views

Leaflet - add line for border

I pretty new in Leaflet and I have a polygon like L.polygon(poly, { title: 'test', colorfillColor: '#F16E60', fillOpacity: 0.5, weight: 20, color: '#F16E60', opacity: 0.5, fill: true}); poly = [ [...
0 votes
1 answer
57 views

GetFeatureInfo request from GeoServer responds with empty array

I am using the vue-leaflet and axios plugin in vue.js to make a GetFeatureInfo request to WMS tile layers served by Geoserver/Geowebcache for a certain point on the map, defined as marker. I am ...
0 votes
1 answer
139 views

Mappa.js Clear Canvas with Leaflet marker

I am using Mappa.js with Leaflet to generate a web map. However the function clear(); has no effect on a Leaflet marker, but only works with a p5.js element. Redrawing the marker over and over each ...
1 vote
1 answer
57 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
33 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 ...
0 votes
0 answers
41 views

Lines, styled as arrows, to qgis2web

I have the feeling that this question is somwhat self explanartory. But I still wanted to ask. So I draw a simple line with QGIS. I then render it as an arrow and make the beginning a little thicker. ...
0 votes
1 answer
47 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 ...
0 votes
1 answer
35 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
0 answers
18 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 => { ...
5 votes
2 answers
26k views

Go to the URL when clicked on Leaflet marker

I want to implement marker click event so when user click on marker it goes to url. Url is written inside an array (a[3]). However, this is my code which doesn't work, it always goes to the link of ...
1 vote
1 answer
29 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
35 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:...
1 vote
1 answer
214 views

Using ArcGIS Online PBF from FeatureServer in Leaflet

I'm looking for a way to use the PBF format from an ArcGIS Online FeatureServer in Leaflet. There are lots of examples using L.vectorGrid.protobuf with URLs for PBF tiles structured like {z}/{x}/{y}....
1 vote
1 answer
43 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
46 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....
1 vote
0 answers
6k views

Remove a Drawn Polyline from LeafLet Map

How can I simply just remove this polyline from the map? var pointA = L.latLng(From.lat, From.lng); var pointB = L.latLng(To.lat, To.lng); var pointList = [pointA, pointB]; var st_line ...
2 votes
1 answer
268 views

Editing a GeoJSON layer that I just added to the map

I have created a Leaflet map and added a GeoJSON layer like this. var map_rgb = L.map("map_rgb",{center: [userLat, userLon],crs: L.CRS.EPSG3857,zoom:'{{zoom}}',zoomControl: true,preferCanvas:...
0 votes
2 answers
4k views

Add more than one layer of GeoJSON data to Leaflet?

This is my code for loading one layer of .geojson data to Leaflet. The data is basically in the form of markers and it's demonstrating different location in Saudi Arabia. It's saved as "saudi_location....
1 vote
1 answer
49 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:...
0 votes
0 answers
20 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 ...
0 votes
0 answers
21 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:...
4 votes
4 answers
9k views

Adding WMS layer with CQL filter

I would like to add to my leaflet's web map layer from my WMS service (Geoserver), but I need to use CQL filter in GetMap link: localhost/geoserver/my_location/wms?(...)&CQL_FILTER=[...] Is it ...
1 vote
1 answer
17 views

Leaflet create GeoJSON polygon layer from Turf buffer on GeoJSON point layer while keeping the attributes

I have Leaflet GeoJSON point layer that I buffer with turf and add to the map. The code works well but I want to add the point attributes to the polygon layer but I am unsure of how to do to that. ...
2 votes
0 answers
24 views

How to clip GeoTiff according to shapefile using javascript?

Situation: I am plotting data provided in a GeoTIFF file on a map using Reactjs and geoTiff.js. An example of the GeoTiff files I am using is at the following link: https://drive.google.com/file/d/...
1 vote
0 answers
24 views

Leaflet - openPopup()

I just want to ask if there is some possibility of determining where the popup appears. In my case, when I mouseOver on some country on the map, some of the popup windows appear in a nonsensical ...
-1 votes
1 answer
50 views

Using tile server in Leaflet, how to find tile server urls?

https://gis.blm.gov/arcgis/rest/services/lands/BLM_Natl_SMA_Cached_without_PriUnk/MapServer/7 This is the info I want in a tile layer but I don’t know what URL to use. Can someone explain how I can ...
0 votes
1 answer
204 views

Problem with Nearest vertex and Shortest Path function in Leaflet

I am a new Leaflet user and I have challenge to get shortest path by pgRouting, GeoServer and Leaflet as a front end application. I followed this tutorial pgRouting + GeoServer + Leaflet JS as a ...
0 votes
1 answer
19 views

How to overlay BLM map in leafletjs?

I'm trying to show BLM land areas overlayed on a map. I'm not sure how to define it though: const map = L.map("map", { center: [9.082, 8.6753], zoom: 8, }); ...
1 vote
0 answers
41 views

Leaflet Polygon increase border transparent area

I pretty new in Leaflet and I'm trying to increase the border transparent area for a polygon. The red darker border needs to remain the same weight but the area that I've marked with green should be ...
0 votes
0 answers
17 views

Creating custom Tile Layer for custom projection system in Leaflet

I am working on web GIS with Leaflet. I am using Tile Layers such as OpenStreetMap, Google Streets Maps in the default projection system. I am also using custom projection systems with Proj4 leaflet ...
2 votes
1 answer
532 views

Leaflet control search clash with map.on zoomend function

I would like to know how to solve the clash between Leaflet control plugin and map.on zoomend function The problem is related to this query: Displaying selected layers depending on zoom in Leaflet ...
-1 votes
0 answers
48 views

Angular Leaflet Blank Map

Is there a Leaflet tile provider that only has country outlines and no other information? I don't want roads, states, landmarks etc like shown below with the basemaps and stamen providers
1 vote
1 answer
724 views

Filter Leaflet markers by input selectionin R Flexdashboard

I am trying to filter the markers that are drawn on a Leaflet map based on what is selected in a user defined date range. The below codes is returning an error that it is unable to find hfxLoc object. ...
2 votes
1 answer
253 views

Leaflet if statement for mouseout function

I have a problem. I would like to set a separate mouseout conditions for one of the geoJson.property value. The sitoation looks as follows: I set function for function style2(feature) { if (feature....

1
2 3 4 5
76