map-gl-compass-pro  

OFFICIAL WRAPPER FOR maplibre-compass-pro

!Screen

LIVE DEMO

Usage

See Demo App component to get detailed overview how to embed component in react-map-gl based project.

Component props:
``typescript
type CompassProps = {
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
displayDirection?: boolean;
visualizePitch?: boolean;
onClick?: () => void;
};
`
⚒️⚒️⚒️
`javascript
import 'maplibre-gl/dist/maplibre-gl.css'
import 'map-gl-compass-pro/dist/style.css'

import MapGL from 'react-map-gl/maplibre'
import Compass from 'maplibre-compass-pro'
import { useState } from 'react'

export function DemoApp() {
const [compassSize, setCompassSize] = useState('md')
const [displayDirection, setDisplayDirection] = useState(true)

return (
style={{ width: '100%', height: '100vh' }}
mapStyle="/.json"
>


)
}
``

Please make sure that:
- compass is child of MapGL component;
- compass styles are imported in entrypoint;

Up to date react-map-gl setup available here

Enjoy 🗺️🧭