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.

[hokkos]

Open layers 3 has this feature.
http://ol3js.org/en/master/examples/rotation.html

[lyaunzbe]

Any updates on the possibility of this being implemented? Would be very much appreciated.

[colllin]

Seems like OL3 is your best bet for now, or wait for WebGL. I know it's
not what you want to hear, but I also tried posting an offer in their
Google Group for my team to help build map rotation and.... crickets.

On Thu, Jun 5, 2014 at 7:27 PM, Ben L. notifications@github.com wrote:

Any updates on the possibility of this being implemented? Would be very
much appreciated.

—
Reply to this email directly or view it on GitHub
#268 (comment).

[stefanocudini]

this could be useful:
https://github.com/stefanocudini/leaflet-compass

[cgwyllie]

@colllin Same here... In the end we switched to OL3 for our project.

[mvaivre]

Same here. No map rotation is a deal breaker for us.

[stefanocudini]

@cgwyllie OpenLayers 3 support map rotation!!?

[mvaivre]

@stefanocudini Yep!

[braandl]

I also think that this feature should be the current #1 topic for leaflet. Please concider it, I think it is totally worth the effort.

[mourner]

No, it doesn't. At least for Leaflet.

[stefanocudini]

👍

[1marty4sale]

I would also love this. Leaflet is a fantastic framework and it is such a shame there is no plans to support this.

[9SL9]

Need rotation or need to look elsewhere...unfortunately

[lesion]

👍

[IvanSanchez]

@webleaf Then spend some time and resources debugging the rotate branches, as we'll all benefit from that and the code will be released quicker.

[kaio328]

Yep rotation is definitely needed! Best example: a custom made map that changed it original orientation after georeferencing it.

[HarelM]

@mourner @fnicollet @hyperknot Is this planned to be merge to official version? I see a lot of people moving away from leaflet due to this feature which makes me sad, mainly because I like leaflet very much and because I feel that this feature will be needed in my project in the near future.

[RafikSM]

This function is a must to have, I don't understand why @mourner considers this feature not important especially since almost all the others map libraries offer this function !

[IvanSanchez]

@RafikSM Then spend some time and resources debugging the rotate branches, as we'll all benefit from that and the code will be released quicker.

[zhuyinjing]

does leaflet support rotate function????
i really want my map to rotate !
thanks so much! @IvanSanchez

[goforward01]

@IvanSanchez Hi, first, thanks a lot for the amazing work of leaflet. I am wandering about whether to switch to other library for leaflet has no way to rotate map which is needed serious or not. So are there any new messages about this feature, and will this feature be supported by official library soon or maybe in future? I have tried a lot ways and have no luck with any hack to realize rotating my maps.

[hyperknot]

@goforward01 if map rotation is a required feature for a project, then yes, I recommend you to switch to a different library.

[maceto2016]

Thanks for feedback Ero. We are using rc1 and the results are meeting our needs. Em 12 de jun de 2016 06:33, "Zsolt Ero" <notifications@github.com> escreveu:

…

@maceto2016 <https://github.com/maceto2016> I'll continue working on rotate-rc1 and @IvanSanchez <https://github.com/IvanSanchez> is working on Leaflet GL, which also supports rotation: https://github.com/ IvanSanchez/Leaflet.gl — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#268 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe/AS8-0fdhl7X2nVx48mdKj7ce68jp86-nks5qK9JbgaJpZM4BVuxg> .

[goforward01]

@hyperknot Okay, thanks for reply. BTW, I will keep an eye on leaflet, it's an awesome library.

[va2ron1]

If people wondering, I have merged and have updated the old @IvanSanchez rotate branch to the latest of Leaflet in my fork.

[HarelM]

@va2ron1 I would very much like to test it, but I'm using angular-cli. is there a npm package I can use to test it?
Assuming this will work as planned, will it be merged to the official version? I really don't want to choose between rotation to other newly implemented features if the branch gets out of sync...

[fnicollet]

