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:

type CompassProps = {
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    displayDirection?: boolean;
    visualizePitch?: boolean;
    onClick?: () => void;
};

⚒️⚒️⚒️

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 (
        <MapGL
            style={{ width: '100%', height: '100vh' }}
            mapStyle="/<your_map_style>.json"
        >
            <Compass size={compassSize} displayDirection={displayDirection} />
        </MapGL>
    )
}

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 🗺️🧭