Tudor
d6a45b8e12
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 45s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m6s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 31s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
- Remove 10-mile radius option; cap backend radius max at 5 miles - Raise backend page_size max to 500 so map can fetch all schools in one call - HomeView: when map view is active, fetch all schools within radius (page_size=500) instead of showing only the paginated first page; falls back to initial SSR schools while loading - SchoolMap/LeafletMapInner: accept referencePoint prop and render a distinctive coral circle pin at the search postcode location Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
/**
|
|
* SchoolMap Component
|
|
* Client-side Leaflet map wrapper for displaying school locations
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import dynamic from 'next/dynamic';
|
|
import type { School } from '@/lib/types';
|
|
import styles from './SchoolMap.module.css';
|
|
|
|
// Dynamic import to avoid SSR issues with Leaflet
|
|
const LeafletMap = dynamic(() => import('./LeafletMapInner'), {
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className={styles.mapLoading}>
|
|
<div className={styles.spinner}></div>
|
|
<p>Loading map...</p>
|
|
</div>
|
|
),
|
|
});
|
|
|
|
interface SchoolMapProps {
|
|
schools: School[];
|
|
center?: [number, number];
|
|
zoom?: number;
|
|
referencePoint?: [number, number];
|
|
onMarkerClick?: (school: School) => void;
|
|
}
|
|
|
|
export function SchoolMap({ schools, center, zoom = 13, referencePoint, onMarkerClick }: SchoolMapProps) {
|
|
// Calculate center if not provided
|
|
const mapCenter: [number, number] = center || (() => {
|
|
if (schools.length === 0) return [51.5074, -0.1278]; // Default to London
|
|
if (schools.length === 1 && schools[0].latitude && schools[0].longitude) {
|
|
return [schools[0].latitude, schools[0].longitude];
|
|
}
|
|
|
|
// Calculate average position
|
|
const validSchools = schools.filter(s => s.latitude && s.longitude);
|
|
if (validSchools.length === 0) return [51.5074, -0.1278];
|
|
|
|
const avgLat = validSchools.reduce((sum, s) => sum + (s.latitude || 0), 0) / validSchools.length;
|
|
const avgLng = validSchools.reduce((sum, s) => sum + (s.longitude || 0), 0) / validSchools.length;
|
|
return [avgLat, avgLng];
|
|
})();
|
|
|
|
return (
|
|
<div className={styles.mapWrapper}>
|
|
<LeafletMap
|
|
schools={schools}
|
|
center={mapCenter}
|
|
zoom={zoom}
|
|
referencePoint={referencePoint}
|
|
onMarkerClick={onMarkerClick}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|