Controls and Mapbox Config Update

web/src/app/components/MapNavigationControl.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import React, { useEffect } from 'react';
+import mapboxgl from 'mapbox-gl';
+
+type Position = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+interface Props {
+	mapRef: React.MutableRefObject<mapboxgl.Map | null>;
+	position?: Position;
+	showCompass?: boolean;
+	showZoom?: boolean;
+	visualizePitch?: boolean;
+	style?: React.CSSProperties;
+}
+
+export default function MapNavigationControl({ mapRef, position = 'top-right', showCompass = true, showZoom = true, visualizePitch = false, style }: Props) {
+	useEffect(() => {
+		const map = mapRef.current;
+		if (!map) return;
+
+		const nav = new mapboxgl.NavigationControl({ showCompass, showZoom, visualizePitch });
+		map.addControl(nav, position);
+
+		return () => {
+			try { map.removeControl(nav); } catch (e) {}
+		};
+	}, [mapRef, position, showCompass, showZoom, visualizePitch]);
+
+	// the control is rendered by mapbox, so this component itself renders nothing
+	return null;
+}

web/src/app/components/MapView.tsx

@@ -41,11 +41,27 @@ export default function MapView({ mapStyleChoice, heatRadius, heatIntensity, hea
 		return () => ro.disconnect();
 	}, []);
 
+	// react to style choice changes
+	useEffect(() => {
+		const map = mapRef.current;
+		if (!map) return;
+		const styleUrl = mapStyleChoice === 'dark' ? 'mapbox://styles/mapbox/dark-v10' : 'mapbox://styles/mapbox/streets-v11';
+		try {
+			map.setStyle(styleUrl);
+		} catch (e) {
+			// some map versions may throw; still listen for styledata to re-add layers
+		}
+	}, [mapStyleChoice]);
+
 	useEffect(() => {
 		const mapEl = mapContainerRef.current;
 		if (!mapEl) return;
 
-		mapboxgl.accessToken = 'pk.eyJ1IjoicGllbG9yZDc1NyIsImEiOiJjbWcxdTd6c3AwMXU1MmtxMDh6b2l5amVrIn0.5Es0azrah23GX1e9tmbjGw';
+		const token = process.env.NEXT_PUBLIC_MAPBOX_TOKEN || process.env.NEXT_PUBLIC_MAPBOX_TOKEN;
+		if (!token) {
+			console.warn('Missing NEXT_PUBLIC_MAPBOX_TOKEN environment variable. Mapbox map will not initialize correctly.');
+		}
+		mapboxgl.accessToken = token ?? '';
 
 		const styleUrl = mapStyleChoice === 'dark'
 			? 'mapbox://styles/mapbox/dark-v10'

web/src/app/components/ZoomControls.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import React from 'react';
-import mapboxgl from 'mapbox-gl';
+// import React from 'react';
+// import mapboxgl from 'mapbox-gl';
 
-interface Props { mapRef: React.MutableRefObject<mapboxgl.Map | null> }
+// interface Props { mapRef: React.MutableRefObject<mapboxgl.Map | null> }
 
-export default function ZoomControls({ mapRef }: Props) {
-	return (
-		<div style={{ position: 'absolute', top: 12, right: 12, zIndex: 3, display: 'flex', flexDirection: 'column', gap: 8 }}>
-			<button className="zoom-btn" aria-label="Zoom in" title="Zoom in" onClick={() => { const map = mapRef.current; if (!map) return; map.easeTo({ zoom: map.getZoom() + 1 }); }}>+</button>
-			<button className="zoom-btn" aria-label="Zoom out" title="Zoom out" onClick={() => { const map = mapRef.current; if (!map) return; map.easeTo({ zoom: map.getZoom() - 1 }); }}>-</button>
-		</div>
-	);
-}
+// export default function ZoomControls({ mapRef }: Props) {
+// 	return (
+// 		<div style={{ position: 'absolute', top: 12, right: 12, zIndex: 3, display: 'flex', flexDirection: 'column', gap: 8 }}>
+// 			<button className="zoom-btn" aria-label="Zoom in" title="Zoom in" onClick={() => { const map = mapRef.current; if (!map) return; map.easeTo({ zoom: map.getZoom() + 1 }); }}>+</button>
+// 			<button className="zoom-btn" aria-label="Zoom out" title="Zoom out" onClick={() => { const map = mapRef.current; if (!map) return; map.easeTo({ zoom: map.getZoom() - 1 }); }}>-</button>
+// 		</div>
+// 	);
+// }