rotation of map and contents to x degress.

[coomsie]

Hi,

I have been using this on the iphone as a great mapping api for offline maps ... it rocks ...

I'm keen to extend the library to allow a method to be called to do a transformation of the map and it's contents (using the power of webkit ) to point north (assuming the user is using a phone with a compass api) ... i.e.

-webkit-transform: rotate(12deg);

can someone point me in the right direction where i should start ... or if this is a future feature ...

Cheers
coomsie

p.s. sorry if this is the wrong place to place new features requests ...

[mourner]

It's not as easy as it sounds - besides the rotation itself, you need to extend all the projection logic for all events to work with rotated maps correctly, extend touch logic to allow rotation with fingers, change the tile loading algorithm (it will become more complex in rotated case than just a requesting rectangle of tiles), and many other nuances.

I thought about that myself and at that time I came to conclusion that this feature isn't worth all the code overhead and complexity. It's nice to toy with but still rarely very practical.

[coomsie]

thanks for the comments .... appreciate it,

i'll mark it down as something to do later then ...

i've created an extension for the tile layer that allows the tiles to come from the web database .... works well on the iphone + titanium/phonegap ... i'll tidy it up and then send a pull request .... (the js will no doubt need tidying up though - i'm not an expert in that field yet)

:p

[yoavrofe]

I'ts not so hard as it looks. Map rotation can be a graet thing when working with PhoneGap. as a test, just add the following the the CSS:

"-webkit-transform: rotate(30deg);"

This will show you the rotated map. Markers and tiles seam to work, but the canvas shoukd be expanded so it's a rectangular area with the size of the diagonal.

[mourner]

It's not so simple as it looks either. :) You need to transform all mouse and touch events correctly according to rotation, you need to make it work with non-rotated markers and popups, you need to write completely different algorithms for detecting current geographical bounds, detecting tiles to load, different polygon and polyline clipping algorithms, etc. etc. etc.

[yoavrofe]

I tried it with the first example. It looks like the tiles are loaded correctly, but the mouse events should be changed, as well as the popups. The vector layers are placed correctly, but the marker image if rotated, of course.

[yoavrofe]

mourner, could you please advise me how to change the size and position of the map pane div? If I want to rotate the map, I must have a map that's larger then the real size so that no blank space is left on the courners. Could you direct me to the function responsible for the div size?

Thanks!

[jerroydmoore]

it looks like this isn't going to be included in leafletjs anytime soon, I guess, huh? haha

[colllin]

I think this feature is becoming more of a need-to-have than a nice-to-have. Common mapping applications now offer rotation, so users are starting to expect it. It's been added to my product roadmap whether it's on leaflet's or not.

Can we reconsider the map rotation feature? What would it take to build it, and what are the considerations?

[mh166]

I can +1 here. I do need rotation for my application, too. I just made the change from ol3 to Leaflet / Mapbox.js because it is much easier to comprehend and does a lot of the stuff I want and need in just the way I thought it has to work. So it's very intuitive, thanks for that!
But if you could add rotation support it would be fantastic!

[bnroths-zz]

me too, I could have used this feature recently too. It'd be awesome!

[cgwyllie]

+1 for me, being able to use the device orientation API to align the map with a mobile user would be brilliant!

[krnlde]

+1

[mrcfhr]

wouldn't it be enough if the marker would change it's rotation with the device motion data you get from your phone in html5? so you could at least see where you stand - and in which direction you're looking right when you turn your device.