implementing map on school card; adding more school details

frontend/app.js

@@ -48,6 +48,9 @@ const CHART_COLORS = [
   "#9b59b6", // violet
 ];
 
+// Map instances (stored to allow cleanup)
+const schoolMaps = new Map();
+
 // Helper to get chart aspect ratio based on screen size
 function getChartAspectRatio() {
   return window.innerWidth <= 768 ? 1.2 : 2;
@@ -471,15 +474,34 @@ function renderFeaturedSchools(schools) {
             <p>Start typing to search schools across England</p>
         </div>
         ${schools
-          .map(
-            (school) => `
+          .map((school) => {
+            // Religious denomination tag (only show if meaningful)
+            const faithTag = school.religious_denomination &&
+              !["None", "Does not apply", ""].includes(school.religious_denomination)
+                ? `<span class="school-tag faith">${escapeHtml(school.religious_denomination)}</span>`
+                : "";
+
+            // Age range display
+            const ageRange = school.age_range
+              ? `<span class="age-range">Ages ${escapeHtml(school.age_range)}</span>`
+              : "";
+
+            // Map container (only if coordinates available)
+            const hasCoords = school.latitude && school.longitude;
+            const mapContainer = hasCoords
+              ? `<div class="school-map" data-lat="${school.latitude}" data-lng="${school.longitude}" data-name="${escapeHtml(school.school_name)}"></div>`
+              : "";
+
+            return `
             <div class="school-card featured" data-urn="${school.urn}">
                 <h3 class="school-name">${escapeHtml(school.school_name)}</h3>
                 <div class="school-meta">
                     <span class="school-tag">${escapeHtml(school.local_authority || "")}</span>
                     <span class="school-tag type">${escapeHtml(school.school_type || "")}</span>
+                    ${faithTag}
                 </div>
                 <div class="school-address">${escapeHtml(school.address || "")}</div>
+                ${ageRange ? `<div class="school-details">${ageRange}</div>` : ""}
                 <div class="school-stats">
                     <div class="stat">
                         <div class="stat-value">${formatMetricValue(school.rwm_expected_pct, "rwm_expected_pct")}</div>
@@ -490,15 +512,21 @@ function renderFeaturedSchools(schools) {
                         <div class="stat-label">Pupils</div>
                     </div>
                 </div>
+                ${mapContainer}
             </div>
-        `,
-          )
+        `;
+          })
           .join("")}
     `;
 
+  // Initialize maps
+  initializeSchoolMaps(elements.schoolsGrid);
+
   // Add click handlers
   elements.schoolsGrid.querySelectorAll(".school-card").forEach((card) => {
-    card.addEventListener("click", () => {
+    card.addEventListener("click", (e) => {
+      // Don't trigger if clicking on map
+      if (e.target.closest(".school-map")) return;
       const urn = parseInt(card.dataset.urn);
       openSchoolModal(urn);
     });
@@ -574,6 +602,118 @@ function formatMetricValue(value, metric) {
   return value.toFixed(1);
 }
 
+// =============================================================================
+// MAP FUNCTIONS
+// =============================================================================
+
+/**
+ * Initialize Leaflet maps for all school cards in a container
+ */
+function initializeSchoolMaps(container) {
+  // Clean up existing maps first
+  container.querySelectorAll(".school-map").forEach((mapEl) => {
+    const existingMap = schoolMaps.get(mapEl);
+    if (existingMap) {
+      existingMap.remove();
+      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;
+
+    if (isNaN(lat) || isNaN(lng)) 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);
+    });
+  });
+}
+
+/**
+ * Open fullscreen map modal
+ */
+function openMapModal(lat, lng, schoolName) {
+  // Create modal overlay
+  const overlay = document.createElement("div");
+  overlay.className = "map-modal-overlay";
+  overlay.innerHTML = `
+    <div class="map-modal">
+      <div class="map-modal-header">
+        <h3>${escapeHtml(schoolName)}</h3>
+        <button class="map-modal-close" aria-label="Close map">&times;</button>
+      </div>
+      <div class="map-modal-content" id="fullscreen-map"></div>
+    </div>
+  `;
+
+  document.body.appendChild(overlay);
+  document.body.style.overflow = "hidden";
+
+  // Initialize fullscreen map
+  const mapContainer = document.getElementById("fullscreen-map");
+  const fullMap = L.map(mapContainer, {
+    center: [lat, lng],
+    zoom: 16,
+  });
+
+  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    maxZoom: 19,
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  }).addTo(fullMap);
+
+  const marker = L.marker([lat, lng]).addTo(fullMap);
+  marker.bindPopup(`<strong>${escapeHtml(schoolName)}</strong>`).openPopup();
+
+  // Close handlers
+  const closeModal = () => {
+    fullMap.remove();
+    overlay.remove();
+    document.body.style.overflow = "";
+  };
+
+  overlay.querySelector(".map-modal-close").addEventListener("click", closeModal);
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) closeModal();
+  });
+
+  // Close on Escape key
+  const escHandler = (e) => {
+    if (e.key === "Escape") {
+      closeModal();
+      document.removeEventListener("keydown", escHandler);
+    }
+  };
+  document.addEventListener("keydown", escHandler);
+}
+
 // =============================================================================
 // RENDER FUNCTIONS
 // =============================================================================
@@ -594,14 +734,33 @@ function renderSchools(schools) {
           ? `<span class="distance-badge">${school.distance.toFixed(1)} mi</span>`
           : "";
 
+      // Religious denomination tag (only show if meaningful)
+      const faithTag = school.religious_denomination &&
+        !["None", "Does not apply", ""].includes(school.religious_denomination)
+          ? `<span class="school-tag faith">${escapeHtml(school.religious_denomination)}</span>`
+          : "";
+
+      // Age range display
+      const ageRange = school.age_range
+        ? `<span class="age-range">Ages ${escapeHtml(school.age_range)}</span>`
+        : "";
+
+      // Map container (only if coordinates available)
+      const hasCoords = school.latitude && school.longitude;
+      const mapContainer = hasCoords
+        ? `<div class="school-map" data-lat="${school.latitude}" data-lng="${school.longitude}" data-name="${escapeHtml(school.school_name)}"></div>`
+        : "";
+
       return `
             <div class="school-card" data-urn="${school.urn}">
                 <h3 class="school-name">${escapeHtml(school.school_name)}${distanceBadge}</h3>
                 <div class="school-meta">
                     <span class="school-tag">${escapeHtml(school.local_authority || "")}</span>
                     <span class="school-tag type">${escapeHtml(school.school_type || "")}</span>
+                    ${faithTag}
                 </div>
                 <div class="school-address">${escapeHtml(school.address || "")}</div>
+                ${ageRange ? `<div class="school-details">${ageRange}</div>` : ""}
                 <div class="school-stats">
                     <div class="stat">
                         <div class="stat-value">${formatMetricValue(school.rwm_expected_pct, "rwm_expected_pct")}</div>
@@ -612,6 +771,7 @@ function renderSchools(schools) {
                         <div class="stat-label">Pupils</div>
                     </div>
                 </div>
+                ${mapContainer}
             </div>
         `;
     })
@@ -633,9 +793,14 @@ function renderSchools(schools) {
 
   elements.schoolsGrid.innerHTML = html;
 
+  // Initialize maps
+  initializeSchoolMaps(elements.schoolsGrid);
+
   // Add click handlers
   elements.schoolsGrid.querySelectorAll(".school-card").forEach((card) => {
-    card.addEventListener("click", () => {
+    card.addEventListener("click", (e) => {
+      // Don't trigger if clicking on map
+      if (e.target.closest(".school-map")) return;
       const urn = parseInt(card.dataset.urn);
       openSchoolModal(urn);
     });