sisou / leaflet Goto Github PK

An unofficial branch for making rotation work in leaflet master branch.

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
	osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});

var map = L.map('map', {rotate: true})
		.setView([55, 10], 4)
		.addLayer(osm);

or if you want touch interactions to rotate the map:

var map = L.map('map', {rotate: true, touchRotate: true})
		.setView([55, 10], 4)
		.addLayer(osm);

Simple rotated map with a line, markers and a basemap

Map rotated according to the orientation of your device, if supported

Map with tri-state control for map rotation (locked, unlocked, follow)

Map with draggable markers

Code for these examples is hosted in the debug/rotate folder

To use this branch, you will need to build it. Follow the steps of the Leaflet guide for Building Leaflet from the Source. Then get the JavaScript file from the dist folder.

Map rotation is the most request features on leaflet's feature suggestion website, see Map rotation and a Github issue which started in 2011 rotation of map and contents to x degress.

For good reasons, it has never been implemented into Leaflet's core code.

@IvanSanchez started a "rotate" branch a few years ago to try and add this feature. Then @hyperknot created a "rotate-rc1" branch to make @IvanSanchez work with the latest leaflet changes (RC1 at the time). The project is now maintained by @fnicollet, in the "rotate-master" branch. This branch is regularly merged with master, so you can expect the same issues that you have with Leaflet's master branch (+ maybe more).

Note: Here is a squash from all commits of the original "rotate" branch made by @IvanSanchez: https://github.com/hyperknot/Leaflet/commit/0448ffd8f28730ff3c59822351d4a04f54a3972f

If you encounter issues related to Leaflet itself, please log an issue on the Leaflet project directly: https://github.com/Leaflet/Leaflet/issues/new

If you encounter issues related to map rotation specifically, please log an issue on the this branch: https://github.com/fnicollet/Leaflet/issues

Same as Leaflet's licence