All Questions
1,098
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,999
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,453
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
18
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,954
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
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.9k
13
votes
3
answers
26k
views
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 ...
- 442
13
votes
2
answers
3k
views
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, ...
- 17.7k
12
votes
2
answers
14k
views
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-...
- 337
10
votes
3
answers
9k
views
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, ...
- 21.1k
10
votes
1
answer
3k
views
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 ...
- 7,029
9
votes
1
answer
13k
views
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 ...
- 187
9
votes
1
answer
5k
views
componentDidUpdate prevProps gives me current / new props
I'm trying to integrate a leaflet map but I think that is not the problem here. Anyway to re-render my map I want to use componentDidUpdate to see if the props changed I pass down to my map component ...
- 1,129
8
votes
2
answers
4k
views
Pass A react component to leaflet popup
I am using leaflet in my react code and I am not using react-leaflet. I want to pass a react component or jsx code to binbPopup function to every tooltip.
let marker = new L.marker(...).bindPopup(<...
- 1,792
8
votes
1
answer
5k
views
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/...
- 650
8
votes
1
answer
6k
views
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 ...
- 83
8
votes
3
answers
14k
views
Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer> [duplicate]
I'm using react-leaflet and I added a marker with an event Handler on click to zoom to this marker , but when I try to use const map=useMap() all I get is this error => :
Uncaught Error: No context ...
- 541
8
votes
2
answers
3k
views
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....
- 669
7
votes
2
answers
18k
views
Change Center position of React leaflet map
So what I'm trying to do is, I want to change the center of map after I get the users lat and lng,
the code below will make the problem clearer:
<LeafletMap
center={this.state.UserCurrentPosition}...
- 375
7
votes
4
answers
2k
views
React-leaflet map shows scattered blocks of maps
I was trying to show a sample map on my react website. I have installed the leaflet package and also the react-leaflet package then set everything up as the react-leaflet document said to do. You can ...
- 129
7
votes
2
answers
3k
views
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 ...
- 1,246
7
votes
2
answers
11k
views
Next.js dynamic import with server-side-rendering turned off not working on production build
I'm currently building a site using the leaflet package. This package however needs the window object. That's why I'm importing a component made with leaflet as a dynamic component with ssr turned off....
- 188
7
votes
0
answers
3k
views
React Leaflet.draw: How to create draw functions with standard buttons without using the react-leaflet toolbar, however, have it written in "React"
how can I create custom buttons that reside on a leaflet map in a separate control box to create "Polylines", "Polygons" or a "Marker" which will all be on separate ...
- 71
6
votes
3
answers
6k
views
React Leaflet - Marker image fails to load
Issue
I'm using leaflet v1.7.1 and react-leaflet v3.0.5 in my React project.
When I try out the setup example in React Router's "Setup" documentation page, the marker icon becomes a broken ...
- 2,948
6
votes
3
answers
2k
views
React Router Link doesn't work with LeafletJS
Versions:
react-router-dom 4.1.1
react-router-redux 5.0.0-alpha.4
react-leaflet 1.1.3
leaflet 1.0.3
Steps to reproduce
I create a leaflet map. In which I add some markers. These markers have popups....
- 1,846
6
votes
1
answer
10k
views
How to use Leaflet Routing Machine with React-Leaflet 3?
The old way of doing things in react-leaflet 2.8.0 was to use MapLayer and withLeaflet.
But now in react-leaflet:
MapLayer and withLeaflet are deprecated as of version 3.
I'm trying to grasp the ...
- 1,009
6
votes
5
answers
9k
views
close popup react-leaflet after user click on button in popup
So basically want to make custom close for react-leaflet Popup component, seams that is not a big problem to do with native API leaflet but with react component from react-leaflet I can't find the ...
- 171
6
votes
2
answers
5k
views
An example of using the 'react-leaflet' new useLeaflet() hook?
I'm trying to get a reference to the leaflet object using the hook, so I can query the new map boundaries on different events (like Map.getBoundaries()). I'm pretty new to reac-leaflet, and this ...
- 1,118
6
votes
1
answer
2k
views
React Leaflet map rendering all over the page
I am fairly new to React and Leaflet. I have gotten Leaflet working just fine in a simple HTML page. So now I am trying to make a more dynamic site by using React.
The problem I am running into is I ...
- 3,421
6
votes
1
answer
5k
views
How to select an area in react leaflet
I am using react leaflet to interact with leaflet map. Now I want to use a leaflet plugin called leaflet-area-select to select an area on the map and get current long lat of the rectangle selected. ...
- 159
6
votes
0
answers
2k
views
Leaflet map with react-leaflet-markercluster cluster spiderfy's or closes onClick
I have a Leaflet map in React using react-leaflet and react-leaflet-markercluster
Clustering seems to work beautifully, but if I click on one of the cluster CircleMarker or Tooltip it opens a new ...
- 91
6
votes
3
answers
4k
views
enable react-leaflet to use be usable offline
I have been using the react-leaflet library, so far it worked well.
Now I wanted the site to pre-load as much of the tiles as possible so that the web-app(also a PWA) could be used w/o internet.
I ...
- 2,012
5
votes
3
answers
9k
views
react leaflet mouseover / hover popup
Hej!
I want my popup to open via a hover/mouseover.
I tried the recommended but it still only opens on click. Does anyone have an idea what is missing?
Any help is appreciated!
import React from "...
- 158
5
votes
3
answers
8k
views
react-leaflet create a custom components
I would like to create a custom component with react-leaflet that shows the actual position (x,y) of the mouse, but I don't know how to create it. I found react-leaflet-control but it seems that it is ...
5
votes
2
answers
11k
views
Missing Leaflet Map Tiles when using react-leaflet
I am using the simple example from leaflet-react in a barebones create-react-app app.
Problem: The map tiles do render, but there is always 1-2 rows of map tiles that do not render (grayed out). ...
- 62.9k
5
votes
2
answers
7k
views
Add text inside leaflet rectangle
I'm using the following code to create a rectangle in the leaflet map.
const rectangles = [[51.49, -0.08], [51.5, -0.06]]
<Rectangle key={key} bounds={rectangle} color="green">
</...
- 1,346
5
votes
2
answers
3k
views
Open Pop Up on Click Outside of Map
I have a list, and through clicking on the list Elements, I want to open the pop up on the marker. Currently, the pop up only opens when the marker is clicked.
This is how I create the marker and ...
- 11.9k
5
votes
2
answers
624
views
Extracting underlying data via RSelenium with embedded leaflet svg, and more
I would like to extract information about each ad in this link. Now, I got to the stage where I can automatically click See Ad Details, but there is much underlying data that is not straightforward to ...
- 4,240
5
votes
6
answers
8k
views
useLeafletContext() can only be used in a descendant of <MapContainer>
I am in the process of converting a leaflet-map in React into a hook with the use of react-leaflet and react-leaflet-markercluster. Everything worked perfectly except the use of the MarkerCluster ...
- 156
5
votes
1
answer
6k
views
Leaflet error: clearLayers is not a function
I'm using a Leaflet offline map with React where I manually load in a countries.js GeoJSON file with every country in the world. I then conditionally color each country depending on data received from ...
- 6,999
5
votes
1
answer
2k
views
React Leaflet popups not working on mobile devices
I'm using react-leaflet in an application and it works as intended unless it is viewed from a mobile device (both physical and through dev tools). On mobile devices, the popups will appear and ...
- 421