bug fix

frontend/app.js

@@ -610,51 +610,79 @@ function formatMetricValue(value, metric) {
  * Initialize Leaflet maps for all school cards in a container
  */
 function initializeSchoolMaps(container) {
+  // Check if Leaflet is loaded
+  if (typeof L === "undefined") {
+    console.warn("Leaflet not loaded yet, skipping map initialization");
+    return;
+  }
+
+  const mapElements = container.querySelectorAll(".school-map");
+  if (mapElements.length === 0) return;
+
   // Clean up existing maps first
-  container.querySelectorAll(".school-map").forEach((mapEl) => {
+  mapElements.forEach((mapEl) => {
     const existingMap = schoolMaps.get(mapEl);
     if (existingMap) {
-      existingMap.remove();
+      try {
+        existingMap.remove();
+      } catch (e) {
+        // Ignore cleanup errors
+      }
       schoolMaps.delete(mapEl);
     }
   });
 
-  // Initialize new maps
-  container.querySelectorAll(".school-map").forEach((mapEl) => {
-    const lat = parseFloat(mapEl.dataset.lat);
-    const lng = parseFloat(mapEl.dataset.lng);
-    const schoolName = mapEl.dataset.name;
+  // Initialize new maps with a small delay to ensure DOM is ready
+  setTimeout(() => {
+    mapElements.forEach((mapEl) => {
+      try {
+        // Skip if already initialized
+        if (schoolMaps.has(mapEl)) return;
 
-    if (isNaN(lat) || isNaN(lng)) return;
+        const lat = parseFloat(mapEl.dataset.lat);
+        const lng = parseFloat(mapEl.dataset.lng);
+        const schoolName = mapEl.dataset.name;
 
-    // Create map
-    const map = L.map(mapEl, {
-      center: [lat, lng],
-      zoom: 15,
-      zoomControl: false,
-      attributionControl: false,
-      dragging: true,
-      scrollWheelZoom: false,
+        if (isNaN(lat) || isNaN(lng)) return;
+
+        // Ensure element has dimensions
+        if (mapEl.offsetWidth === 0 || mapEl.offsetHeight === 0) {
+          console.warn("Map container has no dimensions, skipping");
+          return;
+        }
+
+        // Create map
+        const map = L.map(mapEl, {
+          center: [lat, lng],
+          zoom: 15,
+          zoomControl: false,
+          attributionControl: false,
+          dragging: true,
+          scrollWheelZoom: false,
+        });
+
+        // Add tile layer (OpenStreetMap)
+        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+          maxZoom: 19,
+        }).addTo(map);
+
+        // Add marker
+        const marker = L.marker([lat, lng]).addTo(map);
+        marker.bindTooltip(schoolName, { permanent: false, direction: "top" });
+
+        // Store map reference
+        schoolMaps.set(mapEl, map);
+
+        // Handle click to open fullscreen
+        mapEl.addEventListener("click", (e) => {
+          e.stopPropagation();
+          openMapModal(lat, lng, schoolName);
+        });
+      } catch (err) {
+        console.error("Error initializing map:", err);
+      }
     });
-
-    // Add tile layer (OpenStreetMap)
-    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-      maxZoom: 19,
-    }).addTo(map);
-
-    // Add marker
-    const marker = L.marker([lat, lng]).addTo(map);
-    marker.bindTooltip(schoolName, { permanent: false, direction: "top" });
-
-    // Store map reference
-    schoolMaps.set(mapEl, map);
-
-    // Handle click to open fullscreen
-    mapEl.addEventListener("click", (e) => {
-      e.stopPropagation();
-      openMapModal(lat, lng, schoolName);
-    });
-  });
+  }, 100);
 }
 
 /**