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
-1
votes
1 answer

How can I open a modal using react-leaflet?

I am trying to use the library react-leaflet and I want to open a modal when we click on a button on the popup but I do not achieve to do that. Here is my code : import React from "react"; import { Map, TileLayer, Marker, Popup } from…
teatzr
  • 59
  • 7
-1
votes
2 answers

Leaflet.gesturehandling two finger drag / page scroll prevention

I'm using leaflet.gesturehandling with react to support two finger scroll and ctrl+scroll-wheel with leaflet. Testing this feature using the demo i see that on desktop all is well. On mobile however, i find the behaviour is pretty eratic. the page…
RSmith
  • 19
  • 4
-1
votes
1 answer

Can't set React-Leaftlet Maps CRS using a JSON variable

I can't set the crs for React-Leaflet using this code: import CONFIG from 'config/config.json'; . . . . { this.leafletMap = m; }} center={this.props.mapCenter} zoom={zoomLevel} crs={CRS.EPSG900913} // This works …
Rupp
  • 9
  • 1
  • 1
  • 3
-1
votes
2 answers

Marker Clustering (Leaflet.markercluster) with react-leaflet 2.0

Trying to get Leaflet.markercluster working with react-leaflet 2. https://github.com/OpenGov/react-leaflet-cluster-layer does not appear to be compatible with 2.x. Any example code to get me started is appreciated!
Tim Kelty
  • 261
  • 2
  • 13
-1
votes
1 answer

how to use font awsome as a marker in react leaflet when click on map?

I use react-leaflet package and I need to add custom font awsome when user click on point of map.like when a place is metro, icon become metro icon and so on. I mean user select icon when click on map, or add an icon when click on map.
afsaneh
  • 9
  • 5
-1
votes
2 answers

react-leaflet search plugin not working. Can anyone help me out with this

I tried to implement react-leaflet search from https://github.com/tumerorkun/react-leaflet-search but, it didn't worked. following is my code (without including react-leaflet search). Can anyone help me with it. Hi, I tried to implement…
MJ019
  • 13
  • 1
  • 5
-1
votes
1 answer

react-leaflet : find data displayed on map when zoom level changes

I have a list of locations displayed alongside leaflet map. The map displays all the locations on the list. When I zoom in the map, the visible locations on the map decrease (as expected). Now, I would like to filter the list to display only those…
Sanjana
  • 1
  • 2
-2
votes
0 answers

How to change places names to english in the leaflet map

I have a leaflet map on my website the cities are being showed in national languages but I want cities to be showed in english I tried OpenStreetView and it did not work.
Mohammad Kashif
  • 11
-2
votes
2 answers

How to call getFeatureInfo from react-leaflet?

I have example from github how to add wms layer: https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/wms-tile-layer.js but how to getFeatureInfo on click from wms layer?
Sergey Komarov
  • 9
  • 5
-2
votes
1 answer

Is there a way to show drop down in react leaflet on the map

I am trying to show a simple dropdown on the react leaflet map to show markers of certain data. Once the user chooses an option from drop down i want some data to display on the map. Currently i have not found a straight forward way to do it. Or any…
Nikhil Kondabala
  • 35
  • 1
  • 5
-2
votes
1 answer

Leaflet-DVF+ReactJs:Uncaught TypeError: Cannot read property 'call' of undefined(…)

When I'm trying to add layers (L.MapMarker and L.ArcedPolyline) in react component using Leaflet-Dvf library, I'm getting the following error: Uncaught TypeError: Cannot read property 'call' of undefined(…) Leaflet-dvf reference:…
vibs
  • 29
  • 1
  • 7
-3
votes
1 answer

How to create a map by using react leaflet

How do I create a map using leaflet as I was doing it is showing the following. ./src/Map.js Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap'). Here Is My Code: import React from 'react'; import…
Maaz Parkar
  • 11
  • 1
  • 1
-3
votes
1 answer

Larger number of markers on map

I'm using react-leaflet to show markers on a map, and have 5000 markers with pop up to show up on the map, which works perfectly, but markers taking too much time to show on the map like 5 to 7sec in react.js. Is their a way to make it faster?
Qamar Azam
  • 91
  • 4
-4
votes
1 answer

How can I execute a function with onclick in NextJs?

I am currently working on a NestJS-project, but I’m just a beginner. My Web-application should display a leaflet-map with clickable tiles. For each tile I want to display a button which when clicked fires a function. Unfortunately, the tags do not…
Chris_Len
  • 19
  • 5
-4
votes
1 answer

How to custom popup style?

I would like to create a new style for recenter the map in popup. I don't see how do.. Example :
jazzguitar soul
  • 1
  • 1
1 2 3
…
91
92