All Questions
39
questions
0
votes
1
answer
136
views
React Leaflet map resizing issues
While using react-leaflet to create a map, I would like the map component to take over all the available space after header and footer. The code seems to work. However, when the resize handler is ...
- 92
0
votes
0
answers
114
views
Problem creating an L.Map instance with React-leaflet
There is a map state defined as
const [map, setMap] = useState(null);
Here is the snippet which is supposed to initialize the map:
<MapContainer
center={
areaOfInterest.latitude ? [...
0
votes
0
answers
99
views
How to properly change a loaded KML in react-leaflet-kml
I am using react-leaflet-kml and the functionality I am trying to make is a list of buttons corresponding to a KML file, which will make the map load/render that KML.
Currently, the buttons simply ...
- 160
0
votes
0
answers
71
views
How can I make a programmatic click in react-leaflet?
I am working on a map webapp, that should react on navigation from another route in the following ways:
fly to coordinates
click on them programatically
// fly
const map = useMap();
...
0
votes
0
answers
126
views
State not changing in leaflet map.on("click") function in React
I'm using Leaflet with React (not react-leaflet because there seems to be a lot more documentation for standard leaflet), and I want to add functionality in which a user can place Markers on the map.
...
- 43
1
vote
2
answers
314
views
React Leaflet update position
I've got a question about React Leaflet. I am now trying to build a PWA with the react framework and I need to use a map, hence React Leaflet.
So here's the situation :
I need to load the Map when I ...
0
votes
2
answers
594
views
Leaflet map is not displayed in ReactJS
I have included both the css and js Leaflet map CDN links.
Also given height and width to div container inside which Map component is present, but still the map is not getting displayed. The space of ...
- 1
0
votes
0
answers
665
views
React Leaflet Waypoints route in Sea
By using react-leaflet and leaflet npm, I have been implementing ship live location tracker. I have implemented the UI and functionality. But, I need waypoints in sea. But It always showing tracker ...
- 376
2
votes
0
answers
87
views
Leaflet map not rendering full image properly on mobile devices
I'm currently working in a react web-app. We are using leaflet to render some buildings maps. The app is working good in desktop. But we found the maps images are not loaded properly when using mobile ...
- 51
0
votes
0
answers
318
views
Why am I getting invalid hook errors here in my React app?
Trying to bring in Leaflet to display a map using code from their website. Saw a tutorial with a guy bringing in the same code with no errors - it's React typescript template btw
My code:
import React ...
- 1
0
votes
1
answer
813
views
Parameters of my function in React child component are not being passed to the parent component's function. Why is this happening?
In the parent:
const [newPinPosition, setNewPinPosition] = React.useState({ lat: 0 , lng: 0 });
const updateNewPinPos = (pos) => {
console.log(pos);
setNewPinPosition({ lat: pos.lat, lng: ...
- 61
0
votes
1
answer
128
views
Dynamically add circles to react leaflet with blockchain
I have read this post which partly answers my question, but my problem is the infinite loop that the provider.on method creates with setData(_data). I simply want to update the circle information to ...
- 175
0
votes
0
answers
1k
views
useEffect hook isn't triggered inside ReactDOMServer.renderToString()
I'm using leaflet and react-leaflet libraries to create a map inside a React Js app as well as Material UI library for the core UI components.
I'm creating a custom cluster and marker components (...
- 2,194
0
votes
1
answer
131
views
The states is updating but not rendering
When I wanna click recover or deaths I want to change circle color. When I was consoled state value updated but circles color didn't change. Here are codes and pictures. I tried everything I know but ...
user17768986
0
votes
1
answer
97
views
How to pass state down to child component's handler?
The GeoJson component has a function onEachFeature that calls a handler, in this case it is createPopup.
<GeoJSON data={covidGeoJSON} onEachFeature={createPopup}></GeoJSON>
Within the ...
- 39
1
vote
1
answer
4k
views
React hooks cause unintentional re-render
I am working with a React + Leaflet map and noticing the map container / elements re-render any time I show or close a modal.
I have created a sandbox to demonstrate the problem, but this occurs in ...
- 57
-1
votes
1
answer
835
views
How to correctly connect react components using useContext and useRef [closed]
I would like to after button onclick event call method of component which uses external library (leafletjs). Here is basic example. My button just sets true or false value in Context.
import React, { ...
- 159
0
votes
1
answer
204
views
Problem with using method setPaths ( Leaflet PolylineDecorator)
I wanna update the component and change the lines.
When I try to send new props with coordinates, old coordinates also staying.
const PolylineDecorator = withLeaflet(props => {
const { positions } ...
0
votes
1
answer
568
views
Cannot destructure property 'MapContainer' of 'reactLeaflet' as it is null
I have a React functional component that has a react-leaflet map being rendered on the server-side. The map shows perfectly, but when I add a click event handler function to pass to the parent ...
- 445
0
votes
1
answer
1k
views
React-leaflet giving window undefined error
I am using react-leaflet and server-side react to draw a map. I created a map component and also tried using the useEffect hook to dynamically load the import to bypass this error:
ReferenceError: ...
- 445
0
votes
2
answers
454
views
Leaflet: Remove Cursor Panning
I have a React implementation of a leaflet map with a custom cursor. The cursor's functionality is determined by:
L.CursorHandler = L.Handler.extend({
addHooks: function () {
this._popup =...
- 65
0
votes
1
answer
522
views
attaching onAnimationEnd for React-Leaflet CSS SVG route animation
I'm using the following to animate the route being drawn in React Leaflet, which works nicely. However I'd like to use onAnimationEnd for the CSS. I can't figure out where to find the element and ...
- 1,009
0
votes
1
answer
398
views
React.js / Leaflet -- Run useEffect on Mount only in DevServer
i'm running into the behavior, that i must run the useEffect Hook only once in react.
the reason is mainly because i have to init a leaflet.js map which must not happen more than once.
but whenever i ...
- 77
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
0
votes
1
answer
978
views
Changing the react-leaflet layer url by mutating react state throws error -> TypeError: Cannot read property 'call' of undefined
I'm trying to build a map with a selectable and dynamic layer URL with the code below.
When I try to change the layer URL by the state it shows the error in the screenshot attached.
I have stored all ...
- 2,642
1
vote
1
answer
2k
views
React/Leaflet-side-by-side Error: Map container is already initialized. #35
I'm having issue while rerendering the map with useEffect
const [baseViewCoords, setBaseViewCoords] = useState([37.715, 44.8611]);
const searchApiHandler = () => {
// some code that will ...
- 2,642
0
votes
1
answer
787
views
React useCallback function runs in infinite loop
I am trying to use leaflet-geoman library in a React project. I need to create a custom toolbar button that enables and disables global drag mode.
When toolbar button is clicked, map.pm....
- 8,753
1
vote
1
answer
909
views
How can I make Markers appear on a map when I zoom on it with Hooks
I'm relatively new to frontend developement and I have issues finding the right documentations to help me with this feature.
I've been trying to make some markers appear when zooming to a certain ...
- 11
1
vote
1
answer
652
views
React useReducer: Payload is received, state not updated
I am using this article to help with using the useReducer hook.
I have created this context component because I am using the react-leaflet routing machine to create markers for the route and I'd like ...
- 7,589
1
vote
2
answers
11k
views
How to get map properties and handle events in leaflet v3 with react + redux?
I am new at react redux (and hooks) and I've been following this general tutorial:
I'm also interested in using react-leaflet, which at the time of this writing is on v3 which uses hooks. I've gotten ...
- 1,171
1
vote
1
answer
1k
views
Why it is giving me a Hook warning, while I am not using any hooks in my component?
I am trying to display Leaflet Map as a React component. Once I try to use this component I get the error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component....
- 825
1
vote
2
answers
1k
views
On react-leaflet moving a few markers by useRef array
I'm trying to change the position of a few markers on a react-leaflet map according to the position of a draggable marker.
This should be while the draggable marker is dragged, changing it on the ...
- 503
1
vote
2
answers
600
views
Not able to access DOM in useEffect hook when testing with Jest/Enzyme
In my useEffect hook I initialise a Leaflet map. It works all fine. But in the test it says "Map container not found.". To confirm I tried console.log(document.getElementById('mapid')). It ...
- 1,617
3
votes
2
answers
4k
views
How can I access React state in my eventHandler?
This is my state:
const [markers, setMarkers] = useState([])
I initialise a Leaflet map in a useEffect hook. It has a click eventHandler.
useEffect(() => {
map.current = Leaflet.map('mapid')....
- 1,617
0
votes
0
answers
437
views
Using leaflet.offline in react Typescript not a function
I am trying to add offline functionality to leaflet map, im using React-leaflet and leaflet.offline: https://github.com/allartk/leaflet.offline/blob/master/docs/api.md
I am importing it like the ...
- 230
1
vote
1
answer
2k
views
Clearing map layers with react-leaflet and hooks
I'm building a custom plugin for react-leaflet to locate the user using leaflet's locate method.
It works basically, but with the one problem of the layer not clearing between turning location off ...
- 343
0
votes
1
answer
3k
views
react-leaflet, markers re-render when the popup is opened/closed
The problem is that every time I hover on a marker a popup is opened or closed and it causes all the markers to re-render even though my state is not changing. console.log(myState); is running every ...
- 317
0
votes
1
answer
520
views
event handlers function like onload and onLocationfound are not working function is not being excecuted
I'm trying to get the current user location with the following code:
const OSMap: React.FC = () => {
const [mapState] = useState({ lat: 51.505, lng: -0.09, zoom: 13 })
const ...
- 229
0
votes
0
answers
263
views
React component isn't re-rendering when I use useEffect and setState
I am writing a react app with react-leaflet map library. However, when I use useEffect to fetch data from firestore, after fetching the data successfully, the map component doesn't re-render at all.
...
- 191