Tuesday, February 9th, 2010

Rotating maps with CSS3 and jQuery

Category: CSS, Geo, jQuery

One of the things I always want to do with online maps is rotate them – I am used to that with real, physical maps. As physical maps become a lot more clever these days (for example have you seen the zoomable map?) it is time we can do this with the online ones, too.

Whilst Google supports this in the satellite and hybrid maps, the basic ones still can’t be turned. Which is why I took CSS3 transformations (wrapped in a very useful jQuery plugin) and voila – rotating is possible:

Rotating a map with CSS3 and jQuery by  you.

Read more about the implementation and some of the things that need fixing in the original blog post about map rotation.

Posted by Chris Heilmann at 10:07 am

3.6 rating from 19 votes


Comments feed TrackBack URI

The idea is cool, but moving doesn’t work correctly with a rotated map.

Comment by HiveHicks — February 10, 2010

@HiveHicks: you can make moving/dragging work with a little more code with Google Maps API v3:

1a. capture ALL mouse movement:
if (window.Event)
document.onmousemove = getCursorXY;
1b: function getCursorXY(e)
mouseX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
mouseY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
2. initialize the map with dragging=false
3. add map listeners for dragstart and drag
4. function dragstart()
dragX = mouseX;
dragY = mouseY;
5. function drag()
var dX = dragX-mouseX;
var dY = dragY-mouseY;
var rads = heading * Math.PI / 180;

map.panBy(dX*Math.cos(rads)+dY*Math.sin(rads), -dX*Math.sin(rads)+dY*Math.cos(rads));
dragX = mouseX;
dragY = mouseY;

Comment by n6mac41717 — June 8, 2010

Leave a comment

You must be logged in to post a comment.