Skip to main content

Questions tagged [leaflet]

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

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

Why NOAA layers appear to be incorrect

I had previously built a Leaflet map that pulled past precipitation data (24, 48, and 72 hours) from the NOAA nowCOAST site, however, the site was decommissioned. I used a previous StackExchange post ...
0 votes
1 answer
784 views

Using a custom button to start editing with leaflet-geoman is automatically placing a first vertex on the Leaflet map (Next.js, React)

Using Next.js@12 & [email protected] I have a custom toolbar with a number of buttons to enable drawing (polygon, rectangle, marker), when I click a button to start drawing, the first vertex is ...
19 votes
7 answers
68k views

How to remove attribution in Leaflet?

I want to remove the "Leaflet.com" that appears on the right bottom of the screen here. How can I do that?
6 votes
3 answers
14k views

mapbox - how to generate a random coordinate inside a polygon

I've seen the leaflet plugin for mapbox which finds the polygon within which a specific point / coordinate lies, but how would I do the opposite - generate a random point / coordinate within a ...
2 votes
1 answer
908 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}....
2 votes
1 answer
1k views

Correctly formating Leaflet popups

I'm working on a Leaflet map, currently adding content to my popups. In .bindPopup ([" "]) is there any way to format a paragraph of writing on the backend into multiple lines of code within those ...
0 votes
1 answer
38 views

GeoServer non-tiled WMS with Leaflet

