All Questions
40
questions
1
vote
1
answer
339
views
How can I access the map object since the whenCreated prop was removed in react-leaflet v4.x?
I have been struggling with an issue which comes down to me not being able to properly reference the map object. After researching it for a few days, I've come to the conclusion that the "old&...
0
votes
1
answer
402
views
Using bringToFront() / bringToBack() in React-Leaflet to set Layer order
I want to set the layer order of my react leaflet map by calling bringToBack() on my selected layer after the component has rendered.
I tried getting the layer with useRef() and then calling ...
user22440243
0
votes
0
answers
154
views
Rendering Layers Selectively as Canvas / SVG in React-Leaflet
I have a map component with 1000+ overlapping polygons and want to show the Polygons from the Overlay layer always on top of the Polygons from the baselayer with the use of Panes. I found that using ...
user22440243
1
vote
0
answers
54
views
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 , ...
- 43
0
votes
1
answer
602
views
React Leaflet 4.2.0 - how to change zoom on button click?
**I would like to add a button next to the map, after clicking which I will be able to change the zoom of the map.
**
Is this feasible in the new version of react-leaflet?
Example scenario:
I display ...
0
votes
2
answers
304
views
React-Leaflet LocateControl component - keeps duplicating on each refresh
I'm using Locate Control in React Leaflet, but the Locate Control buttons are always duplicated, and sometimes I get 3 or 4 of them (see image below). I'm running the function through a useEffect with ...
0
votes
1
answer
402
views
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 = () => {
...
- 259
0
votes
1
answer
1k
views
How to Add Layer in React Leaflet & Routing Machine and Filter by Vehicle Code
You can see the component I created in the picture. Here are the different vehicles and their latitude and longitude values. I am routing according to these values. What I want to add at this stage is ...
- 143
0
votes
1
answer
658
views
React Leaflet Marker offset change
The tip of my markers does not come out exactly where it should.
You will see it more clearly in the screen output I will add below.
I wrote some properties for icon in L.Icon.Default.mergeOptions but ...
- 143
0
votes
2
answers
2k
views
How to make React Leaflet Marker popup in right side always?
I want to show a React Leaflet Marker popup on the right side of the map screen, but it always sticks to the left side of the screen. Therefore, I would appreciate any help in getting this done. Below ...
- 516
1
vote
1
answer
75
views
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(
&...
- 59
1
vote
1
answer
938
views
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?...
- 15
2
votes
1
answer
2k
views
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 ...
- 23
0
votes
1
answer
300
views
Geo Locate component in Leaflet React v3 - unwanted duplication on each refresh
I'm currently using Leaflet in React (v3) where you need to add components in order to render them on the map. This is the unwanted result output I am getting (green circles are duplicates and don't ...
- 17
0
votes
1
answer
1k
views
Pass function to divIcon in React-Leaflet
I'm new to React-Leaflet (using v3), so if I'm missing something obvious that's why.
For my current app I need to be able to have rotated markers on the map, which open up popups that should also be ...
- 3
0
votes
2
answers
1k
views
React-leaflet performance issue, prevent GeoJSON re-render
I have the following issue:
I would like to create a simple choropleth map using react-leaflet's GeoJSON component. I also want to have a tooltip that shows a value on hover over a GeoJSON feature. ...
1
vote
1
answer
2k
views
Custom icons for MarkerClusters in React Leaflet
I am trying to implement a custom icon for my markerclusters (instead of the regular circular clusters). I referred to the link and implemented as shown in the code below:
https://www.npmjs.com/...
- 33
1
vote
0
answers
334
views
React Leaflet - setState fired twice
I have the following code which renders a React Leaflet v3 map and allows users to construct a route by clicking at various points on the map. The total route distance is displayed below the map.
...
- 6,000
0
votes
1
answer
171
views
Using react leaflet version3 gave this kind of errors
Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#...
- 644
0
votes
2
answers
641
views
'LeafletProvider' is not exported from 'react-leaflet'
I had this error,
Attempted import error: 'LeafletProvider' is not exported from 'react-leaflet'.
when I tried to import LeafletProvider to one of my component file as follows:
import { withLeaflet, ...
- 166
1
vote
1
answer
3k
views
React Leaflet v3 : Good way to create a control
I'm displaying a map with react leaflet v3 in my react app.
I just want to add a custom control, but I can't figure out what's the good way to do that.
Actually, i do it like that, but it seems to be ...
- 143
2
votes
1
answer
2k
views
React-Leaflet-v3 Reusable Custom Control
Background
For React Leaflet v2, there was an NPM plugin, react-leaflet-control, that allowed you to create any kind of control and place it into the react-leaflet control container. Obviously with ...
- 190
0
votes
1
answer
240
views
How to hook into tileload event with React-Leaflet v3
I'm looking for a way to hook into the leaflet Events tileload or tileloadstart with react-leaflet (v3.1.0). However, they are not available in useMapEvents() or accessible in the TileLayer component.
...
- 1,219
1
vote
1
answer
2k
views
React-Leaflet: How to clear a Feature Group and add new components using state?
I'm relatively new to react-leaflet and react and am having trouble drawing new components on my map. I've been stuck for a week now so hoping someone can help. I'm attempting to clear the ...
- 127
1
vote
0
answers
344
views
Deleting current layer when a new layer is created with react-leaflet-draw version 0.19.8 in leaflet version 1.7.1 and react-leaflet version 2.8.3
I used the solution in this question (Delete layer before creating a new one with react-leaflet-draw in leaflet) to gain ability to draw only one shape(layer) in React and Typescript map project, but ...
3
votes
1
answer
4k
views
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 ...
- 151
0
votes
0
answers
595
views
what is the meaning Uncaught TypeError: Cannot read property '_zoom' of undefined after i use react leaflet marker cluster?
i getting stuck with using markercluster in react leaflet. i always get error Uncaught TypeError: Cannot read property '_zoom' of undefined, i already add markercluster.js, markercluster css but still ...
- 139
1
vote
1
answer
2k
views
How to open a specific popup on map load?
Using React-Leaflet V3.1.0 with an Express server.
My users have requested the ability to use a link in the following format:
https://www.mymap.com/id/:category/:id/:zoom
This sends a request to the ...
- 23
1
vote
2
answers
4k
views
react-leaflet: Clear marker cluster before rendering new markers
TLDR; Is there a way to clear all markers from a marker cluster using react-leaflet and react-leaflet-markercluster?
EDIT: Yes, there is! I just added a key prop to the MarkerClusterGroup, as @...
1
vote
1
answer
2k
views
updating props when using createControlComponent in react-leaflet 3
Following the offical reference for Higher Level Component Factory to update props for a Control Component
The core APIs export other high-level component factories that can be
used in a similar way.
...
- 1,009
1
vote
1
answer
401
views
When I load the map React leaflet will some open popups be initialized?
I was able to get the map reference using
const map = useRef (null) but now I need to have some popup open when I start the map;
const map = useRef (null);
<MapContainer
zoom={15}
center={...
- 31
0
votes
1
answer
890
views
using react-leaflet-editable with react-leaflet 2.8.0
I am integrating/including react-leaflet-editable to my existing project which relies 100% on react-leaflet v2.8.0. I am not able to upgrade at the moment as it requires too much changes to the entire ...
- 2,035
1
vote
1
answer
1k
views
How to add tiles nested in leaflet map to canvas with latest version of react-leaflet?
I'm trying to add map on the canvas and put tiles there with react-leaflet library v3.X. At the moment tiles are displaying as <img> in HTML. In latest versions of react-leaflet there isn't Map ...
0
votes
1
answer
1k
views
Trying to display a marker where clicked on React Leaflet map
Here's the entire piece of code.
import React, { useState } from "react";
import { Marker, Popup, useMapEvents } from "react-leaflet";
const AddMarkers = () => {
const [...
- 115
0
votes
1
answer
654
views
How to change tile layers in leftlet sidebyside or leaflet splitmap
according to this codesandbox I was trying to change the left or right layer of my map by mutating the state but it change the whole map tile when I'm changing it.
Any idea suggestion would be greatly ...
- 2,642
1
vote
1
answer
1k
views
Search Box implementation in React-leaflet v3.1.0 give an error "TypeError: Object(...) is not a function"
I used the kboul code to add a search box in React-leaflet v3.1.0, but I get this error "TypeError: Object(...) is not a function", maybe beacause I already set an instance of map in my ...
- 59
2
votes
1
answer
1k
views
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 ...
- 287
3
votes
2
answers
3k
views
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 ...
- 59
0
votes
0
answers
867
views
How to rewrite from react-leaflet v2 to v3?
There is a library that runs on react-leaflet v2. https://github.com/somarmeteorologia/react-leaflet-markers
But my project uses react-leaflet v3. Therefore, this library needs to be rewritten for the ...
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