Function ClientMap

components/client-map.tsx:22–248

({ markers, setMapInstance, task_type = "LOCATION_LIST" }: ClientMapProps)

}

export default function ClientMap({ markers, setMapInstance, task_type = "LOCATION_LIST" }: ClientMapProps) {
  const mapContainer = useRef<HTMLDivElement>(null)
  const [mapError, setMapError] = useState<string | null>(null)
  const [isMapInitialized, setIsMapInitialized] = useState(false)
  // useRef to hold the map instance, to ensure cleanup targets the correct instance
  const mapRef = useRef<L.Map | null>(null);

  useEffect(() => {
    // Guard against re-initialization if already initialized by this instance
    if (!mapContainer.current || isMapInitialized) {
      return;
    }

    let isActive = true; // Flag to manage async operations for mounted component

    const initializeMap = async () => {
      try {
        const Leaflet = (await import("leaflet")).default; // Dynamically import Leaflet
        if (!isActive || !mapContainer.current) return;

        // Fix Leaflet icon issues
        if (Leaflet.Icon && Leaflet.Icon.Default && Leaflet.Icon.Default.prototype) {
          delete (Leaflet.Icon.Default.prototype as any)._getIconUrl;
        Leaflet.Icon.Default.mergeOptions({
          iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
          iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
          shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
        });
        }

        // Defensive check: if the container DOM node already has leaflet's internal ID
        if ((mapContainer.current as any)._leaflet_id) {
          console.warn(
            "Leaflet map container already had _leaflet_id. This might indicate an incomplete cleanup from a previous instance or a StrictMode interaction."
          );
          // Attempt to remove any existing map instance on this container before creating a new one
          // This is a more aggressive cleanup for problematic scenarios.
          if (mapRef.current) {
             mapRef.current.remove();
             mapRef.current = null;
          }
          // Try to clear the id, though this is delving into Leaflet internals
           delete (mapContainer.current as any)._leaflet_id;
        }
        
        const newMapInstance = Leaflet.map(mapContainer.current).setView([35, 105], 4);
        mapRef.current = newMapInstance; // Store new map instance in ref

        if (!isActive) {
          newMapInstance.remove(); // Clean up if component unmounted during init
          mapRef.current = null;
          return;
        }

        Leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
          maxZoom: 19,
        }).addTo(newMapInstance);