Stack Overflow
Stack Overflow

Questions tagged [react-leaflet]

React components for Leaflet maps.

React-Leaflet is an open-source project provides an abstraction of Leaflet as ⚛️ React components.

It does not replace Leaflet, only leverages ⚛️ React's lifecycle methods to call the relevant Leaflet handlers. You can read more information about the lifecycle process in the introduction page of this documentation. Please make sure you understand all the core concepts and limitations to evaluate if this library is appropriate for your needs.

This documentation only presents concepts specific to React-Leaflet, you should already be familiar with both React and Leaflet to use this library. Otherwise, please make sure to go through React and Leaflet's getting started guides and examples first.

Browser Support

On Desktop

  • Chrome
  • Firefox
  • Safari 5+
  • Opera 12+
  • IE 7–11

On Mobile

  • Safari for iOS 3–7+
  • Android browser 2.2+, 3.1+, 4+
  • Chrome for Android 4+ and iOS
  • Firefox for Android
  • Other webkit-based browsers (webOS, Blackberry 7+, etc.)
  • IE10+ for Win8-based devices

Online resources

1382 questions
13
votes
3 answers

Customizing react-leaflet marker icons by using font awesome

It is more theoretical question, rather than a problem. How to use font awesome icons as react-leaflet map marker icons? I would like to have such an icon selector control to assign(customize) each marker icon I have got on my map. By the way I am…
Uncle Bent
  • 163
  • 1
  • 1
  • 11
13
votes
4 answers

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: …
notconfusing
  • 2,556
  • 3
  • 22
  • 26
12
votes
3 answers

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 think I'm not using the correct ref but I haven't…
ODLana
  • 149
  • 1
  • 3
  • 10
12
votes
2 answers

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-leaflet. class SimpleExample extends…
Jake Hm
  • 327
  • 1
  • 2
  • 13
11
votes
2 answers

react-leaflet add layers dynamically

I'm starting to use react-leaflet and I came across a question: In my application the user fills out a form that then requests a rest service that returns a GeoJSON, which is then added as a new layer on my map. My question: How do I implement…
Davi Custodio
  • 113
  • 1
  • 6
10
votes
2 answers

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, dragging will pan the map) - even when I'm calling…
Alex McMillan
  • 17,096
  • 12
  • 55
  • 88
10
votes
1 answer

Leaflet-React map rendering tiles not in place and empty tiles

I am trying to render a simple Leaflet-React map to the screen. But the tiles are all messed up and or not rendering. Take a look at the screenshot: I tried using the default OpenStreetMaps URL as well as a MapBox URL but both give the same result,…
RustyRaptor
  • 371
  • 2
  • 10
10
votes
2 answers

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, cluster the coordinates into Marker Clusters like…
nikjohn
  • 20,026
  • 14
  • 50
  • 86
10
votes
1 answer

How to disable single finger dragging on touch devices

When a user is dragging the page on mobile browsers, it acts like scrolling but when it comes to the map and the users finger is on the map, leaflet's dragging event is fired and scrolling is not. I want to disable single finger dragging but keep…
Ray Lee
  • 187
  • 1
  • 8
9
votes
5 answers

Next js with react-leaflet window is not defined when refreshing page

im using react-leaflet in Next js but when reloading page shows "window is not defined" even i am using dynamic import with ssr:false, i saw this question made by others here and tried answers that they offered but didn't work, also tried to make…
Riks1
  • 93
  • 1
  • 3
9
votes
1 answer

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 is code
Stevan Tosic
  • 6,561
  • 10
  • 55
  • 110
8
votes
5 answers

How can I disable or change the href on a React-Leaflet v4 Popup close button?

In react-leaflet v4, the Popup component has a default href associated with the close button that directs to #close. Is there a way in React to modify this href or disable the href redirection? It's breaking my react-dom HashRouter. Of note,…
RouteMapper
  • 2,484
  • 1
  • 26
  • 45
8
votes
3 answers

React Leaflet V3 Custom Control

There's a new react-leaflet version coming which can be found here: npm install react-leaflet/next docs: https://react-leaflet-v3.now.sh/docs/start-introduction which is a complete re write using hooks. Based on these new hooks i'm trying to write a…
Dylan Zemek
  • 128
  • 2
  • 6
8
votes
3 answers

react-leaflet not loading tiles and gilving 403 request error

I am using react-leaflet with tile provider Stadia OSM bright. when I run it locally Is showing tiles but when I make build and upload to server It stops loading tiles and starts giving request 403 forbidden error. I have an API key but not finding…
Irtaza Hussain
  • 317
  • 1
  • 5
  • 13
8
votes
1 answer

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 great Some text
astricus
  • 83
  • 1
  • 3
1
2
3
…
91 92