IP Adress Tracker With React

Community feedback

• 

  Ikechukwu Peter•50

  @ikechukwu-peterPosted over 1 year ago

  LeafletJs Map is immutable, therefore, even though the component rerenders the map does not, to overcome that you have to pass a component that will force the map to rerender too.

    const ChangeMapView = ({ coords }: { coords: [number, number] }) => {
      const map = useMap();
      map.setView(coords, map.getZoom());
      return null;
    };
  

  This forces the map to rerender using the new coords that you pass, my answer is written in TypeScript and useMaps is imported from react-leafletjs itself.

  All you have to do is pass the <ChangeMapView /> component between the MapContainer with the same data that you pass to the map itself, once your data changes, it would reflect on the map.

  <MapContainer> 
             <ChangeView coords={[0.34, 1.23]} />
      </MapContainer> 
  

  Here is a full working code sample.

  import React, { FC } from "react";
  import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
  import * as L from "leaflet";
  import { IMAP } from "../@types/map";
  
  import "leaflet/dist/leaflet.css";
  
  export const Map: FC<IMAP> = ({ data }) => {
      //change map view since map container is immutable
    const ChangeMapView = ({ coords }: { coords: [number, number] }) => {
      const map = useMap();
      map.setView(coords, map.getZoom());
      return null;
    };
  
    return (
      <MapContainer
        center={[data?.latitude, data?.longitude]}
        zoom={13}
        scrollWheelZoom={false}
        style={{
          width: "100vw",
          height: "100vh",
          zIndex: 8,
        }}
      >
        <TileLayer
          attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[data?.latitude, data?.longitude]} >
          <Popup>{data?.region}</Popup>
        </Marker>
        <ChangeMapView coords={[data?.latitude, data?.longitude]} />
      </MapContainer>
    );
  };
  
  

  Marked as helpful

  1

  ---

  

  Lisandra Ferraz•240

  @LisandraFerrazPosted over 1 year ago

  @ikechukwu-peter For some reason, now if I don't use your/my update map function the map is rerendering 🤔 Well, in any case I will keep your suggestion on the final project, it totally makes sense, I had no idea about this trick.

  Appreciate you!

  0

  

  Ikechukwu Peter•50

  @ikechukwu-peterPosted over 1 year ago

  @LisandraFerraz I might not be able to say why it works without an updating function, however, having a function to update the map is the way to go since the MapContainer is immutable.

  I am glad I could help.

  1