Are non-tiled WMS layers possible in GeoServer? I passed tiled:False option in Leaflet but I still get tiled layer. const prew = L.tileLayer.betterWms("http://localhost:8080/geoserver/wms", {...
0 votes
1 answer
504 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 ...
0 votes
0 answers
16 views

Changing choropleth variable map based on dropdown in dash leaflet

I currently have adapted the example on the dash leaflet website to my own situation, but now I want to make a dropdown menu which shows all of the variables in the geojson file (currently I just have ...
0 votes
1 answer
1k views

Error: nodebuffer is not supported by this platform

I'm trying to use Shpjs package for import Shape file on leaflet map bases on the shpjs doc : shpjs const [geoData, setGeoData] = useState(null); const onChangeFile = ({ target }) => { var ...
0 votes
1 answer
1k 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:...
0 votes
1 answer
417 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
0 answers
25 views

Leaflet.js dragging is really slow in Firefox

I've made a Leaflet map for my clients using Django. The map is working great on Chromium based browsers (I've tried Google Chrome, Microsoft Edge and DuckDuckGo), but dragging around is insanely slow ...
1 vote
1 answer
1k 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. ...
1 vote
1 answer
709 views

Speed up GeoJSON clustering and rendering?

I am rendering 10,000 points with Leaflet's markercluster library. I fetch these 10k points from our server. This takes about 700ms. It takes Leaflet about 3 seconds to cluster these points and ...
2 votes
1 answer
2k 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
42 views

PDF connected to point feature published to Leaflet with QGIS2Web

I have a PDF connected to point feature in a desktop project in QGIS and activating the Action on the point opens the PDF perfectly. I tried publishing this with QGIS2Web. The PDF is moved to the ...
0 votes
1 answer
845 views

Load tif file on Leaflet Map from input type=file

How do I load a tif file from html input? So i get the tif file as a Blob from my input. <input class="form-control" id="rasterdatenInput" type="file" name="...
1 vote
0 answers
36 views

Ipyleaflet map crashes Jupyter notebook and says out of memory

I wrote a code to show some points on ipyleaflet map that will be updated automatically. at first, the map shows fine, but despite removing markers after a certain time (eg. 72 hours) the notebook ...
1 vote
1 answer
530 views

Project React-Leaflet map in different projection

I am working on a college project that deals with MAPS. Our project is related to mapping the location of stadiums for the recent FIFA worldcup. The tileserver url provided to us is custom. When I use ...
1 vote
1 answer
34 views

Leaflet markercluster: getting the zoom level at which a specific marker is no longer clustered?

I'm using Leaflet markercluster in an app. I have an endpoint where a specific marker is selected (eg. ../marker/12); so the maps centers on that marker and displays its popup when the page loads. But ...
0 votes
1 answer
616 views

Leaflet extra markers displaying icon but not marker

My code for formatting a JS Leaflet Extra Marker is like below where I've clearly given a marker color. let parkMarkerIcon = L.ExtraMarkers.icon({ shape: 'circle', markerColor: 'green', prefix: '...
0 votes
1 answer
359 views

Adding title for each part of layer control in Leaflet

I create a Leaflet map containing some base maps and overlay maps. I want to organize the layer control so that these two parts separated by a title, so I want to have such a view on my layer control: ...
2 votes
1 answer
750 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 ...
0 votes
2 answers
2k views

Unable to dynamically locate map boundary coordinates in OSM/Leaflet

I have been trying for the past hour to take the coordinates of the map edge in a OSM/leaflet application I am making. While I can get the coordinates of the center, and I can get the coordinates of ...
1 vote
1 answer
449 views

Leaflet styling geoJSON object radius by its feature property

I am trying to style geoJSON objects by its feature properties (Capacity). I tried 2 ways: 1: function getWidth(Capacity) { return Capacity >= 40 ? 12 : Capacity >= 30 ? 8 : ...
2 votes
1 answer
593 views

Change Ordering of features within one layer in leaflet

My Question is exactly the same as mentioned in this Question The main difference is that I can't use bringToFront() because I have points inside the highlighted polygon that I want to show a tooltip ...
1 vote
1 answer
415 views

How to make legend have no number overlap in Leaflet

I'd like my legend to go from 0-25 to 26-50 to 51-75 rather than what it is in the screenshot included. How should I go about doing that? function getColor(d) { return d >= 75 ? "#...
2 votes
1 answer
1k views

Show marker moving live along an ipyleaflet map?

I'm trying to simulate the real-time movement of a vehicle along a pre-determined path (as a list of coordinates) on ipyleaflet (running on a Jupyter Notebook). What I've tried is to instantiate a ...
2 votes
1 answer
860 views

Incorporating Ordnance Survey map with other layers in Leaflet

I am trying to incorporate the Ordnance Survey layer into my Leaflet map. The goal is to enable it as another map layer amidst a few existing ones. One of the code looks like this: var link = L....
0 votes
1 answer
66 views

Filter GeoJSON layer dynamically in Leaflet?

I try filter layer on my Leaflet jsonp from input text html to my JS code but is not working. On my code I tried to make filter is working only when I insert number 4 directly: let pontoFiltrado = ...
2 votes
1 answer
163 views

CRS.Simple coordinates from SVG for GeoJSON in Leaflet

I am working with CRS.Simple in Leafleat. The y-coordinates from the SVG don't match what I'm supposed to use in GeoJson. I do not want to calculate them manually. How to use coordinates from SVG so ...
0 votes
1 answer
483 views

Leaflet map not showing labels from GeoServer

I am trying to develop a map with Leaflet 1.9.3 and GeoServer 2.22.0. When I preview the GeoServer layer, the labels appears at all zoom levels as expected. But when its added to a Leaflet map, I ...
0 votes
2 answers
1k views

Edit a shapefile with Leaflet.pm

I am new to Leaflet but so far so good. I managed to add the plugins I needed and they work. Except the shapefile editing. I am using leaflet.pm to draw, snap, cut polygons (only polygons). I also ...
0 votes
2 answers
3k views

When using react-leaflet, for Marker it shows <img src=[object Module]>

When using react-leaflet with create-react-app, for Marker it shows <img src=[object Module]> in console after changing the default icon as given in here - https://github.com/PaulLeCam/react-...
0 votes
1 answer
51 views

Load only low resolution of polygons in Leaflet

Leaflet uses the principle of loading map tiles according to the zoom level, that is, the resolution of the map image depends on the zoom level. Can we apply the same principle to a polygon? My ...
3 votes
1 answer
858 views

Dynamically changing fillColor variables in leaflet

When I want to style a polygon using a property the traditional way is to assign a function that returns a style object. Within that object you assign the fillColor property to a getColor function ...
2 votes
1 answer
2k views

L.control.sidebar is not a function

I have install leaflet-sidebar-v2 via npm. However when I try to simply initialize the side bar I get this error. L.Control.Sidebar is not a function. here is my index.html import scripts etc &...
2 votes
1 answer
12k 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
505 views

Reprojecting EPSG:5514 to EPSG:3857 for use in Leaflet

I have one JPG (170 MB) and JGW file of a small area projected in EPSG:5514 (Image provider told me.) JGW file: 0.1250000 0.0000000 0.0000000 ...
2 votes
1 answer
60 views

Simple way to put a canvas on a map using Leaflet?

In Mapbox GL JS I might do something like: const canvas = document.createElement("canvas"); canvas.width = WIDTH; canvas.height = HEIGHT; map.addSource('canvas-source', { ...
1 vote
1 answer
168 views

Create a map survey and download the result

I have a shapefile of our state boundary. I want people to be able to drop a pin and add their names to the pin as an attribute. From there I would like to download all the pins as a shapefile and ...
0 votes
1 answer
6k views

Not allowed to load local resources ASP NET MVC

var wmts = L.tileLayer('E:/Mapnik/{z}/{x}/{y}.png', { wmts: true, }); wmts.addTo(map); I am trying to load the map with asp.net mvc, but I get this error. (Not allowed to load local resources ...
0 votes
2 answers
53 views

How to offset labels in Leaflet using field-based rotation & offset?

I have a small dataset displayed as points in Leaflet. Each point has 3 arrows (right, left, head) coming out of it and they are rotated based on 3 separate fields (rhead, lhead, head). i want the ...
1 vote
1 answer
2k views

Leaflet ignore click event when popup is open

I am building a tool allowing to edit some GeoJSON props on a popup opened over the GeoJSON element/layer. When the popup is closed the props are shown in a fixed tooltip over the polygon. However, ...
0 votes
1 answer
40 views

SVG arrows not behaving like the other arrows in Leaflet

I have a Leaflet web map displaying 13 points and 3 arrows diverging from each point (4 layers total). The map was exported from QGIS via QGIS2Web. I'm using placeRotatedSymbol() to place the arrow ...
1 vote
1 answer
411 views

Can't close custom popup at fixed position

I created this custom popup at a fixed position. When clicking a marker a popup opens, I'm able to close the popup and open another one clicking a different marker, then I'm not able to close the ...
1 vote
2 answers
42 views

Error when using CRS 32718 in Leaflet

I'm trying to specify the CRS 32718 with Proj4Leaflet to a Leaflet map but I'm getting an error: "ERROR TypeError: coordinates must be finite numbers" My code is following: var crs = new ...
0 votes
1 answer
42 views

Offset & anchor field-based arrow SVGs in Leaflet

I have a leaflet web map displaying 13 points and 3 arrows diverging from each point (4 layers total). The map was exported from QGIS via QGIS2Web. all layers (including points) have exactly the same ...
1 vote
1 answer
1k views

No applicable method for 'metaData' applied to an object of class "NULL" with Leaflet map

I'm putting together a Shiny app that involves a Leaflet map. Unfortunately, whenever I run it, it produces this error: "no applicable method for 'metaData' applied to an object of class "NULL"". I'm ...

1
2 3 4 5
84