Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rotation of map and contents to x degress. #268

Closed
coomsie opened this issue Aug 29, 2011 · 66 comments
Closed

rotation of map and contents to x degress. #268

coomsie opened this issue Aug 29, 2011 · 66 comments

Comments

@coomsie
Copy link

@coomsie coomsie commented Aug 29, 2011

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
Copy link
Member

@mourner mourner commented Aug 29, 2011

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.

@mourner mourner closed this Aug 29, 2011
@coomsie
Copy link
Author

@coomsie coomsie commented Sep 2, 2011

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
Copy link

@yoavrofe yoavrofe commented Dec 15, 2011

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
Copy link
Member

@mourner mourner commented Dec 15, 2011

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
Copy link

@yoavrofe yoavrofe commented Dec 15, 2011

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
Copy link

@yoavrofe yoavrofe commented Feb 2, 2012

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
Copy link

@jerroydmoore jerroydmoore commented Dec 21, 2013

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

@colllin
Copy link

@colllin colllin commented Mar 4, 2014

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
Copy link

@mh166 mh166 commented Mar 5, 2014

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
Copy link

@bnroths-zz bnroths-zz commented Mar 5, 2014

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

@cgwyllie
Copy link

@cgwyllie cgwyllie commented Mar 18, 2014

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

@krnlde
Copy link

@krnlde krnlde commented Apr 6, 2014

+1

@mrcfhr
Copy link

@mrcfhr mrcfhr commented Apr 23, 2014

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
Copy link

@hokkos hokkos commented May 27, 2014

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

@lyaunzbe
Copy link

@lyaunzbe lyaunzbe commented Jun 6, 2014

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

@colllin
Copy link

@colllin colllin commented Jun 6, 2014

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
Copy link
Contributor

@stefanocudini stefanocudini commented Jul 13, 2014

@cgwyllie
Copy link

@cgwyllie cgwyllie commented Jul 14, 2014

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

@mvaivre
Copy link

@mvaivre mvaivre commented Nov 29, 2014

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

@stefanocudini
Copy link
Contributor

@stefanocudini stefanocudini commented Nov 29, 2014

@cgwyllie OpenLayers 3 support map rotation!!?

@mvaivre
Copy link

@mvaivre mvaivre commented Nov 30, 2014

@braandl
Copy link

@braandl braandl commented Feb 28, 2015

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
Copy link
Member

@mourner mourner commented Feb 28, 2015

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

@stefanocudini
Copy link
Contributor

@stefanocudini stefanocudini commented Feb 28, 2015

👍

@1marty4sale
Copy link

@1marty4sale 1marty4sale commented Jun 4, 2015

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

@9SL9
Copy link

@9SL9 9SL9 commented Aug 15, 2015

Need rotation or need to look elsewhere...unfortunately

@lesion
Copy link

@lesion lesion commented Apr 25, 2016

👍

@webleaf
Copy link

@webleaf webleaf commented Sep 20, 2016

We need rotation, too

@IvanSanchez
Copy link
Member

@IvanSanchez IvanSanchez commented Sep 20, 2016

@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
Copy link

@kaio328 kaio328 commented Jan 31, 2017

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

@HarelM
Copy link

@HarelM HarelM commented Apr 19, 2017

@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.

@yohanboniface yohanboniface mentioned this issue Sep 6, 2017
0 of 2 tasks complete
@RafikSM
Copy link

@RafikSM RafikSM commented Sep 18, 2017

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
Copy link
Member

@IvanSanchez IvanSanchez commented Sep 18, 2017

@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
Copy link

@zhuyinjing zhuyinjing commented Sep 21, 2017

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

@goforward01
Copy link

@goforward01 goforward01 commented Dec 21, 2017

@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
Copy link
Collaborator

@hyperknot hyperknot commented Dec 21, 2017

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

@maceto2016
Copy link

@maceto2016 maceto2016 commented Dec 21, 2017

@goforward01
Copy link

@goforward01 goforward01 commented Dec 22, 2017

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

@va2ron1
Copy link

@va2ron1 va2ron1 commented Mar 16, 2018

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

@HarelM
Copy link

@HarelM HarelM commented Mar 20, 2018

@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
Copy link
Collaborator

@fnicollet fnicollet commented Mar 20, 2018

@va2ron1
Copy link

@va2ron1 va2ron1 commented Mar 20, 2018

@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
Copy link

@HarelM HarelM commented Mar 27, 2018

@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
Copy link

@HarelM HarelM commented Mar 28, 2018

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.
    image
    This is how it looks in the non rotated version:
    image
  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
Copy link

@va2ron1 va2ron1 commented Mar 30, 2018

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

Edit: Posted

@HarelM
Copy link

@HarelM HarelM commented Mar 30, 2018

@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...

@HarelM HarelM mentioned this issue Mar 30, 2018
50 of 52 tasks complete
@ccloquet
Copy link

@ccloquet ccloquet commented Apr 6, 2018

@va2ron1 great work, thank you !

transducer added a commit to Alliander/decentralized-auth that referenced this issue Jul 25, 2018
- Map over props
- Extract access-token
- Use Google Closure methods

Note: bearing and pitch are not possible in Leaflet
See mapbox/mapbox-gl-leaflet#43
Same for rotation.
See Leaflet/Leaflet#268
@HarelM
Copy link

@HarelM HarelM commented Sep 14, 2018

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
Copy link
Collaborator

@ghybs ghybs commented Sep 16, 2018

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.

@Leaflet Leaflet locked and limited conversation to collaborators Sep 16, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.