Hello, There is no official plan to merge it to master anytime soon, consider it experimental. There is no npm package for it either Fabien Le 20 mars 2018 19:57, "Harel M" <notifications@github.com> a écrit :

…

@va2ron1 <https://github.com/va2ron1> I would very much like to test it, but I'm using angular-cli. is there a npm package I can use to test it? Assuming this will work as planned, will it be merged to the official version? I really don't want to choose between rotation to other newly implemented features if the branch gets out of sync... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#268 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABLtoT-sJQnOUE8rAgDooI-9Wa101_D0ks5tgVEegaJpZM4BVuxg> .

[va2ron1]

@HarelM like @fnicollet said, this is just experimental. If you want to try it with angular, just install the package like this:
npm install https://github.com/va2ron1/Leaflet

Edit: I hadn't include the distributions files, now will work with node.

[HarelM]

@va2ron1 I wanted to test your branch but I have an issue with markercluster so i can't currently test it:
Leaflet/Leaflet.markercluster#874
I will upload it once the issue is resolved and it runs to my beta site and let you know what issues I find.

[HarelM]

Ok, The problem was that this branch is using the esm version and does not export L variable for leaflet.markercluster to use - fixed it locally.
I Added the following code to map initialization on my project:

{
...
rotate = true,
...
}
...
map.setBearing(30);

I have uploaded a version to the following address:
https://israelhiking.osm.org.il/beta/
My findings:

1. I could not rotate the map using 2 fingers - neither desktop with touch on win 10 and chrome nor chrome on android - not sure if this was not implemented or I didn't configured something...
2. DivIcon is not centered (I think) - in the following example the lower part of the white triangle should be pointing to the blue dot.
   
   This is how it looks in the non rotated version:
   
3. getBounds function is drifting? I have a query to my DB to show all the points in the current screen using the following code:

let northEast = this.mapService.map.getBounds().pad(0.2).getNorthEast();
let southWest = this.mapService.map.getBounds().pad(0.2).getSouthWest();
sending to server

at first this works fine, but after a few panning and zooming I get incorrect response when calling this function.
4. not sure if there's a bug in my code or not but I see strange behavior with the following code:
https://github.com/IsraelHikingMap/Site/blob/master/IsraelHiking.Web/sources/application/services/snapping.service.ts
which should snap a marker when dragging it to the closest feature in a list, but it behaves strangely with the rotation.

Polygons and poly-lines are correctly rotated, and even ant-path works :-)
flyTo seems to work as expected.
overall, I think this is a good progress, the above issues are probably small/easy to fix unfortunately I don't think I'll be able to help out with the implementation at this state but I'll be happy to test things out.
Let me know if I can help more...

[va2ron1]

@HarelM If you don't mind, post this issue at my fork to leave this behind.

Edit: Posted

[HarelM]

@mourner I know this issue is a bit old, any change to reconsider and opening so it will be added to leaflet officially? I've been using leaflet for the better part of the last five years and I really like it, I would hate to need to change the entire map presentation framework since this feature is not supported officially...

[ccloquet]

@va2ron1 great work, thank you !

[HarelM]

This is now "open" for too long. The relevant fork doesn't work well. I now use my site inside Cordova to allow native device usage such as background recording. It's been a hell of a ride leaflet, but it's time to move on...

[ghybs]

Hi @HarelM,

While I think we all agree that supporting map rotation in Leaflet would be extremely useful for many people, it is also clear that the technical difficulty (as clearly explained by @mourner from the very beginning) makes it unbearable for the current Leaflet team and resources unfortunately. 😰

If you need this feature but @va2ron1's fork does not work right for you, the easiest solution for sure would be to change the mapping library. There are several open source alternatives with such feature.
Again, we would have loved to support it in Leaflet; it is just unreasonable in the current situation. 😭
➡️ out of current Leaflet scope.

As this thread has been closed for 7 years and it currently does not seem to bring further value, I am going to lock it.

Kind reminder: this is open source; we need your help! 🙏 If you can provide help, please feel free to submit PR's, publish your own plugin, or contact us if you are ready to provide some funding.