MapBox Styling and component update

web/src/app/components/ZoomControls.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import React from 'react';
+import mapboxgl from 'mapbox-gl';
+
+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>
+	);
+}