All Questions
764
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
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
18
votes
5
answers
15k
views
React leaflet not rendering properly
The react-leaflet map does not get rendered properly.
The map is rendered outside of its parent's boundaries
Some tiles of the map are missing
The problem occurs when using the map with standard ...
- 7,954
17
votes
3
answers
40k
views
React Leaflet: Add markers dynamically
How to add markers dynamically to React-Leaflet maps?
I want to add new markers when user clicks on map. And I cannot get it work.
import React, { Component } from 'react'
import { render } from '...
- 2,232
15
votes
4
answers
26k
views
Arbitrary function on react-leaflet marker click
React-leaflet nicely provides the ability to put content within a Popup of a Marker.
For instance in my example:
<Marker position={[item.lat, item.lng]} key={item.machineid}>
...
- 2,586
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
3
answers
26k
views
react-leaflet get current latlng onClick
I would be realy happy if some one could help me...
I've installed react-leaflet on my react project and the map component is loaded successfully, i need to get current latlng and show it in the Popup ...
- 442
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
12
votes
2
answers
14k
views
How to get bounds with react-leaflet
I want to get bounds of the current map so that I can search those bounds with the Overpass API.
For leaflet I know the method is just map.getBounds(), but I don't know how to implement that in react-...
- 337
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