All Questions
1,096
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,979
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,443
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
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
17
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,944
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.8k