cumulus-map-base.js

import { useEffect } from 'react';
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import { useMap } from 'react-leaflet/hooks';

// Component to handle map invalidation on resize
function MapInvalidator({ mapHeight }) {
  const map = useMap();

  useEffect(() => {
    if (map && mapHeight) {
      // Small delay to let DOM update
      const timer = setTimeout(() => {
        map.invalidateSize();
      }, 100);

      return () => clearTimeout(timer);
    }
  }, [map, mapHeight]);

  return null;
}

/**
 * Base Cumulus Map Container
 *
 * A reusable Leaflet map component that provides the core map functionality
 * for all map modes in the application.
 *
 * @param {Object} props
 * @param {React.ReactNode} props.children - Mode-specific overlays and controls
 * @param {number} [props.mapHeight] - Height of the map for resizing
 * @param {Array} [props.center=[37.1, -95.7]] - Map center coordinates [lat, lng]
 * @param {number} [props.zoom=4] - Initial zoom level
 * @param {Array} [props.locations=[]] - Optional markers to display
 */
export default function CumulusMapBase({
  children,
  mapHeight,
  center = [37.1, -95.7],
  zoom = 4,
  locations = []
}) {
  return (
    <div className='map-container h-full'>
      <MapContainer
        center={center}
        zoom={zoom}
        scrollWheelZoom={false}
      >
        <TileLayer
          url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />

        {/* Handle map invalidation when height changes */}
        <MapInvalidator mapHeight={mapHeight} />

        {/* Mode-specific overlays and controls */}
        {children}

        {/* Optional location markers */}
        {locations.map((loc, i) => (
          <Marker
            key={`loc-${i}`}
            position={[loc.location.lat, loc.location.lon]}
          >
            <Popup>
              <h2>{loc.name}</h2>
              <p>{loc.description}</p>
            </Popup>
          </Marker>
        ))}
      </MapContainer>
    </div>
  );
}