Mapbox/Leaflet map rotation

Question

The app uses mapbox with leaflet Js. Theres a callback for the location-found event and we set a marker with user's location.

I'd the like map to rotate according with the user location, like a compass.

Any way to accomplish this?

Answer 1

Leaflet doesn't support map rotation (yet), or perspective, for that matter. See bug #268.

I did some work for this in the rotate code branch, but that is still kinda experimental and breaks easily. I don't think it will make it to the Leaflet core, as WebGL is a more promising (and less messy in the long run) way of achieving better results at map rotation than CSS transforms (which is what the rotate branch is about).

Answer 2

MapBox has a "bearing" option for that. Here https://jsfiddle.net/rwnfbu7c/1/ is a example

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    // camera options properties - https://docs.mapbox.com/help/glossary/camera/
    center: [34, 28],
    bearing: -65, // bearing in degrees
    zoom: 2
});