/map-gl-compass-pro

Primary LanguageTypeScriptMIT LicenseMIT

map-gl-compass-pro npm npm downloads

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

Please make sure that Compass is child of MapGL, otherwise it won't work 🙏🙏🙏.