Questions tagged [leaflet]

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

Filter by
Sorted by
Tagged with
0 votes
1 answer
41 views

Coordinates (latitude-longitude) give wrong values when defining custom projection with proj4 on Leaflet

I am trying to implement a custom projection system with Leaflet and proj4. I introduced my EPSG:2320 projection with Proj4. But something went wrong on the map screen. Y (longitude) started to ...
user avatar
0 votes
1 answer
55 views

Choropleth layer selection does not work in Leaflet

I am designing a simple prototype web mapping application where I want a user to be able to click on a dropdown menu and have the map's choropleth layer, choropleth legend, and hover info box all ...
user avatar
0 votes
0 answers
58 views

Using Leaflet WMS layer with react to keep changing GeoServer layer with change in parameters

How can I use WMS layer of Leaflet with react for this type of logic. Basically I want to update WMS layer with change in parameters. <MapContainer <TileLayer attribution='&copy; <a ...
user avatar
1 vote
0 answers
54 views

leaflet.browser.print doesn't work with React + TypeScript

A question about Leaflet plugin for printing the map: https://github.com/Igor-Vladyka/leaflet.browser.print I am curious if it is supposed to work in React + TypeScript? After the package is installed....
user avatar
1 vote
1 answer
100 views

Polyline from an array of LatLng points - remove/hide polyline segments based on their length in Leaflet

I'm new in Leaflet and I need to add a red polyline using an array of LatLng points like var latlngs = [ [45.51, -122.68], [37.77, -122.43], [34.04, -118.2] ]; var polyline = L.polyline(latlngs, {...
user avatar
  • 177
0 votes
0 answers
47 views

Leaflet: how pointToLayer function works for different geometries?

In my code I can expect any GeoJsonObject type (Point | MultiPoint | LineString | MultiLineString | MultiPolygon | GeometryCollection | Feature | FeautureCollection). I want to check if the type is ...
user avatar
3 votes
1 answer
52 views

Access array of elements panel overlay using Leaflet

How do I get an array of elements (id, checked) that are checked in the panel? Example: I need the list of "talhão" that are checked===true. import React, { useRef, useState } from 'react' ...
user avatar
  • 63
0 votes
0 answers
50 views

Shapefile > MySQL > Shapefile/GeoJSON

I have created a React application to display a Leaflet map, with a series of polygons over the top. The data source for the polygons is a GeoJSON file. As part of the app, I am giving the user the ...
user avatar
  • 1
1 vote
0 answers
36 views

How to know if state was change in Leaflet events using React?

I need to know when the bounding box of the Leaflet map changes after the move and zoom process. I need to access it in componentDidUpdate. I have tried the code below but it doesn't work. This is my ...
user avatar
0 votes
0 answers
260 views

Analog of zoom level in react-native-maps?

I am toying with migrating a web-based application to react-native. The web based application is well developed using leaflet (and react-leaflet). To show different marker images at different zoom ...
user avatar
2 votes
1 answer
63 views

How can I set a target URL for each feature of the web map?

I have a QGIS map that displays the countries of Western Africa. My goal is to convert this map into interactive web map using QGIS2Web and Leaflet and provide the users the ability to click on a ...
user avatar
1 vote
1 answer
122 views

Clicking on markers from marker cluster layer always opens the same URL in Leaflet

I have marker cluster layer in Leaflet. I want to open specific URL when individual marker is clicked, but every time I click on any marker the URL of the last marker is opened. I've tried many things ...
user avatar
  • 13
1 vote
1 answer
65 views

Leaflet: CRS.Simple Transformation for real life measurement

I am trying to set-up a CRS.Simple Coordinate Reference System with a custom transformation. I got a real world construction plan with scale of 1:500 width 11112px height 10432px density 288 I tiled ...
user avatar
  • 111
0 votes
1 answer
49 views

Unable to display Google basemap using Leaflet.js

I am trying to display Google basemap using leaflet.js on web but getting strange results, screenshot is attached I have also added the code for react component below import React, { Component } from ...
user avatar
  • 1,534
2 votes
1 answer
30 views

Removing/replacing popup content in GeoJSON leayer in Leaflet?

I'm using Leaflet library, I have this custom navigation route where it shows the route between building A to building B. After the user choose the starting and destination area, a LineString is added ...
user avatar
1 vote
2 answers
94 views

The WGS Coordinates (lat,long) of the shapefile (ETRS89 UTM 33 N) are swapped?

