How To Rotate An Online Map With Mouse Scroll Wheel In Pure Javascript And Css3

One of the things I always want to do with online maps is rotate them – I am used to that with real, physical maps.

just reading Rotating a map with CSS3 and jQuery and found a nice, smart example of rotating an online map by using our mouse scroll wheel implemented in javascript by Ryan Moore.

Nice.

// rotation JS stuff
// convert degrees to radians

var deg2radians = Math.PI * 2 / 360;
function doRotate(obj, deg) {
if(obj.filters) {
rad = deg * deg2radians ;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
obj.filters.item(0).M11 = costheta;
obj.filters.item(0).M12 = -sintheta;
obj.filters.item(0).M21 = sintheta;
obj.filters.item(0).M22 = costheta;
} else {
obj.style['-moz-transform'] = "rotate(" + deg + "deg)";
obj.style.MozTransform = "rotate(" + deg + "deg)";
obj.style['-webkit-transform'] = "rotate(" + deg + "deg)";
}
}

// mousewheel js stuff

function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;

/** In Opera 9, delta differs in sign as compared to IE.*/
if (window.opera)
delta = -delta;
} else if (event.detail) { /** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.*/
delta = -event.detail;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta)
handleScroll(delta);
/** Prevent default actions caused by mouse wheel.
* That might be ugly, but we handle scrolls somehow
* anyway, so don't bother here..*/
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}

// initialization code.
if (window.addEventListener) {
/** DOMMouseScroll is for mozilla. */
window.addEventListener('DOMMouseScroll', wheel, false);
console.log('attached event listener');
}

/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;

// scroll handler
function handleScroll(delta) {
window._x_wheel_rotation += -delta * 3;
window._x_wheel_rotation %= 360;
doRotate(document.getElementById("rot_box"), window._x_wheel_rotation);
console.log('rotation: ' + window._x_wheel_rotation);
}
window._x_wheel_rotation = 0;

// google maps stuff

function remap_rotate(x, y, deg) {
var deg2radians = Math.PI * 2 / 360;
var rad = -deg * Math.PI * 2 / 360;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
var nx = costheta * x - sintheta * y;
var ny = sintheta * x + costheta * y;
//console.log('in: ' + x +', '+y+', '+ deg+' out:' +nx+', '+ny);
return [nx, ny];
}
// set up drag translation stuff for map
function setDragHandler(gDrag) {
GEvent.addListener(gDrag, 'dragstart', function(something){
window.originalX = something.clientX;
window.originalY = something.clientY;
window.gdX = window.gDragThing.left;
window.gdY = window.gDragThing.top;
});
GEvent.addListener(gDrag, 'drag', function(something){
var newX = something.clientX - window.originalX;
var newY = something.clientY - window.originalY;
var newCoords = remap_rotate(newX, newY, window._x_wheel_rotation);
window.gDragThing.left = window.gdX + newCoords[0];
window.gDragThing.top = window.gdY + newCoords[1];
});
window.gDragThing = gDrag;
}

google.load("maps", "2.x");
// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("rot_box"));
window.gizoogleMap = map;
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
// default map is created - now we want to
// create the drag event to intercept and remap dragging to be rotated by same amount
var gDrag = map.getDragObject();
setDragHandler(gDrag);
}
google.setOnLoadCallback(initialize);