All Questions
1,098
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
68
votes
4
answers
71k
views
Is it ok to use ReactDOMServer.renderToString in the browser in areas where React isn't directly managing the DOM?
I'm working on an app using Leaflet (via react-leaflet). Leaflet directly manipulates the DOM. The react-leaflet library doesn't change that, it just gives you React components that you can use to ...
- 2,213
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
21
votes
7
answers
41k
views
How to include "leaflet.css" in a React app with webpack?
I using the survivejs.com site as a template to build a map based React app with webpack. For the map i am using leaflet but i can't find a way to add the leaflet.css. Without this the map tiles are ...
- 691
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
16
votes
4
answers
19k
views
React leaflet center attribute does not change when the center state changes
App.js
import { useState } from 'react';
const App = () => {
// This state is used to the center attribute of MapContainer component
const [mapCenter, setMapCenter] = useState([34.80746, -40....
- 161
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
7
answers
31k
views
marker icon isn't showing in Leaflet
I 've put together a very simple React / Leaflet demo but the marker icon is not showing at all.
Full running code is here.
Here's what I have in my componentDidMount method:
componentDidMount() {
...
- 26.9k
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
9
votes
1
answer
5k
views
componentDidUpdate prevProps gives me current / new props
I'm trying to integrate a leaflet map but I think that is not the problem here. Anyway to re-render my map I want to use componentDidUpdate to see if the props changed I pass down to my map component ...
- 1,129
8
votes
2
answers
4k
views
Pass A react component to leaflet popup
I am using leaflet in my react code and I am not using react-leaflet. I want to pass a react component or jsx code to binbPopup function to every tooltip.
let marker = new L.marker(...).bindPopup(<...
- 1,792
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
1
answer
6k
views
React-leaflet geojson onEachFeature popup with custom react component
I am trying to render custom react component in react-leaflet GeoJSON onEachFeature popup, e.g. to fire modal with all corresponding feature.properties. In a popup react-leaflet component it works ...
- 83
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
7
votes
2
answers
18k
views
Change Center position of React leaflet map
So what I'm trying to do is, I want to change the center of map after I get the users lat and lng,
the code below will make the problem clearer:
<LeafletMap
center={this.state.UserCurrentPosition}...
- 375
7
votes
4
answers
2k
views
React-leaflet map shows scattered blocks of maps
I was trying to show a sample map on my react website. I have installed the leaflet package and also the react-leaflet package then set everything up as the react-leaflet document said to do. You can ...
- 129
7
votes
2
answers
3k
views
React-leaflet how to resetStyle
I'm following Leaflet's Choropleth tutorial
http://leafletjs.com/examples/choropleth.html
and using react-leaflet.
I managed to setStyle without any modification from the original source code and it ...
- 1,246