i am relative new to the whole gis world. To display some statistics in Leaflet on my website i choosed to use some district zones provided by the regional government (Berlin / Germany) as Shapefile (...
user avatar
1 vote
1 answer
53 views

Display a Leaflet Heatmap with a gpx file and Omnivore

I first displayed a Leaflet Heatmap with the plugin : "leaflet-heat.js" and a geojson file with this code found on Gis.Stackexchange var geoJsonUrl = "link to the geojson file" ...
user avatar
  • 135
0 votes
0 answers
45 views

Generate new Leaflet tiles using existing tile map + overlayed GeoJSON data via browser

I have a large number of GeoJSON objects that I am rendering on page load over an existing tile map. This is terribly inefficient and won't scale. I would like to be able to take the existing tiles, ...
user avatar
2 votes
0 answers
80 views

Leaflet Directive performance issues with 7539 GEOjson features

I'm using this example for my map but it seems that the map performance is pretty bad when zoomed. Currently the map have 7539 geojson objects (features) and in the future they will be around 9500. I ...
user avatar
1 vote
0 answers
40 views

How to show more data in lower zoom levels with Vector tiles [closed]

I have downloaded OpenMapTiles Vector .mbtiles file for whole world data ~50GB, created a localhost to serve .pbf tiles and rendering them on client with maplibre-gl. At zoom level 12, minor roads are ...
user avatar
1 vote
1 answer
130 views

Show popup on GeoJSON layer data when button is clicked?

I have a LineString geoJSON data, I want to show popup when button is click. My problem is, it's not showing whenever I click the button. It only shows when I click the LineString itself. My goal is ...
user avatar
0 votes
1 answer
59 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 ...
user avatar
  • 21
1 vote
0 answers
69 views

Show WFS within Leaflet view

I have a Leaflet map where I use Leaflet-WFST. I use WFS layers to display on the map, but since I have a lot of them, I use new L.Filter.BBox('lin', map.getBounds(), L.CRS.EPSG4326); so that my ...
user avatar
1 vote
1 answer
142 views

Filtering and adding GeoJSON features using function in Leaflet

I have a Leaflet map where I am adding the features from a GeoJSON file. I am able to filter the features depending on the properties in the GeoJSON. I am writing out the same giant block of code each ...
user avatar
2 votes
0 answers
60 views

Filtering and Styling WFS GeoJSON

My problem is two-fold. I am trying to load a WFS as a geojson on my map. The WFS contains universities and their information. When the map loads, all universities should be displayed, and on ...
user avatar
  • 109
2 votes
1 answer
88 views

Populating all the data from GeoJSON to an HTML div

I have GeoJSON and I am trying to get all the data from it and display it on a div element. This is what I have been able to do so far: HTML <div class="col-3" id="graphs"> ...
user avatar
  • 109
2 votes
1 answer
354 views

React-leaflet GeoJSON: change color of the layer after state

I have an issue, I have a react-leaflet map with GeoJSON layers. Also, I have added some state components like cascader with some name of countries options, like Austria, Belgium, etc... I want to ...
user avatar
  • 33
0 votes
0 answers
4k views

Leaflet - Uncaught TypeError: Cannot read properties of undefined (reading 'style')

I'm using this Leaflet Indoor Library (https://github.com/digitaltom/leaflet-indoor). I'm trying to change the level / floor names to 1F, 2F, 3F, etc. but I got this error: Uncaught TypeError: Cannot ...
user avatar
0 votes
0 answers
29 views

Geoserver print module failed to print vector data

I have a problem to print a map with vector data on geoserver with print module. I use the sample data of USA states and I added a point symbol in geojson. when I click up send, it generates a link to ...
user avatar
0 votes
0 answers
60 views

Remove building names in OpenStreetMap using Leaflet

I'm using leaflet and I used OSM Tile Layer for my map. I want to remove the building names for a specific area (my school) because I'll be adding popup markers instead. I don't want to directly ...
user avatar
0 votes
1 answer
94 views

Use value from select to set corresponding marker icons in Leaflet

I have a select that contains a list of cities my markers are in. I would like to display my L.icon markers according to the value currently selected, since the value selected will match the attribute ...
user avatar
  • 83
0 votes
1 answer
34 views

Exporting GeoJSON data to gpx with togpx library in Leaflet?

While doing research to assemble, cut tracks (polylines), I found a development called Leaflet.draw.plus: alas, abandoned : https://github.com/Dominique92/Leaflet.draw.plus . I tried this leaflet.draw....
user avatar
  • 135
0 votes
1 answer
64 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 ...
user avatar
  • 101
0 votes
1 answer
133 views

Add onEachFeature function to existing layer in Leaflet

I have a GeoJSON layer that comes from a fetch function in another js module. I call this layer through an await function and therefore, I cannot use L.geojson(data, {onEachFeature: onEachfeature}). I ...
user avatar
  • 83
1 vote
0 answers
55 views

Add routing control to another div instead of map in Leaflet [duplicate]

I have a React app which shows bike stations on a Leaflet map. If the user clicks the station, it routes the user to that station (Leaflet routing machine). How can I add routing control div to ...
user avatar
0 votes
0 answers
192 views

Leaflet and MBtiles rendering using Leaflet.TileLayer.MBTiles

I would like to render a map with Leaflet from a MBTiles file using the Leaflet.TileLayer.MBTiles library. I added the MBTiles file on the same folder with index.php. I am NOT using a web server like ...
user avatar
  • 101
1 vote
1 answer
120 views

Update custom control field on data updated in Leaflet

I have some snippets down there, I need to update a specific field according to subscription data but when I call my createControl function it renders new control not updating here is create control ...
user avatar
0 votes
0 answers
40 views

Reducing the file size of js data file for qgis2web

I created a map using QGIS and I used QGIS2Web and leaflet to export it and put it on website. I was able to publish all the files except for a JavaScript file, which holds the spatial data. The ...
user avatar
2 votes
1 answer
133 views

Turf.js lineIntersect() not giving intersection of lineString and feature?

I'm displaying some polygons in Leaflet, and using Turf JS to do some calculating. After drawing a line between the centroids of two neighboring polygons, I want to find the intersection of the line ...
user avatar
  • 155
1 vote
1 answer
146 views

Display GeoJSON data depending on the selected value from select option in Leaflet

I am making a map in Leaflet then I made a custom route using LineString in GeoJSON. I have this navigate modal where users can select the Starting Area and the Destination Area. Here is how I ...
user avatar
3 votes
1 answer
314 views

Why is ArcGIS Server JavaScript API throwing a CORS error when Leaflet does not, for the same WMS layer?

I'm trying to add a publicly-accessible WMS layer to an ArcGIS Server JavaScript API v4 map, and am encountering a CORS error. See the simple demo which loads the ArcGIS JS API WMS layer: // ArcGIS ...
user avatar
  • 20.5k
0 votes
0 answers
43 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. ...
user avatar
  • 657
1 vote
1 answer
443 views

How to add popup when clicking on layer using Vue3 and leaflet

I am building a web app using Vue 3 and Leaflet. I use the vue-leaflet plugin. I have a background map and overlay layers, namely WMS tile layers served by Geoserver. Now I want a popup to open at the ...
user avatar
  • 21
1 vote
0 answers
106 views

Projection XY with maplibre

I am using Leaflet with crs: L.CRS.Simple for a game map(XY coords) with "leaflet-rastercoords" https://github.com/commenthol/leaflet-rastercoords and want to switch to maplibre (aka Mapbox)....
user avatar
  • 233
1 vote
1 answer
96 views

Leaflet turf.buffer: projection problem

I'm trying to make a buffer with Leafler, Turf, work out of the drawnItems of Leaflet Draw; but the result isn't right. It's too high but not large enough. Could you help me fix it? I'm using this ...
user avatar
2 votes
1 answer
219 views

Showing Modal when text is clicked inside marker popup

I am customizing the Bootleaf template, what I want to do is when I click the description text the modal will appear. I am using Leaflet. I already tried the code below but nothing happens when I ...
user avatar
6 votes
2 answers
260 views

Make polygon of GeoJSON layer unclickable after first click in Leaflet

I have added a GeoJSON file consisting of multiple polygons to a leaflet map. Now after clicking on any of those polygons I don't want Leaflet to accept any subsequent click events for this specific ...
user avatar
  • 87
4 votes
1 answer
135 views

Show/hide all tooltips at once in Leaflet

I use a for loop to add tooltips to my Leaflet map by reading the lat and lon coordinates from a .txt file. for (var i = 0; i < lines.length; i++) { ... L.tooltip({ permanent: ...
user avatar
  • 43
4 votes
1 answer
295 views

Calculating Leaflet scale ratio for the particular zoom level?

Is there any way we can calculate the scale ratio using L.CRS.scale? For example, if I execute the following code L.CRS.scale(this._map.getZoom()), the pixel coordinates value for a particular zoom ...
user avatar
  • 43
3 votes
1 answer
116 views

Leaftlet Map with Carto database to recalculate area on polygon edits

I have a Carto database called drawn_items with the columns cartdb_id, the_geom, fsrn_db and area. The following JavaScript code (which I will call code 1) inserts a new row into the carto table drawn ...
user avatar

1
2
3 4 5
77