import Map from 'react-map-gl/maplibre';
import { CompassOverlay } from '@wendylabsinc/react-three-map/maplibre';
function App() {
return (
<Map
initialViewState={{ latitude: 51.5, longitude: -0.1, zoom: 15, pitch: 60 }}
mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
>
<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 MapLibre 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.