All Questions
1,097
questions
0
votes
1
answer
93
views
Leaflet GeoApiFrProvider Sending Incomplete Search Requests
I am working on a map application using Leaflet and the GeoApiFrProvider. While the setup works correctly most of the time, I'm encountering an issue where the search request is sent prematurely, ...
1
vote
0
answers
165
views
React-leaflet `no Context Provided` error when creating 3rd-party plugin
I am trying to build a custom plugin component for react-leaflet, but am running into the same error that several others have before me:
No context provided: useLeafletContext() can only be used in a ...
0
votes
0
answers
190
views
React Leaflet Fullscreen Control
I'm using this library, but the fullscreenControl prop doesn't allow me to change the icon's position on the map. Any idea? remains fixed in the topleft.
im using this lib
https://www.npmjs.com/...
0
votes
0
answers
135
views
Create a wider selection area to select the lines on react-leaflet map
Having difficulty in selecting the lines on react-leaflet map, so I have followed the below solutions,
https://gis.stackexchange.com/questions/466747/create-wider-selection-area-to-select-lines-on-...
0
votes
1
answer
92
views
Can't typify mapRef.current
So I have this react component with leaflet map and TypeScript warns me on line mapRef.current.setView(coords, 13) that this is "unsafe call of an any typed value"
import 'leaflet/dist/...
0
votes
1
answer
279
views
Renderer is not working in PathOptions for the Polyline in react-leaflet
I'm trying to add renderer property to PathOptions for drawing the Polyline and here is the code for it:
const canvasRenderer = L.canvas({
tolerance: 5,
});
<Polyline
...
0
votes
1
answer
120
views
How to drag a polygon when dragging a marker inside of it?
I have a map with polygons and markers, and a sidebar with tools buttons (like in this demo : https://geoman.io/demo). My markers are linked to my polygons in my database and if I use the 'Drag layers'...
0
votes
1
answer
118
views
React leaflet polygon has border stroke when clicking on it (in Chrome)
I have a new problem with react leaflet
this problem appeared suddenly.
I don't know what happened and this stroke suddenly appeared around of polygon just in chrome browser when clicking on polygon.
...
0
votes
0
answers
76
views
How to Fix Polygon Stretching Error in React Leaflet Map
I am working on a project where I am using the react-leaflet package to display a series of polygons on a map, based on data fetched from an external API. I am experiencing an issue where some ...
0
votes
0
answers
104
views
Leaflet Heatmap is rendering only what is on screen, if I drag the map it will re-render after releasing the mouse
So basically I understand that the heatmap is rendering only what is beeing showed on screen. I wanted it to render more than what's on screen so that this problem woundn't happen. I have already ...
0
votes
1
answer
382
views
React Leaflet Google Map Partial and Incomplete [duplicate]
I'm trying to learn something and develop a google map project with react-leaflet using JavaScript. I've made a simple React app and implemented the simple google map layer. Maps however are only ...
0
votes
0
answers
45
views
how to use leaflet.shapefile plugin
how do we actually start using leaflet.shapefile plugin from calvinmetcalf? I ran npm install shpjs --save, but when I do something like new L.Shapefile it will show this error:
...
0
votes
0
answers
55
views
Rewrite react-leaflet event
I have a similar problem as this question from almost 7 years ago:
Rewrite Leaflet event
Except I want to extend the boxZoom handler in react-leaflet.
Specifically I want to modify the boxZoom....
0
votes
1
answer
402
views
Using bringToFront() / bringToBack() in React-Leaflet to set Layer order
I want to set the layer order of my react leaflet map by calling bringToBack() on my selected layer after the component has rendered.
I tried getting the layer with useRef() and then calling ...
0
votes
0
answers
69
views
webpage got freeze (browser message: page unresponsive) when doubleclick on leaflet map many times to show nearby resturants
I'm using a leaflet map with reactJs, The purpose of it is that when I double-click on a specific location the lat & lng of where I double-clicked are sent to API to bring nearby restaurants then ...
0
votes
1
answer
276
views
Leaflet rendering issue - map overflows
I have created a repo to reproduce the issue. I use Leaflet in React.js. The issue is that Leaflet map overflows in a mobile view and Navbar is not visible. It happens only when user logs in and is ...
0
votes
1
answer
227
views
React leaflet flyto function on table
Onclick tmp() on the table fetches location of point. I have tried UseMapEvents and UseRef method but get an error that map is called before initialization. Just want the map to fly to marker when ...
1
vote
1
answer
107
views
How to get the coordinates of the country from overpass turbo
I'm working on a project using MERN technologies. In this project I decided to integrate an interactive map from Leaflet. I briefly explain how it works. Basically, there is this React component that ...
0
votes
1
answer
88
views
React leaflet make one marker ignore it's events, so other can be clicked
I have code like this:
return <React.Fragment key={i + 100}>
<MapMarker
obj={object}
key={i}
...
0
votes
0
answers
60
views
Nextjs13 and react leaflet: Dynamic loaded Marker in FeatureGroup unable to call getBounds
I currently play around with the new nextjs13 and the app directory as well as server side only code. In my project i use React leaflet and this cannot be directly used anymore in Nextjs13 (with the ...
0
votes
0
answers
154
views
Rendering Layers Selectively as Canvas / SVG in React-Leaflet
I have a map component with 1000+ overlapping polygons and want to show the Polygons from the Overlay layer always on top of the Polygons from the baselayer with the use of Panes. I found that using ...
0
votes
0
answers
46
views
React-leaflet v4 drawer shows two duplicated drawer components
I'm using react-leaflet v4 and simple leaflet
currently as you see in the picture I receive doubled drawer component
here example of my code:
function MyComponent() {
const map = useMap();
const ...
0
votes
0
answers
419
views
React - Uncaught TypeError: Cannot read properties of undefined (reading 'lat')
I'm trying to render a map that shows multiple marks with the leaflet lib, for this I tried to store multiple addresses in localStorage and then get them back and render all the marks with an array....
3
votes
1
answer
853
views
react-leaflet cannot read properties of null (reading useState)
I just installed react-leaflet in order to display a map in a react project.
I believe I have followed the setup instructions to a T, but I still keep getting this error:
this error only appears when ...
0
votes
1
answer
244
views
Rotating and scaling an image to match reference points on a map in Leaflet
I'm implementing a feature where users can overlay an image onto a map. The idea is for users to select two reference points on the map and two on the image (but using map coordinates i receive). ...
0
votes
0
answers
132
views
How to use dragging marker in leaflet-geosearch?
I am using react-leaflet and leaflet-geosearch. I want the marker here draggable and print the location when the marker is moved to another place. How to do this?
const Search = ({ location,...
1
vote
0
answers
216
views
Error While Trying to draw a rectangle using react-leaflet-draw with Vite "Uncaught ReferenceError: assignment to undeclared variable type"
Im getting an error while trying to draw a rectangle "Uncaught ReferenceError: assignment to undeclared variable type",
All other shapes are working fine, but the rectangle is not working, ...
0
votes
0
answers
77
views
Leaflet Marker not showing with draggable as true
With my custom Draggable Marker below, if I set the draggable property as true, the marker stop being displayed in map. Does any of u know how to solve this?
const DraggableMarker = () => {
...
0
votes
0
answers
130
views
React-leaflet with animated ImageOverlay misbehaving on zoom/pan actions
I'm attempting to use react-leaflet and ImageOverlay with CSS animation to create the appearance of clouds floating over the base image.
At the default zoom level, all is good. The animation works, ...
0
votes
0
answers
143
views
In react-leaflet plotting Mbtiles in map
I am new to map technology and I am using react-leaflet to plot GEOJSON to map. It was all going well but then I m facing load time with massive GeoJSON data, so need to convert GeoJSON to mbtiles. ...