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

fixing react-leaflet testing error: Cannot read property '_layerAdd' of null

I'm having some issues with the basic rendering tests from create-react-app and the Polyline component from react-leaflet. Whenever I try to add the Polyline as a child to my Map, I get the test error message: TypeError: Cannot read property…
wilcoxmd
  • 89
  • 1
  • 2
8
votes
2 answers

Map component: Cannot read property 'initialize' of undefined

I'm trying to get a basic map working using react-leaflet.js. Here's my code: import React from 'react'; import { Map } from 'leaflet'; const mapStyle = { height: '400px' }; const mapCenter = [0, -0]; const zoomLevel = 3; export default class…
mtmacdonald
  • 14,216
  • 19
  • 63
  • 99
8
votes
2 answers

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.EdgeMarker.js file from the repo and added it to my…
danyhiol
  • 594
  • 2
  • 7
  • 26
7
votes
1 answer

Problem testing react component that implement react-leaflet map with jest

I have the following issue when I tried to test a react components that implement the react-leaflet library …
Ramon Colmenares
  • 71
  • 2
7
votes
1 answer

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/leaflet.offline), but I'm unsure of how to use this…
Tmfwang
  • 574
  • 4
  • 15
7
votes
1 answer

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 undefined (anonymous function) Please help…
Helen
  • 157
  • 1
  • 8
7
votes
4 answers

useRef value is undefined on initial render

I'm making a map with react and react-leaflet. React Leaflet has a class called FeatureGroup, which I want to access on the first render using the useRef hook from React and then accessing the value in a useEffect function. However on initial render…
mivd
  • 267
  • 1
  • 3
  • 10
7
votes
1 answer

Why does renderToString throws error about useLayoutEffect while rendering Material-UI component?

I am using React v.16.12.0 and @MaterialUI/core v4.8.1. I am trying to create custom icon for React Leaflet Marker. The icon is a Fab component from Material-UI. To do that, I need to pass a HTML string to L.DivIcon (DivIcon Docs) Leaflet component,…
Marcin
  • 220
  • 3
  • 14
7
votes
1 answer

React-leaflet how to get map bounds and center it?

I want to get this map bounds and center it map I tried with getBounds() and getCenter() but it was undefined. then i found this but it says Cannot read property 'leafletElement' of undefined Thanks for your help in forward. class FortMap extends…
Patrik Mulató
  • 75
  • 2
  • 5
7
votes
1 answer

How can one make an ellipse in react-leaflet?

I am trying to draw an ellipse on a map made using react-leaflet, which has built-in support for circles and rectangles. To achieve this, I am using code to produce an ellipse in (non-react) leaflet from here, that I have adapted and pasted…
Shafique Jamal
  • 1,550
  • 3
  • 21
  • 45
7
votes
3 answers

React-Leaflet Search Box Implementation

Are there any resources showing a search box implementation with react-leaflet? I'd like to have my map pins populate upon a search result that would query and retrieve my existing data. ie: const names = [ {name: 'Joe', location: '40.734621,…
Null isTrue
  • 1,882
  • 6
  • 26
  • 46
7
votes
1 answer

Rendering react components inside popup of react-leaflet-draw drawn layer on react-leaflet

I'm trying to render some react components inside a layer created by react-leaflet-draw. This is my attempt: _onCreate(e) { var layer = e.layer layer.bindPopup( …
Ricardo Oliveira
  • 97
  • 1
  • 6
7
votes
4 answers

Render mapbox vector tiles inside react-leaflet?

Is there a way to use vector tiles from react-leaflet? I am aware of Leaflet.VectorGrid, but it is not written for react-leaflet?
Bjorn Reppen
  • 22,007
  • 9
  • 64
  • 88
7
votes
2 answers

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 works. highlightFeature(e) { var layer =…
Alex Parij
  • 1,168
  • 1
  • 14
  • 21
7
votes
6 answers

Popup always open in the marker

Is there any way the popup always stays open and does not need to click on it to open? Expected behaviour Actual behavior
Titxo
  • 73
  • 1
  • 1
  • 6
1 2
3
…
91 92