Leaflet Map not rendering when I change the lat and long in React

1

Hello guys, I hope all are doing great!

Currently, I’m working on a project where I record latitude and longitude and show coordinates on the map using LeafletJS in React. When the lat. and long. point change, it should show the changed coordinate map and a marker at that coordinate. The problem I faced during this project is that as I change the coordinates, the map is still showing the old coordinate location. The marker is being pointed to the updated coordinate. I don’t know what’s wrong.

Could you guys please look and tell me what’s wrong?

React JS Code:

import {React, useEffect, useState} from 'react'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

const MapComponent = ({ipTracker}) => {

  const [map, setMap] = useState(null);
  useEffect(() => {
    if (map && ipTracker) {
      map.setView([ipTracker.location.lat, ipTracker.location.lng], 13);
      console.log(map, ipTracker);
    }
  }, []);

  return (
    <div className="main-map w-full h-[54vh]" id='map'>
      <MapContainer center={[ipTracker.location.lat, ipTracker.location.lng]} zoom={13} className='h-[54vh] z-0'>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[ipTracker.location.lat, ipTracker.location.lng]}>
        <Popup>
          {ipTracker.location.lat} <br /> {ipTracker.location.lng}
        </Popup>
      </Marker>
    </MapContainer>
    </div>
  )
}

export default MapComponent

Desired Functionality:
Recording 2024-04-14 170220

Actual Case:
Recording 2024-04-14 171832-min

2

Hello!

Can you help me understand: I see a useState hook that manages the state of setMap, in the useEffect setView gets updated?

Do you want that view/setView state updated and do you have the hook in another component?

3

Sure! I’m working on a project that collects user IP Addresses and shows details like location, timezone, isp. The above code adds a map leafletjs API.

In the above code:

Here, I imported the required component from leaflet.

In this section, I tried to re-render my component by declaring “map useState” which will render when "IP ADDRESS " changes

This is a container I created for styling using Tailwindcss.

This is starting section of creating map from LEAFLETJS.
"cente

  • r={}" will take coordinate as value which will display that point in map as center in the page.
  • “zoom={}” will take number of zoom level in the map UI.

The “Marker” COMPONENT will add a marker to the co-ordinate

And the pop-up will add text when the marker is clicked during interaction for user details.

For more details on this leaflet, you can visit this link: Popup with Marker | React Leaflet

I hope I explain you properly. If you still have doubts about some parts, feel free to ask me.

4

Maybe I’m overlooking it, but where is the state of setMap updated? That seems to be causing the problem

5

Ok I might have found problem: The useEffect hook currently runs only once when it is mounted, but you want it to run whenever the coordinates are changing. You will have to test it on your side though.

Add “map” and “ipTracker” to the hooks’ dependency array and see if it works.

6

Actually, I tried that first. It didn’t work, so I tried to use without dependencies (again same result).

Here is the link to the code if you need it: https://github.com/nikhil-131/ip-address-tracker.git

7

I looked into the Leaflet docs and it seems Leaflet instances and their props are immune to useState changes. You will have to use hooks like useMap provided by Leaflet.

Here a developer that had the exact same problem and how she solved it:

1 Like
8

Thanks a lot @DanielHuebschmann, it worked :partying_face: :partying_face: :partying_face: :partying_face: :partying_face:

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.