Questions tagged [leaflet]

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

Filter by
Sorted by
Tagged with
0 votes
0 answers
12 views

Loading point locations from Postgis database into leaflet webmap

I have a php that loads point locations on a leaflet map // Load locations on leaflet map <?php $db = new PDO('pgsql:host=localhost;dbname=stream_network;', 'postgres', 'password'); $sql = ...
0 votes
1 answer
982 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","...
1 vote
1 answer
2k 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 ...
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, ...
0 votes
0 answers
17 views

How to access an info-component in a react-leaflet and next.js app?

I am currently working on an app that displays a map using react leaflet and Next.js. Now I want to display an info-box with some useful data. The problem I have right now is that when I hover over ...
1 vote
0 answers
57 views

Leaflet get bounds of whole map

My map is a rectangle, divided in smaller x-y-z images. map.getBounds() returns the bounds of the visible map. I want to compute the bounds of the whole map, from corner to corner, regardless of the ...
12 votes
6 answers
38k views

Sizing Leaflet Map inside bootstrap

I have been trying to change the height of my leaflet map to a percentage inside of bootstrap but everytime I do the map will not draw. Thus, I always have to revert to px value. I'm pretty sure its a ...
0 votes
1 answer
102 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 ...
1 vote
1 answer
378 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 ...
1 vote
1 answer
139 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 ...
3 votes
2 answers
7k views

How to make auto zoom when GeoJSON file is added on Leaflet map

