React components for leaflet maps. Use this tag for questions related to version 3 of react-leaflet only.
Questions tagged [react-leaflet-v3]
86 questions
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
3
votes
1 answer
Map not showing in react leaflet
Why the map is not displayed in react leaflet?
import { MapContainer, Marker, TileLayer, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
Aina Fanantenana
- 33
- 4
3
votes
1 answer
Module parse failed: additional babel_loader
I have been using react-leaflet for a while now, and after a few weeks I deleted the files inside the node_modules and reinstalled them, and I did not touch the react-leaflet version at all, but when I try to run the project, it gives me an…
TahaArab
- 151
- 1
- 7
3
votes
2 answers
How to set the map to a geolocation on map load with React-leaflet v3
Hello I would like to load the map with the geolocation coordinates.
Right now I have my map loaded on a defined center and when the event onClick happens, the view is set to the geolocate location.
I just would like that this happens when I load…
emarubi
- 59
- 5
2
votes
1 answer
TypeError: Cannot read properties of null (reading '_leaflet_disable_click')
I am using react-leaflet with nextjs and I have markers, inside the popups of these markers there is a button that open another page when clicking, but I am getting this error when opening the another page:
Unhandled Runtime Error
TypeError: Cannot…
Kiki
- 23
- 3
2
votes
1 answer
leaflet marker popup opening and immediately closing
In my leaflet map, clicking on a marker opens its popup and immediately closes it.
Logging of map events reveals that instead of firing just a popupopen event, the click on the marker triggers 2 events - popupopen followed by popupclose of the same…
orange77
- 933
- 8
- 12
2
votes
1 answer
how to use react-leaflet-easyprint with react-leaflet 3
react-leaflet-easyprint has examples and docs for react-leaflet v1 and v2.
However, out of the box it seems to be incompatible with v3.
How can i make it work with v3?
rept
- 87
- 7
2
votes
1 answer
React leaflet Canvas
I am trying to draw about 50K points with the leaflet Marker method and it's impossible du the time rendering and ram needed.
The new method I saw is to use Leaflet-canvas to draw point on-screen ' not in the DOM.
How can I perform this in React…
Vlad_Gesin
- 118
- 1
- 9
2
votes
1 answer
React Leaflet LayersControl.Overlay with multiple markers
I have a map that displays a marker for every diferent public facilities in a city and I want to have a group of checkboxes to filter this facilities according to its typology, one checkbox for typology. Each typology will have multiple markers and…
PauCasademont
- 279
- 4
- 18
1
vote
0 answers
React-leaflet LeafletTrackingMarker does not work when it's under MarkerCLusterGroup
how to move smooth markers from old coordinate to new coordinate in MarkerCLusterGroup
i have a code in reactjs that works perfectly for LeafletTrackingMarker
lets assume that i have 10 position , when there is an one position get updated there is…
MR Int
- 43
- 6
1
vote
1 answer
React-Learflet - Change circle opacity when clicked
I'm trying to change my circle Opacity when I click on it to act as an active state
I declared my state
const [active, setActive] = useState(false)
My function
const sidebarTrigger = () => {
setActive(true)
}
this is how i'm trying to…
Phakamani Xulu
- 259
- 5
- 14
1
vote
0 answers
Add event handler to element in custom child component for MapContainer
I am using react-leaflet (v3.2.5) with leaflet (v1.8.0). We need pretty custom zoom buttons and one additional 'home' like button on the map, which look like this:
So I am trying to create a custom controls component like this (
BairDev
- 2,865
- 4
- 27
- 50
1
vote
1 answer
React function returns the last item in the JSON instead of mapping all of them
const ZoomToLocation = ({latitude, longitude}) => {
const map = useMapEvents({
click() {
map.setView([latitude, longitude], 15)
}
})
return null
}
function MyMap() {
return(
{loc.map(loc => (
Gatnik
- 27
- 6
1
vote
1 answer
Built in types of marker icons in react leaflet
I wanted to know if there is any other type of marker that comes with react leaflet apart from the default blue one. Also without uploading any icon image, how can I customize the existing marker icon? I have already tried to refer many online…
c0mp1eX
- 15
- 4
1
vote
0 answers
React leaflet can't delete zoomControl
I'm using react-leaflet version 3.2.5 and I can't seem to disable the map's native zoomControl.
The propety zoomControl={false} disable the component ...
In some video, people use this method for disable the native ZoomControl.
If I use…
Yoan Bousquet
- 59
- 5