map-gl-compass-pro 
New generation maps require new generation tools!
Example implementation
Usage
As for now map-gl-compass-pro works only with react & react-map-gl (react-map-gl is peer dependency). If community will express will of using it with raw mapbox / maplibre library I will add some wrapper around this component.
import MapGL from 'react-map-gl'
import maplibregl from 'maplibre-gl'
import CompassPro from 'map-gl-compass-pro'
function Map(){
(...)
return (
<MapGL
initialViewState={{
longitude: 14.5580,
latitude: 53.4441,
zoom: 14
}}
mapLib={maplibregl}
mapStyle="https://my-domain.com/mapStyle.json"
>
<CompassPro
mapId="myMap" // optional, default: current
size="lg" // optional, one of 'xs' | 'sm' | 'md' | 'lg', default: 'md'
visualizePitch={true} // optional, default false
onNeedleClick={handleNeedleClick} // optional, default set pitch & bearing to 0
wrapperClass="ownClassName" // optional, default absolutely positioned in bottom left corner
/>
(...)
</MapGL>
);
}Please make sure that Compass is child of MapGL, otherwise it won't work. Also read more about react-map-gl setup and mapId.