Add list/map view toggle for location search results

When searching by location, users can now toggle between list view
(school cards grid) and a split map view showing:
- Interactive map on left with all school markers
- Scrollable school list on right
- Blue marker for search location, default markers for schools
- Clicking a marker highlights and scrolls to the corresponding card

Mobile responsive with stacked layout on smaller screens.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/app.js

@@ -22,7 +22,9 @@ const state = {
     active: false,
     postcode: null,
     radius: 5,
+    coords: null, // Lat/lng of search location
   },
+  resultsView: "list", // "list" or "map"
   loading: {
     schools: false,
     filters: false,
@@ -36,6 +38,7 @@ const state = {
 let comparisonChart = null;
 let schoolDetailChart = null;
 let modalMap = null;
+let resultsMapInstance = null;
 
 // Chart colors
 const CHART_COLORS = [
@@ -189,6 +192,11 @@ const elements = {
   radiusSelect: document.getElementById("radius-select"),
   locationSearchBtn: document.getElementById("location-search-btn"),
   typeFilterLocation: document.getElementById("type-filter-location"),
+  // Results view
+  viewToggle: document.getElementById("view-toggle"),
+  viewToggleBtns: document.querySelectorAll(".view-toggle-btn"),
+  resultsContainer: document.getElementById("results-container"),
+  resultsMap: document.getElementById("results-map"),
   // Schools grid
   schoolsGrid: document.getElementById("schools-grid"),
   compareSearch: document.getElementById("compare-search"),
@@ -522,10 +530,26 @@ async function loadSchools() {
   state.pagination.totalPages = data.total_pages;
   state.isShowingFeatured = false;
 
+  // Store search coordinates if available
+  if (data.search_location && data.search_location.lat && data.search_location.lng) {
+    state.locationSearch.coords = {
+      lat: data.search_location.lat,
+      lng: data.search_location.lng,
+    };
+  }
+
   // Show location info banner if location search is active
   updateLocationInfoBanner(data.search_location);
 
   renderSchools(state.schools);
+
+  // Update view toggle visibility
+  updateViewToggle();
+
+  // If map view is active, reinitialize the map with new results
+  if (state.resultsView === "map" && state.locationSearch.active) {
+    initializeResultsMap(state.schools);
+  }
 }
 
 async function loadFeaturedSchools() {
@@ -548,6 +572,9 @@ async function loadFeaturedSchools() {
   state.isShowingFeatured = true;
 
   renderFeaturedSchools(state.schools);
+
+  // Hide view toggle for featured schools
+  updateViewToggle();
 }
 
 function updateLocationInfoBanner(searchLocation) {
@@ -908,6 +935,168 @@ function openMapModal(lat, lng, schoolName) {
   document.addEventListener("keydown", escHandler);
 }
 
+/**
+ * Initialize the results map for location search
+ */
+function initializeResultsMap(schools) {
+  // Check if Leaflet is loaded
+  if (typeof L === "undefined") {
+    console.warn("Leaflet not loaded, skipping results map initialization");
+    return;
+  }
+
+  // Destroy existing map if any
+  if (resultsMapInstance) {
+    try {
+      resultsMapInstance.remove();
+    } catch (e) {
+      // Ignore cleanup errors
+    }
+    resultsMapInstance = null;
+  }
+
+  // Need search coords to center the map
+  if (!state.locationSearch.coords) {
+    console.warn("No search coordinates available for results map");
+    return;
+  }
+
+  const { lat, lng } = state.locationSearch.coords;
+
+  // Ensure container has dimensions
+  setTimeout(() => {
+    const mapContainer = elements.resultsMap;
+    if (!mapContainer || mapContainer.offsetWidth === 0 || mapContainer.offsetHeight === 0) {
+      console.warn("Results map container has no dimensions");
+      return;
+    }
+
+    // Create map centered on search location
+    resultsMapInstance = L.map(mapContainer, {
+      center: [lat, lng],
+      zoom: 14,
+      scrollWheelZoom: true,
+    });
+
+    // Add tile layer
+    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(resultsMapInstance);
+
+    // Create custom icon for search location (blue)
+    const searchIcon = L.divIcon({
+      className: "search-location-marker",
+      html: `<svg viewBox="0 0 24 24" fill="#3498db" stroke="#2980b9" stroke-width="1" width="32" height="32">
+        <circle cx="12" cy="12" r="8"/>
+      </svg>`,
+      iconSize: [32, 32],
+      iconAnchor: [16, 16],
+    });
+
+    // Add search location marker
+    L.marker([lat, lng], { icon: searchIcon })
+      .addTo(resultsMapInstance)
+      .bindPopup(`<strong>Search location</strong><br>${state.locationSearch.postcode}`);
+
+    // Add school markers
+    const bounds = L.latLngBounds([[lat, lng]]);
+    schools.forEach((school) => {
+      if (school.latitude && school.longitude) {
+        const marker = L.marker([school.latitude, school.longitude])
+          .addTo(resultsMapInstance)
+          .bindPopup(`
+            <strong>${escapeHtml(school.school_name)}</strong><br>
+            ${school.distance !== undefined ? school.distance.toFixed(1) + " miles away" : ""}
+          `);
+
+        // Click handler to highlight card
+        marker.on("click", () => {
+          highlightSchoolCard(school.urn);
+        });
+
+        bounds.extend([school.latitude, school.longitude]);
+      }
+    });
+
+    // Fit bounds to show all markers with padding
+    if (schools.length > 0) {
+      resultsMapInstance.fitBounds(bounds, { padding: [30, 30] });
+    }
+  }, 100);
+}
+
+/**
+ * Highlight a school card and scroll it into view
+ */
+function highlightSchoolCard(urn) {
+  // Remove highlight from all cards
+  document.querySelectorAll(".school-card").forEach((card) => {
+    card.classList.remove("highlighted");
+  });
+
+  // Add highlight to selected card
+  const card = document.querySelector(`.school-card[data-urn="${urn}"]`);
+  if (card) {
+    card.classList.add("highlighted");
+    card.scrollIntoView({ behavior: "smooth", block: "center" });
+  }
+}
+
+/**
+ * Destroy the results map instance
+ */
+function destroyResultsMap() {
+  if (resultsMapInstance) {
+    try {
+      resultsMapInstance.remove();
+    } catch (e) {
+      // Ignore cleanup errors
+    }
+    resultsMapInstance = null;
+  }
+}
+
+/**
+ * Update the view toggle visibility and state
+ */
+function updateViewToggle() {
+  // Only show toggle for location search results
+  if (state.locationSearch.active && state.schools.length > 0) {
+    elements.viewToggle.style.display = "flex";
+  } else {
+    elements.viewToggle.style.display = "none";
+    // Reset to list view when hiding toggle
+    if (state.resultsView === "map") {
+      setResultsView("list");
+    }
+  }
+}
+
+/**
+ * Set the results view mode (list or map)
+ */
+function setResultsView(view) {
+  state.resultsView = view;
+
+  // Update toggle button states
+  elements.viewToggleBtns.forEach((btn) => {
+    btn.classList.toggle("active", btn.dataset.view === view);
+  });
+
+  // Update container class
+  if (view === "map") {
+    elements.resultsContainer.classList.add("map-view");
+    // Initialize map if location search is active
+    if (state.locationSearch.active) {
+      initializeResultsMap(state.schools);
+    }
+  } else {
+    elements.resultsContainer.classList.remove("map-view");
+    destroyResultsMap();
+  }
+}
+
 // =============================================================================
 // RENDER FUNCTIONS
 // =============================================================================
@@ -1709,11 +1898,14 @@ function setupEventListeners() {
       // Clear the inactive mode's state
       if (mode === "name") {
         // Clear location search state
-        state.locationSearch = { active: false, postcode: null, radius: 5 };
+        state.locationSearch = { active: false, postcode: null, radius: 5, coords: null };
         elements.postcodeSearch.value = "";
         elements.radiusSelect.value = "5";
         elements.typeFilterLocation.value = "";
         updateLocationInfoBanner(null);
+        // Reset to list view and hide toggle
+        setResultsView("list");
+        updateViewToggle();
       } else {
         // Clear name search state
         elements.schoolSearch.value = "";
@@ -1726,6 +1918,16 @@ function setupEventListeners() {
     });
   });
 
+  // View toggle (list/map)
+  elements.viewToggleBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const view = btn.dataset.view;
+      if (view !== state.resultsView) {
+        setResultsView(view);
+      }
+    });
+  });
+
   // Name search and filters
   let searchTimeout;
   elements.schoolSearch.addEventListener("input", () => {