Herramienta de Zoom

Una de las cosas aparentemente más simples como hacer un recuadro de zoom para las aplicaciones de mapas, se convierte en algo realmente complicado si uno quiere una herramienta que funcione correctamente en todos los navegadores, o al menos en los más conocidos, Firefox e Internet Explorer.
Por la red se pueden encontrar algunos ejemplos como la Rubber-band Zoombox para MapServer o los aims*.js de ArcIMS. Pero ambas tienen algunos inconvenientes, la primera que solo hace el recuadro de izquierda a derecha y de arriba a abajo, y la segunda que no me gusta el método que usa para recortar capas y está muy basada en los js de ArcIMS.
Por ello, durante algún tiempo he intentado crear una propia que fuera fácilmente acoplabe a cualquier proyecto de mapas. Aunque aún podría quedar algún detalle por pulir, creo que he conseguido una versión lo suficientemente estable.

Funciona de una forma bastante sencilla solo se necesita una página HTML con un div que formará el recuadro y el script que le da la funcionalidad.
Bueno, me dejo de rollos, ahí va la chicha:
Necesitamos una página HTML que contenga este script y un div con un estilo similar a este: style="position:absolute;top:0px;left:0px;width:0px;height:0px;visibility:hidden;border-style:solid;border-width: 3px;z-index: 2;"

//variables globales
var x0;
var y0;
var x1;
var y1;

var dragAndDropEnabled = false;
var boxDrawn = false;

var Top = 0;
var left = 0;
var width;
var height;

var divRecuadro = null;

function initZoom(divZoom) {
divRecuadro = document.getElementById(divZoom);
document.onmousedown = boxStart;
}

/*
Comienza el dibujo del recuadro del zoom
e - objeto evento asociado
*/
function boxStart(e) {
if(!dragAndDropEnabled) {
x0 = DameCoordenada(e,"x");
y0 = DameCoordenada(e,"y");
dragAndDropEnabled = true;
boxDrawn = false;
}

divRecuadro.style.left = x0;
divRecuadro.style.top = y0;
divRecuadro.style.visibility = "visible";

document.onmousemove = boxMove;

return false;
}

//Se va dibujando el recuadro de zoom
function boxMove(e) {
if(dragAndDropEnabled) {
x1 = DameCoordenada(e,"x");
y1 = DameCoordenada(e,"y");

width = Math.abs(x1 - x0);
height = Math.abs(y1 - y0);

if(x1 <= x0) left = x1; else left = x0; if(y1 <= y0) Top = y1; else Top = y0; divRecuadro.style.left = left; divRecuadro.style.top = Top; divRecuadro.style.width = width; divRecuadro.style.height = height; boxDrawn=true; } document.onmouseup = boxEnd; return false; } function boxEnd(e) { divRecuadro.style.visibility = "hidden"; dragAndDropEnabled = false; if(boxDrawn) { var xMax = left + width; var yMax = Top; var xMin = left; var yMin = Top + height; alert(xMin+"\n"+yMax); } else { //alert("Ha soltado el botón del ratón sin dibujar un rectángulo"); return false; } } function DameCoordenada(e,coordenada) { var x; var y; //si no hay un evento if (!e || e == null) { var e = window.event; } x = e.clientX; y = e.clientY; // alert("X= "+e.pageX+"\t"+e.clientX+"\n"+"Y= "+e.pageY+"\t"+e.clientY); return eval(coordenada); }