33 lines
949 B
TypeScript
33 lines
949 B
TypeScript
"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;
|
|
}
|