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
87
votes
18 answers

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 the application it says, …
Gimhan Wijayawardana
  • 1,978
  • 2
  • 6
  • 10
82
votes
18 answers

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' import { Map, Marker, Popup, TileLayer } from…
ThomasThiebaud
  • 11,331
  • 6
  • 54
  • 77
54
votes
6 answers

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 region of the client browser location. Here's…
cbll
  • 6,499
  • 26
  • 74
  • 117
40
votes
7 answers

custom marker icon with react-leaflet

I tried everything I found on the web, Stackoverflow and Github, and I still can't make it. I want to make a custom marker with a custom icon, but with my code below I always got an error : 'TypeError: options.icon.createIcon is not a function' Here…
arnaudambro
  • 2,403
  • 3
  • 25
  • 51
31
votes
9 answers

React-Leaflet marker files not found

I've got very simple code to display a map using react-leaflet and place a marker on it. However, i get the following two errors in my browser console GET http://localhost:8080/marker-icon-2x.png 404 (Not Found) GET…
user3059217
  • 521
  • 1
  • 6
  • 9
29
votes
9 answers

Leaflet with next.js?

I am getting a ReferenceError: window is not defined when using next.js with leaflet.js . Wondering if there's a simple solution to this problem - is using next.js overcomplicating my workflow? for those curious with the exact code, import React,…
LeCoda
  • 538
  • 7
  • 36
  • 79
21
votes
3 answers

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 am using react-leaflet. Here is the solution if I…
Dox
  • 571
  • 1
  • 5
  • 15
20
votes
3 answers

Rendering GeoJSON with react-leaflet

I've got simple component to pick point on map and then display some GeoJSON data related to this point: import React, { Component } from 'react'; import { Map, Marker, TileLayer, GeoJSON } from 'react-leaflet'; import…
Titenko Stanislav
  • 525
  • 1
  • 3
  • 12
17
votes
4 answers

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 react components. My site also uses react-bootstrap.…
Peter G.
  • 7,816
  • 20
  • 80
  • 154
16
votes
3 answers

Constructing a lot of markers on react-leaflet map is too slow

I have a dataset of 4360 geomarkers that I want to display on the Leaflet map. CircleMarker works just fine and the performance of the constructed map is ok. However, constructing the map takes too much time (around 20 seconds). Without react it…
Alex Netkachov
  • 13,172
  • 6
  • 53
  • 85
16
votes
3 answers

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 'react-dom'; import Control from…
nicq
  • 2,182
  • 5
  • 22
  • 38
14
votes
1 answer

CRA + React Leaflet: failed to compile

I've just started a brand new project using create-react-app and set up react-leaflet as their documentation recommends here. I am trying to use this example to check if it's all working good but then I'm receiving the following…
Victor Seara
  • 141
  • 1
  • 3
14
votes
4 answers

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 tried to get it by using ref, but it's not…
PauCasademont
  • 279
  • 4
  • 18
13
votes
5 answers

Why I am getting 'Map' is not exported from 'react-leaflet'?

Why I am getting: ./src/components/mapComponent/MapView.jsx Attempted import error: 'Map' is not exported from 'react-leaflet'. I am importing this in the component: import React, { Component } from "react"; import { Map, TileLayer } from…
YoungDad
  • 765
  • 2
  • 6
  • 14
13
votes
3 answers

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 when i click on map but I don't know how to…
Maryam Alishahi
  • 382
  • 1
  • 5
  • 16
1
2 3
…
91 92