map-gl-compass-pro

OFFICIAL WRAPPER FOR maplibre-compass-pro

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