Questions tagged [react-leaflet-v3]
React components for leaflet maps. Use this tag for questions related to version 3 of react-leaflet only.
react-leaflet-v3
83
questions
0
votes
0
answers
69
views
React-leaflet image overlay always as a background regardless of resolutions?
Im having problems with ImageOverlay inside react leaflet, I want to have an image with fixed aspect ratio always be background and not be able to be zoomed out of it, but using fitbounds or ...
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
260
views
React-Leaflet, Change zoom and position according to object array
So this is my MapComponent, I have added logic wherein whatever is inputted in the search bar it will display those school that is in an array, what I wanna do is add some zoom and change position ...
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 ...
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 ...
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 , ...
0
votes
0
answers
118
views
Can't use react setState in EditStart, EditStop, DeleteStart and DeleteStop event from react-leaflet-draw
I am using React.js, react-leaflet, and react-leaflet-draw.
The problem I am facing is that I cannot update a React state in the EditStart, EditStop, DeleteStart, and DeleteStop events.
If I call ...
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 ...
3
votes
1
answer
741
views
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";
<div style={{ ...
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
279
views
react-leaflet, how I can search exact marker by marker id in react-leaflet?
I want to search exact marker using marker key or id in react-leaflet? is it posible? can someone help me. i am new for react-leaflet
I added some markers on my map. now i want to add search bar and i ...
0
votes
1
answer
634
views
Trying to integrate leaflet's movingmarker plugin to react-leaflet , i have no idea on how to do that .is there any other way to animate
These are my code
suggest me if there is an alternate way to animate my marker
https://ewoken.github.io/Leaflet.MovingMarker/
0
votes
0
answers
112
views
leaflet-draw error: TypeError: can't access property "falseFn", L.Util is undefined
Am getting the error TypeError: can't access property "falseFn", L.Util is undefined when using react-leaflet v3.2.0, NextJs v12.1.6, leaflet v1.7.1 and leaflet-draw v1.0.4. The issue is ...
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 = () => {
...
1
vote
0
answers
93
views
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 ...