- {initialSchools.schools.map((school) => (
+ {(isLoadingMap ? initialSchools.schools : mapSchools).map((school) => (
void;
}
-export default function LeafletMapInner({ schools, center, zoom, onMarkerClick }: LeafletMapInnerProps) {
+export default function LeafletMapInner({ schools, center, zoom, referencePoint, onMarkerClick }: LeafletMapInnerProps) {
const mapRef = useRef
(null);
const mapContainerRef = useRef(null);
+ const refMarkerRef = useRef(null);
useEffect(() => {
if (!mapContainerRef.current) return;
@@ -43,13 +45,36 @@ export default function LeafletMapInner({ schools, center, zoom, onMarkerClick }
}).addTo(mapRef.current);
}
- // Clear existing markers
+ // Clear existing school markers (not the reference pin)
mapRef.current.eachLayer((layer) => {
- if (layer instanceof L.Marker) {
+ if (layer instanceof L.Marker && layer !== refMarkerRef.current) {
mapRef.current!.removeLayer(layer);
}
});
+ // Add reference pin (search location)
+ if (refMarkerRef.current) {
+ refMarkerRef.current.remove();
+ refMarkerRef.current = null;
+ }
+ if (referencePoint && mapRef.current) {
+ const refIcon = L.divIcon({
+ html: ``,
+ iconSize: [20, 20],
+ iconAnchor: [10, 10],
+ className: '',
+ });
+ refMarkerRef.current = L.marker(referencePoint, { icon: refIcon, zIndexOffset: 1000 })
+ .addTo(mapRef.current)
+ .bindPopup('Search location');
+ }
+
// Add markers for schools
schools.forEach((school) => {
if (school.latitude && school.longitude && mapRef.current) {
@@ -89,7 +114,7 @@ export default function LeafletMapInner({ schools, center, zoom, onMarkerClick }
return () => {
// Don't destroy map on every update, just clean markers
};
- }, [schools, center, zoom, onMarkerClick]);
+ }, [schools, center, zoom, referencePoint, onMarkerClick]);
// Cleanup map on unmount
useEffect(() => {
diff --git a/nextjs-app/components/SchoolMap.tsx b/nextjs-app/components/SchoolMap.tsx
index 7a60bac..fa33d2f 100644
--- a/nextjs-app/components/SchoolMap.tsx
+++ b/nextjs-app/components/SchoolMap.tsx
@@ -24,10 +24,11 @@ interface SchoolMapProps {
schools: School[];
center?: [number, number];
zoom?: number;
+ referencePoint?: [number, number];
onMarkerClick?: (school: School) => void;
}
-export function SchoolMap({ schools, center, zoom = 13, onMarkerClick }: SchoolMapProps) {
+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
@@ -50,6 +51,7 @@ export function SchoolMap({ schools, center, zoom = 13, onMarkerClick }: SchoolM
schools={schools}
center={mapCenter}
zoom={zoom}
+ referencePoint={referencePoint}
onMarkerClick={onMarkerClick}
/>