how to rotate leaflet.js map

Question

I'm trying to rotate the map (or tileLayer) by x degrees. My research didn't produced any results that are not really dirty hacks and in my case doesn't work.

Is there a native leaflet.js way of rotating the map ?

(css rotate doesn't affect the mouse movement)

Maneater

Answer 1

Sorry to say, there is no way of natively rotating a Leaflet map. You'll need one of those ugly hacks or switch away from Leaflet and take a look at Mapbox GL JS or Open Layers 3:

• http://www.mapbox.com/mapbox-gl-js/example/navigation/
• http://openlayers.org/en/latest/examples/rotation.html

Obscurant

Thanks for opening my eyes to new libraries... after some research open layers seems like the best choice for me – Maneater

Do either of these providers charge? – Furiya

Answer 2

It works with leaflet-rotate-map https://www.npmjs.com/package/leaflet-rotate-map

I use Turf.js to get bearing from current and prev point!

let bearing = turf.bearing(point1, point2);
mymap.setBearing(bearing*-1);

View Screen-shoot

View Complete animation

Weariless

Answer 3

Leaflet does not support rotation, per this GitHub issue.

Ferde

This issue was open 7 years ago. Anyone know if they ever added support? – Furiya

I do not think so. – Ferde

I switched to openlayers and the ux was pretty bad with rotation so I switched back to leafletjs and will just skip rotation. – Furiya

In addition to the options listed in the previous answer, the ArcGIS API for JavaScript (developers.arcgis.com/javascript) supports rotation. – Ferde

Answer 4

I know this is an old thread, but I hope this answer will still help someone since no one mentioned here this option so far:

https://github.com/Raruto/leaflet-rotate

It seems to be working pretty well, and it's recently updated. Here's a demo.

As iH8 and many others mentioned, "there is no way of natively rotating a Leaflet map" and there might not be in the near/far future due to this reason. Meaning that rotating the map using this option will not update the map's labels - so in some scenarios, you might end up with your labels upside-down.

Saltigrade