Questions tagged [leaflet]

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

Filter by
Sorted by
Tagged with
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 ...
user avatar
  • 173
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(...
user avatar
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://...
user avatar
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 ...
user avatar
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: ...
user avatar
  • 167
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 ...
user avatar
  • 31
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 ...
user avatar
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){ //...
user avatar
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 ...
user avatar
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 = [ [...
user avatar
  • 167
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, { ...
user avatar
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 ...
user avatar
  • 109
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 ...
user avatar
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 => { ...
user avatar
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 ...
user avatar
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 ...
user avatar
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:...
user avatar
  • 167
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) ...
user avatar
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....
user avatar
  • 135
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 ...
user avatar
  • 91
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:...
user avatar
  • 111
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:...
user avatar
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. ...
user avatar
  • 4,065
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 ...
user avatar
  • 31
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/...
user avatar
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, }); ...
user avatar
  • 101
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 ...
user avatar
  • 167
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 ...
user avatar
-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 ...
user avatar
  • 101
1 vote
1 answer
28 views

Displaying pop ups for overlapping polygons in the same layer in Leaflet?

I am working on a leaflet map that shows property ownership over time with polygons and a time slider (https://github.com/jeffjb4488/GeoJASON_test). However, some of my polygons overlap and only the ...
user avatar
-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
user avatar
2 votes
1 answer
37 views

Providing parameters in a URL to select and zoom to a feature on startup [closed]

I have a Leaflet map with GeoJSON data that shows various properties and I would like to append a parameter like "owner" to a URL (not a coordinate) and have the feature selected and zoomed ...
user avatar
  • 21
1 vote
0 answers
31 views

Poor GeoTIFF display performance using JS plugins contrary to Leaflet for R package

I have question regarding displaying GeotTIFF using leaflet or react-leaflet. There are some packages allowing displaying tiffs, for example I had used: https://github.com/stuartmatthews/leaflet-...
user avatar
  • 35
1 vote
1 answer
39 views

Choropleth hover functionality is glitching using Leaflet

The basic functionality of my web map is to allow users to switch between choropleth views using a dropdown menu. This basically works, but the issue I'm now having is with the info box that allows a ...
user avatar
2 votes
0 answers
36 views

Drawing buffer zones in React-Leaflet

I am working with a Leaflet in react.js and using react-leaflet-draw. I can't draw a buffer on shapes drawn by react-leaflet-draw. Just like a “leaflet-buffer”.
user avatar
  • 21
1 vote
0 answers
30 views

Leaflet multiOptionsPolyline - draws color on the next segment instead of the right one

It's my first time using multiOptionsPolyline to draw a multicolor polyline from an array of LatLng points, with red segments if distance is smaller or equal to 90m and green if bigger. var polyLine = ...
user avatar
  • 167
1 vote
0 answers
159 views

Leaflet/Vue 3 Issue Uncaught TypeError: Cannot read properties of null / this._map is null

I am facing an error on Leaflet on Vue 3 whenever i try to zoom in or out when a popup is closed. The error on Mozilla: Uncaught TypeError: this._map is null Popup.js and the error on chrome ...
user avatar
0 votes
1 answer
39 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
50 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
45 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
40 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
78 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
  • 167
0 votes
0 answers
45 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
-1 votes
0 answers
45 views

Layer removing function using jQuery along with Turf.js and Leaflet.js

I am using Turf.js along with OpenStreetMap to perform the following tasks, my remove layer function is not working as expected. Following piece of code is applied to different buttons created using ...
user avatar
3 votes
1 answer
48 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
45 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
30 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
193 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
81 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
2 3 4 5
76