Add map view for location search results

Implemented split-view map layout for postcode searches:
- List/Map toggle appears when doing location search
- Map view shows interactive map with school markers on left
- Compact school list on right with distance badges, stats, actions
- Mobile responsive: stacks vertically with map on top
- Updated School type to include distance and total_pupils fields

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

nextjs-app/components/HomeView.module.css

@@ -2,15 +2,23 @@
   width: 100%;
 }
 
+.locationBannerWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
 .locationBanner {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 1rem 1.5rem;
+  padding: 0.75rem 1.25rem;
   background: rgba(45, 125, 125, 0.1);
   border: 1px solid rgba(45, 125, 125, 0.3);
-  border-radius: 12px;
+  border-radius: 10px;
-  margin-bottom: 2rem;
   font-size: 0.9375rem;
   color: var(--accent-teal, #2d7d7d);
   font-weight: 500;
@@ -21,10 +29,227 @@
   color: var(--accent-teal, #2d7d7d);
 }
 
+/* View Toggle */
+.viewToggle {
+  display: flex;
+  gap: 0.25rem;
+  background: var(--bg-secondary, #f3ede4);
+  padding: 0.25rem;
+  border-radius: 8px;
+}
+
+.viewToggleBtn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-secondary, #5c564d);
+  transition: all 0.2s ease;
+}
+
+.viewToggleBtn:hover {
+  color: var(--text-primary, #1a1612);
+}
+
+.viewToggleBtn.active {
+  background: var(--bg-card, white);
+  color: var(--accent-coral, #e07256);
+  box-shadow: 0 2px 4px rgba(26, 22, 18, 0.08);
+}
+
+.viewToggleBtn svg {
+  flex-shrink: 0;
+}
+
 .results {
   margin-top: 2rem;
 }
 
+.mapViewResults {
+  margin-top: 0;
+}
+
+/* Map View Layout */
+.mapViewContainer {
+  display: grid;
+  grid-template-columns: 1fr 380px;
+  gap: 1.5rem;
+  height: 550px;
+}
+
+.mapContainer {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--border-color, #e5dfd5);
+  height: 100%;
+}
+
+.compactList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  overflow-y: auto;
+  height: 100%;
+  padding-right: 0.5rem;
+}
+
+.compactList::-webkit-scrollbar {
+  width: 6px;
+}
+
+.compactList::-webkit-scrollbar-track {
+  background: var(--bg-secondary, #f3ede4);
+  border-radius: 3px;
+}
+
+.compactList::-webkit-scrollbar-thumb {
+  background: var(--border-color, #e5dfd5);
+  border-radius: 3px;
+}
+
+.compactList::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted, #8a847a);
+}
+
+/* Compact School Item */
+.compactItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.875rem 1rem;
+  background: var(--bg-card, white);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 10px;
+  transition: all 0.2s ease;
+}
+
+.compactItem:hover {
+  border-color: var(--accent-coral, #e07256);
+  box-shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
+}
+
+.compactItemContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.compactItemHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.compactItemName {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: var(--text-primary, #1a1612);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.compactItemName:hover {
+  color: var(--accent-coral, #e07256);
+}
+
+.distanceBadge {
+  flex-shrink: 0;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: var(--accent-teal, #2d7d7d);
+  color: white;
+  border-radius: 4px;
+}
+
+.compactItemMeta {
+  display: flex;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #5c564d);
+  margin-bottom: 0.375rem;
+}
+
+.compactItemMeta span:not(:last-child)::after {
+  content: '·';
+  margin-left: 0.5rem;
+  color: var(--text-muted, #8a847a);
+}
+
+.compactItemStats {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #5c564d);
+}
+
+.compactStat strong {
+  color: var(--text-primary, #1a1612);
+}
+
+.compactItemActions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+
+.compactBtn {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  background: var(--accent-coral, #e07256);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+}
+
+.compactBtn:hover {
+  background: var(--accent-coral-dark, #c45a3f);
+}
+
+.compactBtn.compactBtnActive {
+  background: var(--bg-secondary, #f3ede4);
+  color: var(--text-secondary, #5c564d);
+  border: 1px solid var(--border-color, #e5dfd5);
+}
+
+.compactBtn.compactBtnActive:hover {
+  background: var(--border-color, #e5dfd5);
+  color: var(--text-primary, #1a1612);
+}
+
+.compactBtnSecondary {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: transparent;
+  color: var(--text-secondary, #5c564d);
+  border: 1px solid var(--border-color, #e5dfd5);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  text-align: center;
+}
+
+.compactBtnSecondary:hover {
+  background: var(--bg-secondary, #f3ede4);
+  color: var(--text-primary, #1a1612);
+}
+
 .sectionHeader {
   margin-bottom: 2rem;
 }
@@ -142,12 +367,51 @@
     grid-template-columns: 1fr;
   }
 
+  .locationBannerWrapper {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .locationBanner {
-    padding: 0.875rem 1rem;
+    padding: 0.75rem 1rem;
     font-size: 0.875rem;
     border-radius: 8px;
   }
 
+  .viewToggle {
+    justify-content: center;
+  }
+
+  .mapViewContainer {
+    grid-template-columns: 1fr;
+    grid-template-rows: 300px auto;
+    height: auto;
+  }
+
+  .mapContainer {
+    height: 300px;
+  }
+
+  .compactList {
+    height: auto;
+    max-height: 400px;
+    padding-right: 0;
+  }
+
+  .compactItem {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+
+  .compactItemActions {
+    flex-direction: row;
+  }
+
+  .compactItemActions > * {
+    flex: 1;
+  }
+
   .emptyState {
     padding: 3rem 1.5rem;
   }

nextjs-app/components/HomeView.tsx

@@ -5,13 +5,15 @@
 
 'use client';
 
+import { useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { FilterBar } from './FilterBar';
 import { SchoolCard } from './SchoolCard';
+import { SchoolMap } from './SchoolMap';
 import { Pagination } from './Pagination';
 import { EmptyState } from './EmptyState';
 import { useComparisonContext } from '@/context/ComparisonContext';
-import type { SchoolsResponse, Filters } from '@/lib/types';
+import type { SchoolsResponse, Filters, School } from '@/lib/types';
 import styles from './HomeView.module.css';
 
 interface HomeViewProps {
@@ -21,7 +23,8 @@ interface HomeViewProps {
 
 export function HomeView({ initialSchools, filters }: HomeViewProps) {
   const searchParams = useSearchParams();
-  const { addSchool } = useComparisonContext();
+  const { addSchool, selectedSchools } = useComparisonContext();
+  const [resultsView, setResultsView] = useState<'list' | 'map'>('list');
 
   const hasSearch = searchParams.get('search') || searchParams.get('postcode');
   const isLocationSearch = !!searchParams.get('postcode');
@@ -36,18 +39,48 @@ export function HomeView({ initialSchools, filters }: HomeViewProps) {
         heroDescription="Search and compare KS2 results for thousands of schools across England"
       />
 
-      {/* Location Info Banner */}
+      {/* Location Info Banner with View Toggle */}
       {isLocationSearch && initialSchools.location_info && (
-        <div className={styles.locationBanner}>
+        <div className={styles.locationBannerWrapper}>
-          <span>
+          <div className={styles.locationBanner}>
-            Showing schools within {(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of{' '}
+            <span>
-            <strong>{initialSchools.location_info.postcode}</strong>
+              Showing schools within {(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of{' '}
-          </span>
+              <strong>{initialSchools.location_info.postcode}</strong>
+            </span>
+          </div>
+          {initialSchools.schools.length > 0 && (
+            <div className={styles.viewToggle}>
+              <button
+                className={`${styles.viewToggleBtn} ${resultsView === 'list' ? styles.active : ''}`}
+                onClick={() => setResultsView('list')}
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
+                  <line x1="8" y1="6" x2="21" y2="6"/>
+                  <line x1="8" y1="12" x2="21" y2="12"/>
+                  <line x1="8" y1="18" x2="21" y2="18"/>
+                  <line x1="3" y1="6" x2="3.01" y2="6"/>
+                  <line x1="3" y1="12" x2="3.01" y2="12"/>
+                  <line x1="3" y1="18" x2="3.01" y2="18"/>
+                </svg>
+                List
+              </button>
+              <button
+                className={`${styles.viewToggleBtn} ${resultsView === 'map' ? styles.active : ''}`}
+                onClick={() => setResultsView('map')}
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
+                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
+                  <circle cx="12" cy="10" r="3"/>
+                </svg>
+                Map
+              </button>
+            </div>
+          )}
         </div>
       )}
 
       {/* Results Section */}
-      <section className={styles.results}>
+      <section className={`${styles.results} ${resultsView === 'map' && isLocationSearch ? styles.mapViewResults : ''}`}>
         {!hasSearch && initialSchools.schools.length > 0 && (
           <div className={styles.sectionHeader}>
             <h2>Featured Schools</h2>
@@ -57,7 +90,7 @@ export function HomeView({ initialSchools, filters }: HomeViewProps) {
           </div>
         )}
 
-        {hasSearch && (
+        {hasSearch && resultsView === 'list' && (
           <div className={styles.resultsHeader}>
             <h2>
               {initialSchools.total.toLocaleString()} school
@@ -85,7 +118,28 @@ export function HomeView({ initialSchools, filters }: HomeViewProps) {
                 : undefined
             }
           />
+        ) : resultsView === 'map' && isLocationSearch ? (
+          /* Map View Layout */
+          <div className={styles.mapViewContainer}>
+            <div className={styles.mapContainer}>
+              <SchoolMap
+                schools={initialSchools.schools}
+                center={initialSchools.location_info?.coordinates}
+              />
+            </div>
+            <div className={styles.compactList}>
+              {initialSchools.schools.map((school) => (
+                <CompactSchoolItem
+                  key={school.urn}
+                  school={school}
+                  onAddToCompare={addSchool}
+                  isInCompare={selectedSchools.some(s => s.urn === school.urn)}
+                />
+              ))}
+            </div>
+          </div>
         ) : (
+          /* List View Layout */
           <>
             <div className={styles.grid}>
               {initialSchools.schools.map((school) => (
@@ -110,3 +164,52 @@ export function HomeView({ initialSchools, filters }: HomeViewProps) {
     </div>
   );
 }
+
+/* Compact School Item for Map View */
+interface CompactSchoolItemProps {
+  school: School;
+  onAddToCompare: (school: School) => void;
+  isInCompare: boolean;
+}
+
+function CompactSchoolItem({ school, onAddToCompare, isInCompare }: CompactSchoolItemProps) {
+  return (
+    <div className={styles.compactItem}>
+      <div className={styles.compactItemContent}>
+        <div className={styles.compactItemHeader}>
+          <a href={`/school/${school.urn}`} className={styles.compactItemName}>
+            {school.school_name}
+          </a>
+          {school.distance !== undefined && school.distance !== null && (
+            <span className={styles.distanceBadge}>
+              {school.distance.toFixed(1)} mi
+            </span>
+          )}
+        </div>
+        <div className={styles.compactItemMeta}>
+          {school.school_type && <span>{school.school_type}</span>}
+          {school.local_authority && <span>{school.local_authority}</span>}
+        </div>
+        <div className={styles.compactItemStats}>
+          <span className={styles.compactStat}>
+            <strong>{school.rwm_expected_pct !== null ? `${school.rwm_expected_pct}%` : '-'}</strong> RWM
+          </span>
+          <span className={styles.compactStat}>
+            <strong>{school.total_pupils || '-'}</strong> pupils
+          </span>
+        </div>
+      </div>
+      <div className={styles.compactItemActions}>
+        <button
+          className={`${styles.compactBtn} ${isInCompare ? styles.compactBtnActive : ''}`}
+          onClick={() => onAddToCompare(school)}
+        >
+          {isInCompare ? 'Remove' : 'Compare'}
+        </button>
+        <a href={`/school/${school.urn}`} className={styles.compactBtnSecondary}>
+          Details
+        </a>
+      </div>
+    </div>
+  );
+}

nextjs-app/components/SchoolMap.module.css

@@ -19,9 +19,9 @@
 .spinner {
   width: 2rem;
   height: 2rem;
-  border: 3px solid rgba(59, 130, 246, 0.3);
+  border: 3px solid rgba(224, 114, 86, 0.3);
   border-radius: 50%;
-  border-top-color: var(--primary);
+  border-top-color: var(--accent-coral, #e07256);
   animation: spin 0.8s linear infinite;
 }
 

nextjs-app/lib/types.ts

@@ -29,6 +29,9 @@ export interface School {
   latitude: number | null;
   longitude: number | null;
 
+  // School context
+  total_pupils?: number | null;
+
   // Latest year metrics (for search/list views)
   rwm_expected_pct?: number | null;
   reading_expected_pct?: number | null;
@@ -41,6 +44,9 @@ export interface School {
   // Trend indicators (for list views)
   prev_rwm_expected_pct?: number | null;
   trend?: 'up' | 'down' | 'stable';
+
+  // Location search fields
+  distance?: number | null;
 }
 
 // ============================================================================