I want it to auto zoom / zoom to center when any GeoJSON file is loaded on a Leaflet map. Help please. $.getJSON("{{asset("storage/upload/shapefiles/districts/atd_district_level.geojson")}}",function(...
0 votes
0 answers
16 views

Keyword query near the selected business by location [closed]

I will make a web software. The user will type "x restaurant" as an example and this business will appear on the embedded map. Then, when a call is made from a location 500 meters away from ...
0 votes
1 answer
41 views

How can I use OpenTopoMap Garmin Maps files with Leaflet?

We can download OpenTopoMap bulk export from https://garmin.opentopomap.org/. Vector or bitmap files? I'm not sure and I need PNG files. This is useful for GPS devices, but this can be also useful ...
1 vote
1 answer
29 views

Leaflet symbology using jQuery with a static api response

I'm symbolizing a road network by getting a response from a static api. I have a GeoJSON loaded on the frontend that contains XDSegID as the primary key. I'm sending an AJAX request which returns ...
4 votes
1 answer
4k views

Leaflet MapBox Issue of poly line which crosses the antimeridian

I am using mapbox leaflet js in my application "https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js". Previously i was using google map, I am facing an issue when i draw a polyline in map which crosses ...
1 vote
1 answer
32 views

The Leaftlet `Multiverse` issue

I hope someone can lend some insight here. My customer is complaining about what he calls the "multiverse" issue in Leaflet. I apologize if I'm not using the right words to describe the ...
0 votes
1 answer
333 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 "...
1 vote
1 answer
24 views

Leaflet polyline popup has wrong Strava activity name and id [closed]

I want to display a popup on mouseover over a polyline which is a Strava activity. And on click on the polyline it should open the Strava activity on the Strava website. Both works but on many ...
-1 votes
0 answers
29 views

Crop Leaflet Image using ImageOverlay

I am displaying my image as Leaflet Image Overlay, and i want to crop the image based on a boundary on the map when user upload to the map, so that they can modify image and view the cropped area only ...
0 votes
0 answers
19 views

Hide/remove a specific features in Leaflet [closed]

I have a GeoJSON and I want to hide some features. I can do so with a weight of 0 or opacity 0 styling but not handy in combination with a hover that also changes weight & opacity. How can i just ...
2 votes
2 answers
2k views

Leaflet GeoJSON map legend

I am struggling with creation of the map legend adequate to my GeoJSON stylization. The code looks like below: var geojsonMarkerOptions = { radius: 8, fillColor: "#ff7800", color: "#000", weight: 1, ...
-1 votes
0 answers
17 views

Piwigo Openstreetmap : set default category to variable [closed]

This is a map that uses photos from Piwigo. You host photos yourself, and they show as a carrousel on the map. https://github.com/Piwigo/piwigo-openstreetmap How can I hardcode variable category=35 by ...
0 votes
0 answers
24 views

Call current position in onEachFeature leaflet

How can I call my current location inside onEachFeature in Leaflet. It's working outside but I just want to call it inside L.Controler.Layers var cauayan = L.geoJSON(cauayan, { onEachFeature: ...
14 votes
3 answers
22k views

Make Leaflet map background transparent

How can I make the background of the Leaflet map transparent. I see opacity controls from the layers, but not the map background. Should the be changed just with plain CSS?
7 votes
1 answer
15k views

Get all tileLayers from L.map object in Leaflet

What is the best way to access all displayed tileLayers from a L.map object? Traditionally, I have stashed tileLayers in an object that I can access later, like so: var mapLayers = {} if (! ...
0 votes
1 answer
505 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....
5 votes
1 answer
8k views

Leaflet marker cluster and popups

I want to develop a map with Leaflet marker cluster. You can see how it looks like here: https://github.com/danzel/Leaflet.markercluster But I need that my markers have popups with more information ...
1 vote
1 answer
121 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 ...
2 votes
2 answers
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: ...
1 vote
1 answer
443 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
28 views

What's wrong with this geojson file?

I'm trying to add this geojson file to my Leaflet project, using the following code: var iba = L.geoJSON.ajax('data/iba/iba.geojson').addTo(map); This geojson I have created with dummy data using the ...
5 votes
2 answers
5k views

Zoom dependent layers in leaflet

My leaflet map has two WMS layers with different scales; one of them is a 4cm topographic map. I would like to have both WMS on the map but showing only the topographic map when the zoom of the map is ...
0 votes
0 answers
20 views

Fetching WFS layer grid of 1*1 mtr from GeoServer

I have created 1*1 grid in QGIS from Vector->Research tools->Create grid. And I have converted that grid file to shape and hosted in the GeoServer. When I am trying to fetch that layer after ...
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 ...
10 votes
1 answer
34k views

How to highlight features on user click in Leaflet?

I'm new to Leaflet & JavaScript. I made local tiles using maperitive, I can draw Polygons, Polyline & Points using GeoJSON over the tiles using leaflet, I can serve the both (tiles & ...
6 votes
3 answers
25k views

Calculating bounding box of given set of coordinates from Leaflet Draw?

I have values generated from Leaflet Draw plugin that look like this: { "type": "Feature", "properties": {}, "geometry": { "type": "Polygon", "coordinates": [ [ [-73....
0 votes
0 answers
46 views

How can I export my symbology, "Style" from ArcGIS Pro for use in Leaflet (JSON)

I am looking to export the symbology / style from ArcGIS Pro to use in Leaflet. We have too many colors and regular changes to manually set the colors within Leaflet. I understand there is not a ...
2 votes
1 answer
327 views

Leaflet.Control.Minimap does not show toggle icon

I am using the minimap control and everything works just fine, except that the toggle icon is not being displayed. Normally the toggle icon on the minimap should be similar to this example: minimap ...
0 votes
1 answer
25 views

How do I console.log the onclick of zoom-in and zoom-out to get the zoom level

How do I get the zoom level console when I click on the leaflet-control-zoom leaflet-bar leaflet-control <MapContainer center={[-16.4391, 233.2813]} zoom={3} scrollWheelZoom={false} style={{ height:...
2 votes
1 answer
699 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
1 answer
25 views

Leaflet geoJSON "setStyle" function for multiple styles

I have a geoJSON layer having some attributes with "ID" as the primary key. I'm aiming to change the color of features within the geoJSON when ever a button is clicked. So I'm making an ajax ...
1 vote
1 answer
32 views

Overwriting Filtered GeoJSON layer on Leaflet map based on user selection

Using bulmaCalender i have a form for user to set the start and end date <form id="form3"> <p>Filter by Date:</p> <p>Start Date: <input ...
2 votes
1 answer
342 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}....
0 votes
0 answers
41 views

Vue2-Leaflet How to implement oneachfeature / popup for a vector-tile layer?

Based on examples on https://vue2-leaflet.netlify.app/examples I added a vector tile service to my Vue project. <l-map style="height: 500px; width: 100%" :zoom="zoom" :center=&...
1 vote
1 answer
106 views

Generate bounding box from PNG image and World File

From this folder I can get two files: PNG Image World File   (.wld) From this page where they document how these files are to be used, they say that they are generated in the EPSG:4326 projection. My ...
0 votes
0 answers
26 views

Leaflet Enable Snapping L.Draw Polygon

how i can enable Snapping on L.Draw Control Polygon in latest versions of Leaflet 1.8, without using geoman I am using L.Draw.Polygon to enable drawing on the map, here is code for that ...
0 votes
1 answer
248 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
200 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 ...
2 votes
1 answer
65 views

Filtering GeoJSON layer on Leaflet map based on date selected by user

I want to filter the data on map based on the user selected date, i have a simple dataset with attributes as id,color, date (displayed in image below) I worked out partly how to filter the data by ...
1 vote
0 answers
65 views

Leafletjs split polygon

I have a polygon and it has circles on it. I drew lines from the intersections of the circles. Actually I want to split this big polygon by lines. I have numbered the polygons to be divided in the ...

1
2 3 4 5
79