React-leaflet map container size not updating on size change

[niebl]

When used inside a flex container that prompts it to change size, the react leaflet map container does not correctly update it's own size.

May be related to the following issue, where solutions could be found PaulLeCam/react-leaflet#340

[pauljonescodes]

I believe I am also experiencing this. As a stop gap measure, I'm updating the key when the size changes.

[pauljonescodes]

This is now working for me:

import { useEffect, useRef } from "react";
import { MapContainer } from "react-leaflet";

const MAP_CONTAINER_ID = "map-container";

export const ResizableMapContainer = ({ boundsFromContext }) => {
  const mapRef = useRef(null);
  const resizeObserverRef = useRef(null);

  useEffect(() => {
    return () => {
      resizeObserverRef.current?.disconnect();
    };
  }, []);

  const handleWhenReady = () => {
    resizeObserverRef.current = new ResizeObserver(() =>
      mapRef.current?.invalidateSize()
    );
    const mapContainer = document.getElementById(MAP_CONTAINER_ID);
    if (mapContainer) {
      resizeObserverRef.current.observe(mapContainer);
    }
  };

  return (
    <MapContainer
      ref={mapRef}
      id={MAP_CONTAINER_ID}
      whenReady={handleWhenReady}
    >
      {/* stuff */}
    </MapContainer>
  );
};