Rotating maps with CSS3 and jQuery

<>p>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:

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

2 Comments »

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.captureEvents(Event.MOUSEMOVE);
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

Ajax Questions and Answers

Caching and dynamic views
My client does not want to change his cache settings on IE and I'm trying to figure out a way to dynamically update a view each time it is visited. I...

IE 8 Crashing Problem
Hello Everyone, Here\'s the situation: two iSeries boxes - Dev and Prod both V5R4M0 We\'re using AJAX to dynamically load content using a tabbed...

JQuery Function Not Defined?
[div]Hi there,[/div] [div][/div] [div]I\'m trying to set a php session variable from a radio button. The idea is that a jquery function is called...