All Questions
523
questions
91
votes
19
answers
85k
views
react-leaflet map not correctly displayed
I'm trying to use react-leaflet to display a map. I use the code from this fiddle which is working, but on my computer I have this output
Here is my code :
DeviceMap.js
import React from 'react'
...
- 11.8k
88
votes
18
answers
78k
views
How to fix error "Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)"
I am trying to create a react-typescript app along with leaflet. I used the command,
npm install leaflet react-leaflet @types/react @types/leaflet --save to install the dependencies.
But when I start ...
- 2,028
57
votes
7
answers
99k
views
Leaflet: Map container not found
I have the below react class which fetches the geolocation through the browser.
I am mapping a leaflet map. I want to geolocation to be an input to the setView, for such that the map "zooms" into the ...
- 6,999
37
votes
2
answers
22k
views
Good way to combine React and Leaflet
I am working on a project to combine React and Leaflet, but I must say I am having some hard time with the semantics.
As most of the stuff is managed by Leaflet directly, I don't know if it would ...
- 2,453
23
votes
3
answers
17k
views
How do you call fitBounds() when using leaflet-react?
I cannot figure out how to call fitBounds() on the Leaflet map.
If I was just using vanilla leaflet, this solution would work perfectly: Zoom to fit all markers in Mapbox or Leaflet
Unfortunately, I ...
- 591
23
votes
2
answers
9k
views
React Native Webview with openlayers
I have seen this info: https://stackshare.io/stackups/leaflet-vs-mapbox-vs-openlayers
I'm developing at the same time a web application with react using OpenLayers. And I have to make the same app on ...
- 231
15
votes
4
answers
11k
views
Leaflet React get map instance in functional component
I want to have a button outside the map that changes the view to another coordinates.
Is there any way to get mapContainer instance to call their functions? Or how can I implement that function?
I ...
- 287
14
votes
3
answers
29k
views
How can I get the current Leaflet map zoom level?
I'm trying to get the zoom level of a map in real time to make a button that locks the zoom with the current value. I have tried using getMapZoom and getZoom but both give me an undefined value. I ...
- 169
13
votes
2
answers
3k
views
How to prevent event bubbling on child of React-Leaflet Map
I have a React-Leaflet map which I am rendering a div inside.
For some reason, interacting with the contents of the div causes the map beneath to respond (eg: double-clicking will zoom the map, ...
- 17.7k
10
votes
3
answers
9k
views
Implementing a dynamic JSX element within a marker, using react-leaflet
I have a React app in which I am using Leaflet through react-leaflet, both super useful libraries.
In this app, I have a group of coordinates that need to be rendered as follows:
When zoomed out, ...
- 21.1k
10
votes
1
answer
3k
views
React leaflet draw - marker icon and drag handler is missing
I am using react leaflet draw for drawing polygons and circles.
But when I chose edit polygon there is no drag handler for a move and resize.
How to solve this issue if any one have the same?
This ...
- 7,029
9
votes
1
answer
13k
views
How to locate react-leaflet map to user's current position and get the borders for this map?
I need to locate react-leaflet map to user's current position and get the borders for this map. I tried to apply the following code, but faced the error:
TypeError: Cannot read property 'locate' of ...
- 187
8
votes
1
answer
5k
views
Using leaflet.offline with React?
I'm developing a React app, and I'm trying to implement a Leaflet-map with support for offline download of the map tiles. For this I thought of using leaflet.offline (https://github.com/allartk/...
- 650
8
votes
3
answers
14k
views
Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer> [duplicate]
I'm using react-leaflet and I added a marker with an event Handler on click to zoom to this marker , but when I try to use const map=useMap() all I get is this error => :
Uncaught Error: No context ...
- 541
8
votes
2
answers
3k
views
Add leaflet plugins to React-Leaflet
I'm trying to create a custom component in react-leaflet v2 extending a leaflet plugin EdgeMarker. The documentation does not really give details on how to do this. So I have copied the Leaflet....
- 669