import Map from 'react-map-gl/mapbox';
import { CompassOverlay } from '@wendylabsinc/react-three-map/mapbox';
function App() {
return (
<Map
mapboxAccessToken="YOUR_TOKEN"
initialViewState={{ latitude: 40.7, longitude: -74.0, zoom: 15, pitch: 60 }}
mapStyle="mapbox://styles/mapbox/dark-v11"
>
<CompassOverlay />
</Map>
);
}
<CompassOverlay
size={150}
offset={{ x: 10, y: 10 }}
className="my-compass"
/>
A screen-space compass overlay that renders in its own React Three Fiber canvas.
This component creates a separate R3F canvas that floats above the map and displays a 3D compass synchronized with the Mapbox camera's bearing and pitch.
Use this when you want the compass in a separate rendering context from your main 3D scene, or when you need precise control over the overlay's position and size.