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;
+}