rotation of map and contents to x degress.
coomsie opened this issue · 66 comments
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 ...
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.
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
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.
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.
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.
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!
it looks like this isn't going to be included in leafletjs anytime soon, I guess, huh? haha
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?
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!
me too, I could have used this feature recently too. It'd be awesome!
+1 for me, being able to use the device orientation API to align the map with a mobile user would be brilliant!
+1
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.
Open layers 3 has this feature.
http://ol3js.org/en/master/examples/rotation.html
Any updates on the possibility of this being implemented? Would be very much appreciated.
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).
this could be useful:
https://github.com/stefanocudini/leaflet-compass
Same here. No map rotation is a deal breaker for us.
@cgwyllie OpenLayers 3 support map rotation!!?
@stefanocudini Yep!
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.
No, it doesn't. At least for Leaflet.
👍
I would also love this. Leaflet is a fantastic framework and it is such a shame there is no plans to support this.
Need rotation or need to look elsewhere...unfortunately
👍
👎 Looks like we'll need to lose time switching to OL3 🎱
This is a real shame as it's a deal breaker for us too. We're having to switch to OL3 for our app :o(
Have a look at my unofficial rotate-rc1 branch at https://github.com/hyperknot/Leaflet/tree/rotate-rc1
It is based on @IvanSanchez's older rotate work.
We have tested the framework, and really liked the results. However for professional use in navigation solutions, this is an indispensable feature. We understand the complexity involved in this implementation, but this feature would add much to the framework. Let's wait a little longer, and if this feature is not included, unfortunately, we will have to switch to OL3 ...
@maceto2016 I'll continue working on rotate-rc1 and @IvanSanchez is working on Leaflet GL, which also supports rotation: https://github.com/IvanSanchez/Leaflet.gl
@hyperknot Thanks for reply. Let's try the rotate-rc1 soon.
@hyperknot : Can you give a hint on the status for your work on the rotate stuff? I was checking to use leaflet for my nav software. Rotation is definitely required. I just made a poc for rotating the map "outside" - see this example. Basically it would fit my needs but unfortunately it requires accessing some internal methods and this way is not very future proof. So if there are chances for rotation being part of leaflet soon, I would prefer this. I would also be willing to contribute on this part.
We need rotate nap feature!!!
@wellenvogel @GaMsh have a look at my rotate-rc1 branch, we are developing it with @fnicollet, he is using it exactly for a navigational software.
@wellenvogel also, your example looks great, you've already solved popup rotation, I'd be interested in seeing your solution. Your contributions would be welcome on rotate-rc1!
@hyperknot : should we discuss some stuff here?
I was wondering if the idea would be to rotate oly some of the panes?
For me rotate + anti-rotate afterwards on an item gave me some issue with text being less readable(Chrome on Ubuntu).
So I thought it could be helpfull to only rotste the necessary panes.
But this woul introduce the need for translation functions being pane specific...
@wellenvogel can you check if the rotate + anti-rotate is giving your those problems on the rotate-rc1 branch as well? It's a possible solution to only rotate the tile + vector panes, but then the calculations need to be changed.
Also, feel free to use the rotate-rc1 repo's issue tracker for discussions, that way we can keep it separate from Leaflet master.
I have to say that I have these blur issues on your branch but I don't have
them in rotate-rc1, so rotate+anti-rotate works, when the calculations are
exact I believe. I am working on this branch for the fix:
https://github.com/fnicollet/Leaflet/tree/patch-14
This very fresh commit:
bddfb11
Has messed things up but I almost have it working
Fabien
On Tue, Jun 28, 2016 at 5:38 PM, Zsolt Ero notifications@github.com wrote:
@wellenvogel https://github.com/wellenvogel can you check if the rotate
- anti-rotate is giving your those problems on the rotate-rc1 branch as
well? It's a possible solution to only rotate the tile + vector panes, but
then the calculations need to be changed.—
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/ABLtoa73ZBKvqplUDnl-Vvm8jbtxNExRks5qQT_2gaJpZM4BVuxg
.
Fabien Nicollet
Tel : +33 (0)6 60 54 72 20
Almost there, last thing is to call update when rotation of the map is
changed so that _updatePosition is changed. Have to go, will commit that
tonight probably
On Tue, Jun 28, 2016 at 5:53 PM, Fabien Nicollet fnicollet@gmail.com
wrote:
I have to say that I have these blur issues on your branch but I don't
have them in rotate-rc1, so rotate+anti-rotate works, when the calculations
are exact I believe. I am working on this branch for the fix:
https://github.com/fnicollet/Leaflet/tree/patch-14
This very fresh commit:bddfb11
Has messed things up but I almost have it workingFabien
On Tue, Jun 28, 2016 at 5:38 PM, Zsolt Ero notifications@github.com
wrote:@wellenvogel https://github.com/wellenvogel can you check if the
rotate + anti-rotate is giving your those problems on the rotate-rc1 branch
as well? It's a possible solution to only rotate the tile + vector panes,
but then the calculations need to be changed.—
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/ABLtoa73ZBKvqplUDnl-Vvm8jbtxNExRks5qQT_2gaJpZM4BVuxg
.Fabien Nicollet
Tel : +33 (0)6 60 54 72 20
Fabien Nicollet
Tel : +33 (0)6 60 54 72 20
@hyperknot do you see chances that your work will be merged into master in the near future?
I really would like to stay as close as possible on master. Otherrwise I maybe would continue with some sort of plugin approach with minimal changes on the core code.
Please give link to compiled leaflet.js with this patch!
@hyperknot regularly builds and store the result in the branch's source code, but the best you can do it build it yourself just checkout the branch or download it (https://github.com/hyperknot/Leaflet/archive/rotate-rc1.zip), then build it just like leaflet, see Build Leaflet from source: http://leafletjs.com/download.html.
Last big issue is with vector layers https://github.com/hyperknot/Leaflet/issues/1, patch almost works but needs a fix (see comments), if you feel like helping us :)
For anyone interested, here is the link to the unofficial branch for leaflet rotation:
https://github.com/fnicollet/Leaflet/tree/rotate-master
You are welcome to try it and contribute to it :)
Fabien
We need rotation, too
@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.
Yep rotation is definitely needed! Best example: a custom made map that changed it original orientation after georeferencing it.
@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.
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 !
@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.
does leaflet support rotate function????
i really want my map to rotate !
thanks so much! @IvanSanchez
@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.
@goforward01 if map rotation is a required feature for a project, then yes, I recommend you to switch to a different library.
@hyperknot Okay, thanks for reply. BTW, I will keep an eye on leaflet, it's an awesome library.
If people wondering, I have merged and have updated the old @IvanSanchez rotate branch to the latest of Leaflet in my fork.
@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...
@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.
@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.
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:
- 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...
- 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:
getBoundsfunction 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 serverat 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...
@HarelM If you don't mind, post this issue at my fork to leave this behind.
Edit: Posted
@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...
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...
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.