openlayers madness

public/lib/OpenLayers/Control/KeyboardDefaults.js

@@ -0,0 +1,65 @@
+/* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the full
+ * text of the license. */
+// @require: OpenLayers/Control.js
+
+/**
+ * @class
+ */
+OpenLayers.Control.KeyboardDefaults = Class.create();
+OpenLayers.Control.KeyboardDefaults.prototype = 
+  Object.extend( new OpenLayers.Control(), {
+
+    /** @type int */
+    slideFactor: 50,
+
+    /**
+     * @constructor
+     */
+    initialize: function() {
+        OpenLayers.Control.prototype.initialize.apply(this, arguments);
+    },
+    
+    /**
+     * 
+     */
+    draw: function() {
+        Event.observe(document, 
+                      'keypress', 
+                      this.defaultKeyDown.bind(this));
+    },
+    
+    /**
+    * @param {Event} evt
+    */
+    defaultKeyDown: function (evt) {
+
+        var slide = this.map.getResolution() * this.slideFactor;
+        var center = this.map.getCenter();
+    
+        var newCenter = center.copyOf();
+
+        switch(evt.keyCode) {
+            case Event.KEY_LEFT:
+                newCenter = newCenter.add( -slide, 0);
+                break;
+            case Event.KEY_RIGHT: 
+                newCenter = newCenter.add( slide, 0);
+                break;
+            case Event.KEY_UP:
+                newCenter = newCenter.add( 0, slide);
+                break;
+            case Event.KEY_DOWN:
+                newCenter = newCenter.add( 0, -slide);
+                break;
+        }
+        
+        if (!newCenter.equals(center)) {
+            this.map.setCenter(newCenter);
+            Event.stop(evt);
+        }
+    },
+    
+    /** @final @type String */
+    CLASS_NAME: "OpenLayers.Control.KeyboardDefaults"
+});

public/lib/OpenLayers/Control/LayerSwitcher.js

@@ -0,0 +1,224 @@
+/* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the full
+ * text of the license. */
+// @require: OpenLayers/Control.js
+/** 
+* @class
+*/
+OpenLayers.Control.LayerSwitcher = Class.create();
+
+/** color used in the UI to show a layer is active/displayed
+*
+* @final
+* @type String 
+*/
+OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR = "darkblue";
+
+/** color used in the UI to show a layer is deactivated/hidden
+*
+* @final
+* @type String 
+*/
+OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR = "lightblue";
+
+
+OpenLayers.Control.LayerSwitcher.prototype = 
+  Object.extend( new OpenLayers.Control(), {
+
+    /** @type String */
+    activeColor: "",
+    
+    /** @type String */
+    nonActiveColor: "",
+    
+    /** @type String */
+    mode: "checkbox",
+
+    /**
+    * @constructor
+    */
+    initialize: function(options) {
+        this.activeColor = OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR;
+        this.nonActiveColor = OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR;
+        this.backdrops = [];
+        OpenLayers.Control.prototype.initialize.apply(this, arguments);
+    },
+
+    /**
+    * @returns A reference to the DIV DOMElement containing the switcher tabs
+    * @type DOMElement
+    */  
+    draw: function() {
+        // initialize our internal div
+        OpenLayers.Control.prototype.draw.apply(this);
+
+        this.div.style.position = "absolute";
+        this.div.style.top = "10px";
+        this.div.style.right = "0px";
+        this.div.style.left = "";
+        this.div.style.fontFamily = "sans-serif";
+        this.div.style.color = "white";
+        this.div.style.fontWeight = "bold";
+        this.div.style.marginTop = "3px";
+        this.div.style.marginLeft = "3px";
+        this.div.style.marginBottom = "3px";
+        this.div.style.fontSize="smaller";   
+        this.div.style.width = "10em";
+
+        this.map.events.register("addlayer", this, this.redraw);
+        this.map.events.register("removelayer", this, this.redraw);
+        return this.redraw();    
+    },
+
+    /**
+    * @returns A reference to the DIV DOMElement containing the switcher tabs
+    * @type DOMElement
+    */  
+    redraw: function() {
+
+        //clear out previous incarnation of LayerSwitcher tabs
+        this.div.innerHTML = "";
+        var visible = false;
+        for( var i = 0; i < this.map.layers.length; i++) {
+            if (visible && this.mode == "radio") {
+                this.map.layers[i].setVisibility(false);
+            } else {
+                visible = this.map.layers[i].getVisibility();
+            }
+            this.addTab(this.map.layers[i]);
+        }
+            
+        return this.div;
+    },
+    
+    /** 
+    * @param {event} evt
+    */
+    singleClick: function(evt) {
+        var div = Event.element(evt);
+
+        // See comment about OL #57 fix below.
+        // If the click occurred on the corner spans we need
+        // to make sure we act on the actual label tab instead.
+        div = div.labelElement || div;
+
+        var layer = div.layer;
+        if (this.mode == "radio") {
+            for(var i=0; i < this.backdrops.length; i++) {
+                this.setTabActivation(this.backdrops[i], false);
+                this.backdrops[i].layer.setVisibility(false);
+            }
+            this.setTabActivation(div, true);
+            layer.setVisibility(true);
+        } else {
+            var visible = layer.getVisibility();
+            
+            this.setTabActivation(div, !visible);
+            layer.setVisibility(!visible);
+        }
+        Event.stop(evt);
+    },
+    
+    /** 
+    * @private
+    *
+    * @param {event} evt
+    */
+    ignoreEvent: function(evt) {
+        Event.stop(evt);
+        return false;
+    },
+
+    /** 
+    * @private
+    * 
+    * @param {OpenLayers.Layer} layer
+    */            
+    addTab: function(layer) {
+
+        // Outer DIV - for Rico Corners
+        //
+        var backdropLabelOuter = document.createElement('div');
+        backdropLabelOuter.id = "LayerSwitcher_" + layer.name + "_Tab";
+        backdropLabelOuter.style.marginTop = "4px";
+        backdropLabelOuter.style.marginBottom = "4px";
+        
+        this._setEventHandlers(backdropLabelOuter);
+
+        // Inner Label - for Rico Corners
+        //
+        var backdropLabel = document.createElement('p');
+        backdropLabel.innerHTML = layer.name;
+        backdropLabel.style.marginTop = "0px";
+        backdropLabel.style.marginBottom = "0px";
+        backdropLabel.style.paddingLeft = "10px";
+        backdropLabel.style.paddingRight = "10px";
+        
+        // add reference to layer onto the div for use in event handlers
+        backdropLabel.layer = layer;
+
+        // set event handlers
+        this._setEventHandlers(backdropLabel);
+
+        // add label to div
+        backdropLabelOuter.appendChild(backdropLabel);
+        
+        this.backdrops.append(backdropLabel); 
+        
+        // add div to main LayerSwitcher Div
+        this.div.appendChild(backdropLabelOuter);
+
+        Rico.Corner.round(backdropLabelOuter, {corners: "tl bl",
+                                      bgColor: "transparent",
+                                      color: "white",
+                                      blend: false});
+
+        // extend the event handlers to operate on the
+        // rounded corners as well. (Fixes OL #57.)
+        var spanElements=backdropLabel.parentNode.getElementsByTagName("span");
+        
+        for (var currIdx = 0; currIdx < spanElements.length; currIdx++) {
+            this._setEventHandlers(spanElements[currIdx], backdropLabel);
+        }
+
+        this.setTabActivation(backdropLabel, layer.getVisibility());
+    },
+
+    /*
+      @private
+    
+      @param {DOMElement} div
+      @param {Boolean} activate
+    */
+    _setEventHandlers : function(element, labelDiv) {
+
+        // We only want to respond to a mousedown event.
+        element.onclick = this.singleClick.bindAsEventListener(this);
+        element.ondblclick = this.singleClick.bindAsEventListener(this);
+        element.onmouseup = this.ignoreEvent.bindAsEventListener(this);
+        element.onmousedown = this.ignoreEvent.bindAsEventListener(this);
+
+        // If we are operating on a corner span we need to store a
+        // reference to the actual tab. (See comment about OL #57 fix above.)
+        if (labelDiv) {
+            element.labelElement = labelDiv;
+        }
+    },
+
+    /**
+    * @private
+    *
+    * @param {DOMElement} div
+    * @param {Boolean} activate
+    */
+    setTabActivation:function(div, activate) {
+        var color = (activate) ? this.activeColor : this.nonActiveColor;
+        Rico.Corner.changeColor(div, color);
+    },
+
+
+
+    /** @final @type String */
+    CLASS_NAME: "OpenLayers.Control.LayerSwitcher"
+});
+

public/lib/OpenLayers/Control/MouseDefaults.js

@@ -0,0 +1,130 @@
+/* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the full
+ * text of the license. */
+// @require: OpenLayers/Control.js
+OpenLayers.Control.MouseDefaults = Class.create();
+OpenLayers.Control.MouseDefaults.prototype = 
+  Object.extend( new OpenLayers.Control(), {
+
+    performedDrag: false,
+
+    initialize: function() {
+        OpenLayers.Control.prototype.initialize.apply(this, arguments);
+    },
+    
+    draw: function() {
+        this.map.events.register( "click", this, this.defaultClick );
+        this.map.events.register( "dblclick", this, this.defaultDblClick );
+        this.map.events.register( "mousedown", this, this.defaultMouseDown );
+        this.map.events.register( "mouseup", this, this.defaultMouseUp );
+        this.map.events.register( "mousemove", this, this.defaultMouseMove );
+        this.map.events.register( "mouseout", this, this.defaultMouseOut );
+    },
+
+    defaultClick: function (evt) {
+        if (!Event.isLeftClick(evt)) return;
+        var notAfterDrag = !this.performedDrag;
+        this.performedDrag = false;
+        return notAfterDrag;
+    },
+
+    /**
+    * @param {Event} evt
+    */
+    defaultDblClick: function (evt) {
+        var newCenter = this.map.getLonLatFromViewPortPx( evt.xy ); 
+        this.map.setCenter(newCenter, this.map.zoom + 1);
+    },
+
+    /**
+    * @param {Event} evt
+    */
+    defaultMouseDown: function (evt) {
+        if (!Event.isLeftClick(evt)) return;
+        this.mouseDragStart = evt.xy.copyOf();
+        this.performedDrag  = false;
+        if (evt.shiftKey) {
+            this.map.div.style.cursor = "crosshair";
+            this.zoomBox = OpenLayers.Util.createDiv('zoomBox',
+                                                     this.mouseDragStart,
+                                                     null,
+                                                     null,
+                                                     "absolute",
+                                                     "2px solid red");
+            this.zoomBox.style.backgroundColor = "white";
+            this.zoomBox.style.filter = "alpha(opacity=50)"; // IE
+            this.zoomBox.style.opacity = "0.50";
+            this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
+            this.map.viewPortDiv.appendChild(this.zoomBox);
+        }
+        document.onselectstart=function() { return false; }
+        Event.stop(evt);
+    },
+
+    /**
+    * @param {Event} evt
+    */
+    defaultMouseMove: function (evt) {
+        if (this.mouseDragStart != null) {
+            if (this.zoomBox) {
+                var deltaX = Math.abs(this.mouseDragStart.x - evt.xy.x);
+                var deltaY = Math.abs(this.mouseDragStart.y - evt.xy.y);
+                this.zoomBox.style.width = deltaX+"px";
+                this.zoomBox.style.height = deltaY+"px";
+                if (evt.xy.x < this.mouseDragStart.x) {
+                    this.zoomBox.style.left = evt.xy.x+"px";
+                }
+                if (evt.xy.y < this.mouseDragStart.y) {
+                    this.zoomBox.style.top = evt.xy.y+"px";
+                }
+            } else {
+                var deltaX = this.mouseDragStart.x - evt.xy.x;
+                var deltaY = this.mouseDragStart.y - evt.xy.y;
+                var size = this.map.getSize();
+                var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX,
+                                                 size.h / 2 + deltaY);
+                var newCenter = this.map.getLonLatFromViewPortPx( newXY ); 
+                this.map.setCenter(newCenter, null, true);
+                this.mouseDragStart = evt.xy.copyOf();
+                this.map.div.style.cursor = "move";
+            }
+            this.performedDrag = true;
+        }
+    },
+
+    /**
+    * @param {Event} evt
+    */
+    defaultMouseUp: function (evt) {
+        if (!Event.isLeftClick(evt)) return;
+        if (this.zoomBox) {
+            var start = this.map.getLonLatFromViewPortPx( this.mouseDragStart ); 
+            var end = this.map.getLonLatFromViewPortPx( evt.xy );
+            var top = Math.max(start.lat, end.lat);
+            var bottom = Math.min(start.lat, end.lat);
+            var left = Math.min(start.lon, end.lon);
+            var right = Math.max(start.lon, end.lon);
+            var bounds = new OpenLayers.Bounds(left, bottom, right, top);
+            var zoom = this.map.getZoomForExtent(bounds);
+            this.map.setCenter(new OpenLayers.LonLat(
+              (start.lon + end.lon) / 2,
+              (start.lat + end.lat) / 2
+             ), zoom);
+            this.map.viewPortDiv.removeChild(document.getElementById("zoomBox"));
+            this.zoomBox = null;
+        } else {
+            this.map.setCenter(this.map.center);
+        }
+        document.onselectstart=null;
+        this.mouseDragStart = null;
+        this.map.div.style.cursor = "default";
+    },
+
+    defaultMouseOut: function (evt) {
+        if (this.mouseDragStart != null
+            && OpenLayers.Util.mouseLeft(evt, this.map.div)) {
+                this.defaultMouseUp(evt);
+        }
+    }
+});
+

public/lib/OpenLayers/Control/MouseToolbar.js

@@ -0,0 +1,262 @@
+/* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the full
+ * text of the license. */
+// @require: OpenLayers/Control.js
+OpenLayers.Control.MouseToolbar = Class.create();
+OpenLayers.Control.MouseToolbar.X = 6;
+OpenLayers.Control.MouseToolbar.Y = 300;
+OpenLayers.Control.MouseToolbar.prototype = 
+  Object.extend( new OpenLayers.Control(), {
+    
+    mode: null,
+
+    buttons: null,
+
+    direction: "vertical",
+    
+    initialize: function(position, direction) {
+        OpenLayers.Control.prototype.initialize.apply(this, arguments);
+        this.position = new OpenLayers.Pixel(OpenLayers.Control.MouseToolbar.X,
+                                             OpenLayers.Control.MouseToolbar.Y);
+        if (position) {
+            this.position = position;
+        }
+        if (direction) {
+            this.direction = direction; 
+        }
+        this.measureDivs = [];
+    },
+    
+    draw: function() {
+        OpenLayers.Control.prototype.draw.apply(this, arguments);
+        this.buttons = new Object();
+        this.map.events.register( "dblclick", this, this.defaultDblClick );
+        this.map.events.register( "mousedown", this, this.defaultMouseDown );
+        this.map.events.register( "mouseup", this, this.defaultMouseUp );
+        this.map.events.register( "mousemove", this, this.defaultMouseMove );
+        this.map.events.register( "mouseout", this, this.defaultMouseOut );
+        var sz = new OpenLayers.Size(28,28);
+        var centered = this.position;
+        this._addButton("zoombox", "drag-rectangle-off.png", "drag-rectangle-on.png", centered, sz, "Shift->Drag to zoom to area");
+        centered = centered.add((this.direction == "vertical" ? 0 : sz.w), (this.direction == "vertical" ? sz.h : 0));
+        this._addButton("pan", "panning-hand-off.png", "panning-hand-on.png", centered, sz, "Drag the map to pan.");
+        centered = centered.add((this.direction == "vertical" ? 0 : sz.w), (this.direction == "vertical" ? sz.h : 0));
+        this._addButton("measure", "measuring-stick-off.png", "measuring-stick-on.png", centered, sz, "Hold alt when clicking to show distance between selected points");
+        this.switchModeTo("pan");
+        this.map.events.register("zoomend", this, function() { this.switchModeTo("pan"); });
+        return this.div;
+        
+    },
+    
+    _addButton:function(id, img, activeImg, xy, sz, title) {
+        var imgLocation = OpenLayers.Util.getImagesLocation() + img;
+        var activeImgLocation = OpenLayers.Util.getImagesLocation() + activeImg;
+        // var btn = new ol.AlphaImage("_"+id, imgLocation, xy, sz);
+        var btn = OpenLayers.Util.createAlphaImageDiv(
+                                    "OpenLayers_Control_MouseToolbar_" + id, 
+                                    xy, sz, imgLocation, "absolute");
+
+        //we want to add the outer div
+        this.div.appendChild(btn);
+        btn.imgLocation = imgLocation;
+        btn.activeImgLocation = activeImgLocation;
+        
+        btn.events = new OpenLayers.Events(this, btn);
+        btn.events.register("mousedown", this, this.buttonClick); 
+        btn.events.register("mouseup", this, Event.stop);
+        btn.action = id;
+        btn.title = title;
+        btn.alt = title;
+        btn.map = this.map;
+
+        //we want to remember/reference the outer div
+        this.buttons[id] = btn;
+        return btn;
+    },
+
+    buttonClick: function(evt) {
+        if (!Event.isLeftClick(evt)) return;
+        this.switchModeTo(evt.div.action);
+        Event.stop(evt);
+    },
+    
+    /**
+    * @param {Event} evt
+    */
+    defaultDblClick: function (evt) {
+        this.switchModeTo("pan");
+        var newCenter = this.map.getLonLatFromViewPortPx( evt.xy ); 
+        this.map.setCenter(newCenter, this.map.zoom + 2);
+    },
+
+    /**
+    * @param {Event} evt
+    */
+    defaultMouseDown: function (evt) {
+        if (!Event.isLeftClick(evt)) return;
+        this.mouseDragStart = evt.xy.copyOf();
+        if (evt.shiftKey && this.mode !="zoombox") {
+            this.switchModeTo("zoombox");
+        } else if (evt.altKey && this.mode !="measure") {
+            this.switchModeTo("measure");
+        } else if (!this.mode) {
+            this.switchModeTo("pan");
+        }
+        
+        switch (this.mode) {
+            case "zoombox":
+                this.map.div.style.cursor = "crosshair";
+                this.zoomBox = OpenLayers.Util.createDiv('zoomBox',
+                                                         this.mouseDragStart,
+                                                         null,
+                                                         null,
+                                                         "absolute",
+                                                         "2px solid red");
+                this.zoomBox.style.backgroundColor = "white";
+                this.zoomBox.style.filter = "alpha(opacity=50)"; // IE
+                this.zoomBox.style.opacity = "0.50";
+                this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
+                this.map.viewPortDiv.appendChild(this.zoomBox);
+                break;
+            case "measure":
+                var distance = "";
+                if (this.measureStart) {
+                    measureEnd = this.map.getLonLatFromViewPortPx(this.mouseDragStart);
+                    distance = OpenLayers.Util.distVincenty(this.measureStart, measureEnd);
+                    distance = Math.round(distance * 100) / 100;
+                    distance = distance + "km";
+                    this.measureStartBox = this.measureBox;
+                }    
+                this.measureStart = this.map.getLonLatFromViewPortPx(this.mouseDragStart);;
+                this.measureBox = OpenLayers.Util.createDiv(null,
+                                                         this.mouseDragStart.add(
+                                                           -2-parseInt(this.map.layerContainerDiv.style.left),
+                                                           -2-parseInt(this.map.layerContainerDiv.style.top)),
+                                                         null,
+                                                         null,
+                                                         "absolute");
+                this.measureBox.style.width="4px";
+                this.measureBox.style.height="4px";
+                this.measureBox.style.backgroundColor="red";
+                this.measureBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
+                this.map.layerContainerDiv.appendChild(this.measureBox);
+                if (distance) {
+                    this.measureBoxDistance = OpenLayers.Util.createDiv(null,
+                                                         this.mouseDragStart.add(
+                                                           -2-parseInt(this.map.layerContainerDiv.style.left),
+                                                           2-parseInt(this.map.layerContainerDiv.style.top)),
+                                                         null,
+                                                         null,
+                                                         "absolute");
+                    
+                    this.measureBoxDistance.innerHTML = distance;
+                    this.measureBoxDistance.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
+                    this.map.layerContainerDiv.appendChild(this.measureBoxDistance);
+                    this.measureDivs.append(this.measureBoxDistance);
+                }
+                this.measureBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
+                this.map.layerContainerDiv.appendChild(this.measureBox);
+                this.measureDivs.append(this.measureBox);
+                break;
+            default:
+                this.map.div.style.cursor = "move";
+                break;
+        }
+        document.onselectstart = function() { return false; } 
+        Event.stop(evt);
+    },
+
+    switchModeTo: function(mode) {
+        if (mode != this.mode) {
+            if (this.mode) {
+                OpenLayers.Util.modifyAlphaImageDiv(this.buttons[this.mode], null, null, null, this.buttons[this.mode].imgLocation);
+            }
+            if (this.mode == "measure" && mode != "measure") {
+                for(var i = 0; i < this.measureDivs.length; i++) {
+                    if (this.measureDivs[i]) { 
+                        this.map.layerContainerDiv.removeChild(this.measureDivs[i]);
+                    }
+                }
+                this.measureDivs = [];
+                this.measureStart = null;
+            }
+            this.mode = mode;
+            OpenLayers.Util.modifyAlphaImageDiv(this.buttons[mode], null, null, null, this.buttons[mode].activeImgLocation);
+        } 
+    }, 
+
+    leaveMode: function() {
+        this.switchModeTo("pan");
+    },
+    
+    /**
+    * @param {Event} evt
+    */
+    defaultMouseMove: function (evt) {
+        if (this.mouseDragStart != null) {
+            switch (this.mode) {
+                case "zoombox": 
+                    var deltaX = Math.abs(this.mouseDragStart.x - evt.xy.x);
+                    var deltaY = Math.abs(this.mouseDragStart.y - evt.xy.y);
+                    this.zoomBox.style.width = deltaX+"px";
+                    this.zoomBox.style.height = deltaY+"px";
+                    if (evt.xy.x < this.mouseDragStart.x) {
+                        this.zoomBox.style.left = evt.xy.x+"px";
+                    }
+                    if (evt.xy.y < this.mouseDragStart.y) {
+                        this.zoomBox.style.top = evt.xy.y+"px";
+                    }
+                    break;
+                default:
+                    var deltaX = this.mouseDragStart.x - evt.xy.x;
+                    var deltaY = this.mouseDragStart.y - evt.xy.y;
+                    var size = this.map.getSize();
+                    var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX,
+                                                     size.h / 2 + deltaY);
+                    var newCenter = this.map.getLonLatFromViewPortPx( newXY ); 
+                    this.map.setCenter(newCenter, null, true);
+                    this.mouseDragStart = evt.xy.copyOf();
+            }
+        }
+    },
+
+    /**
+    * @param {Event} evt
+    */
+    defaultMouseUp: function (evt) {
+        if (!Event.isLeftClick(evt)) return;
+        switch (this.mode) {
+            case "zoombox":
+                var start = this.map.getLonLatFromViewPortPx( this.mouseDragStart ); 
+                var end = this.map.getLonLatFromViewPortPx( evt.xy );
+                var top = Math.max(start.lat, end.lat);
+                var bottom = Math.min(start.lat, end.lat);
+                var left = Math.min(start.lon, end.lon);
+                var right = Math.max(start.lon, end.lon);
+                var bounds = new OpenLayers.Bounds(left, bottom, right, top);
+                var zoom = this.map.getZoomForExtent(bounds);
+                this.map.setCenter(new OpenLayers.LonLat(
+                  (start.lon + end.lon) / 2,
+                  (start.lat + end.lat) / 2
+                 ), zoom);
+                this.map.viewPortDiv.removeChild(document.getElementById("zoomBox"));
+                this.zoomBox = null;
+                this.leaveMode();
+                break;
+            case "pan":
+                this.map.setCenter(this.map.center);
+            
+        }
+        document.onselectstart = null;
+        this.mouseDragStart = null;
+        this.map.div.style.cursor = "default";
+    },
+
+    defaultMouseOut: function (evt) {
+        if (this.mouseDragStart != null
+            && OpenLayers.Util.mouseLeft(evt, this.map.div)) {
+                this.defaultMouseUp(evt);
+        }
+    }
+});
+

public/lib/OpenLayers/Control/PanZoom.js

@@ -0,0 +1,164 @@
+/* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the full
+ * text of the license. */
+// @require: OpenLayers/Control.js
+
+/**
+ * @class
+ * 
+ * default zoom/pan controls
+ */
+OpenLayers.Control.PanZoom = Class.create();
+OpenLayers.Control.PanZoom.X = 4;
+OpenLayers.Control.PanZoom.Y = 4;
+OpenLayers.Control.PanZoom.prototype = 
+  Object.extend( new OpenLayers.Control(), {
+
+    /** @type int */
+    slideFactor: 50,
+
+    /** @type Array of Button Divs */
+    buttons: null,
+
+    /** @type OpenLayers.Pixel */
+    position: null,
+
+    /**
+     * @constructor
+     */
+    initialize: function() {
+        OpenLayers.Control.prototype.initialize.apply(this, arguments);
+        this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoom.X,
+                                             OpenLayers.Control.PanZoom.Y);
+    },
+
+    /**
+    * @param {OpenLayers.Pixel} px
+    * 
+    * @returns A reference to the container div for the PanZoom control
+    * @type DOMElement
+    */
+    draw: function(px) {
+        // initialize our internal div
+        OpenLayers.Control.prototype.draw.apply(this, arguments);
+        px = this.position;
+
+        // place the controls
+        this.buttons = new Array();
+
+        var sz = new OpenLayers.Size(18,18);
+        var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
+
+        this._addButton("panup", "north-mini.png", centered, sz);
+        px.y = centered.y+sz.h;
+        this._addButton("panleft", "west-mini.png", px, sz);
+        this._addButton("panright", "east-mini.png", px.add(sz.w, 0), sz);
+        this._addButton("pandown", "south-mini.png", 
+                        centered.add(0, sz.h*2), sz);
+        this._addButton("zoomin", "zoom-plus-mini.png", 
+                        centered.add(0, sz.h*3+5), sz);
+        this._addButton("zoomworld", "zoom-world-mini.png", 
+                        centered.add(0, sz.h*4+5), sz);
+        this._addButton("zoomout", "zoom-minus-mini.png", 
+                        centered.add(0, sz.h*5+5), sz);
+        return this.div;
+    },
+    
+    /**
+     * @param {String} id
+     * @param {String} img
+     * @param {OpenLayers.Pixel} xy
+     * @param {OpenLayers.Size} sz
+     * 
+     * @returns A Div (an alphaImageDiv, to be precise) that contains the 
+     *          image of the button, and has all the proper event handlers
+     *          set.
+     * @type DOMElement
+     */
+    _addButton:function(id, img, xy, sz) {
+        var imgLocation = OpenLayers.Util.getImagesLocation() + img;
+        // var btn = new ol.AlphaImage("_"+id, imgLocation, xy, sz);
+        var btn = OpenLayers.Util.createAlphaImageDiv(
+                                    "OpenLayers_Control_PanZoom_" + id, 
+                                    xy, sz, imgLocation, "absolute");
+
+        //we want to add the outer div
+        this.div.appendChild(btn);
+
+        btn.onmousedown = this.buttonDown.bindAsEventListener(btn);
+        btn.ondblclick  = this.doubleClick.bindAsEventListener(btn);
+        btn.onclick  = this.doubleClick.bindAsEventListener(btn);
+        btn.action = id;
+        btn.map = this.map;
+        btn.slideFactor = this.slideFactor;
+
+        //we want to remember/reference the outer div
+        this.buttons.push(btn);
+        return btn;
+    },
+    
+    /**
+     * @param {event} evt
+     * 
+     * @type Boolean
+     */
+    doubleClick: function (evt) {
+        Event.stop(evt);
+        return false;
+    },
+    
+    /**
+     * @param {event} evt
+     */
+    buttonDown: function (evt) {
+        if (!Event.isLeftClick(evt)) return;
+
+        var slide = this.map.getResolution() * this.slideFactor;
+        var center = this.map.getCenter();
+
+        var newCenter = center.copyOf();
+
+        switch (this.action) {
+            case "panup": 
+                newCenter = newCenter.add( 0, slide);
+                break;
+            case "pandown": 
+                newCenter = newCenter.add( 0, -slide);
+                break;
+            case "panleft": 
+                newCenter = newCenter.add( -slide, 0);
+                break;
+            case "panright": 
+                newCenter = newCenter.add( slide, 0);
+                break;
+            case "zoomin": 
+                this.map.zoomIn(); 
+                break;
+            case "zoomout": 
+                this.map.zoomOut(); 
+                break;
+            case "zoomworld": 
+                this.map.zoomToFullExtent(); 
+                break;
+        }
+        
+        if (!newCenter.equals(center)) {
+            this.map.setCenter(newCenter);
+        }
+        
+        Event.stop(evt);
+    },
+
+    /**
+     * 
+     */
+    destroy: function() {
+        OpenLayers.Control.prototype.destroy.apply(this, arguments);
+        for(i=0; i<this.buttons.length; i++) {
+            this.buttons[i].map = null;
+        }
+    },
+    
+    /** @final @type String */
+    CLASS_NAME: "OpenLayers.Control.PanZoom"
+});

public/lib/OpenLayers/Control/PanZoomBar.js

@@ -0,0 +1,202 @@
+/* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the full
+ * text of the license. */
+// @require: OpenLayers/Control/PanZoom.js
+
+//
+// default zoom/pan controls
+//
+OpenLayers.Control.PanZoomBar = Class.create();
+OpenLayers.Control.PanZoomBar.X = 4;
+OpenLayers.Control.PanZoomBar.Y = 4;
+OpenLayers.Control.PanZoomBar.prototype = 
+  Object.extend( new OpenLayers.Control.PanZoom(), {
+    /** @type Array(...) */
+    buttons: null,
+
+    /** @type int */
+    zoomStopWidth: 18,
+
+    /** @type int */
+    zoomStopHeight: 11,
+
+    initialize: function() {
+        OpenLayers.Control.PanZoom.prototype.initialize.apply(this, arguments);
+        this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoomBar.X,
+                                             OpenLayers.Control.PanZoomBar.Y);
+    },
+
+    /**
+    * @param {OpenLayers.Pixel} px
+    */
+    draw: function(px) {
+        // initialize our internal div
+        OpenLayers.Control.prototype.draw.apply(this, arguments);
+        px = this.position;
+
+        // place the controls
+        this.buttons = new Array();
+
+        var sz = new OpenLayers.Size(18,18);
+        var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
+
+        this._addButton("panup", "north-mini.png", centered, sz);
+        px.y = centered.y+sz.h;
+        this._addButton("panleft", "west-mini.png", px, sz);
+        this._addButton("panright", "east-mini.png", px.add(sz.w, 0), sz);
+        this._addButton("pandown", "south-mini.png", centered.add(0, sz.h*2), sz);
+        this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, sz.h*3+5), sz);
+        centered = this._addZoomBar(centered.add(0, sz.h*4 + 5));
+        this._addButton("zoomout", "zoom-minus-mini.png", centered, sz);
+        return this.div;
+    },
+
+    /** 
+    * @param {OpenLayers.Pixel} location where zoombar drawing is to start.
+    */
+    _addZoomBar:function(centered) {
+        var imgLocation = OpenLayers.Util.getImagesLocation();
+        
+        var id = "OpenLayers_Control_PanZoomBar_Slider" + this.map.id;
+        var slider = OpenLayers.Util.createAlphaImageDiv(id,
+                       centered.add(-1, 
+                         (this.map.getZoomLevels())*this.zoomStopHeight), 
+                       new OpenLayers.Size(20,9), 
+                       imgLocation+"slider.png",
+                       "absolute");
+        this.slider = slider;
+        
+        this.sliderEvents = new OpenLayers.Events(this, slider);
+        this.sliderEvents.register("mousedown", this, this.zoomBarDown);
+        this.sliderEvents.register("mousemove", this, this.zoomBarDrag);
+        this.sliderEvents.register("mouseup", this, this.zoomBarUp);
+        this.sliderEvents.register("dblclick", this, this.doubleClick);
+        this.sliderEvents.register("click", this, this.doubleClick);
+        
+        sz = new OpenLayers.Size();
+        sz.h = this.zoomStopHeight*(this.map.getZoomLevels()+1);
+        sz.w = this.zoomStopWidth;
+        var div = null
+        
+        if (OpenLayers.Util.alphaHack()) {
+            var id = "OpenLayers_Control_PanZoomBar" + this.map.id;
+            div = OpenLayers.Util.createAlphaImageDiv(id, centered,
+                                      new OpenLayers.Size(sz.w, 
+                                              this.zoomStopHeight),
+                                      imgLocation + "zoombar.png", 
+                                      "absolute", null, "crop");
+            div.style.height = sz.h;
+        } else {
+            div = OpenLayers.Util.createDiv(
+                        'OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id,
+                        centered,
+                        sz,
+                        imgLocation+"zoombar.png");
+        }
+        
+        this.zoombarDiv = div;
+        
+        this.divEvents = new OpenLayers.Events(this, div);
+        this.divEvents.register("mousedown", this, this.divClick);
+        this.divEvents.register("mousemove", this, this.passEventToSlider);
+        this.divEvents.register("dblclick", this, this.doubleClick);
+        this.divEvents.register("click", this, this.doubleClick);
+        
+        this.div.appendChild(div);
+
+        this.startTop = parseInt(div.style.top);
+        this.div.appendChild(slider);
+
+        this.map.events.register("zoomend", this, this.moveZoomBar);
+
+        centered = centered.add(0, 
+            this.zoomStopHeight*(this.map.getZoomLevels()+1));
+        return centered; 
+    },
+    /* 
+     * @param evt
+     * This function is used to pass events that happen on the div, or the map,
+     * through to the slider, which then does its moving thing.
+     */
+    passEventToSlider:function(evt) {
+        this.sliderEvents.handleBrowserEvent(evt);
+    },
+    
+    /*
+     * divClick: Picks up on clicks directly on the zoombar div
+     *           and sets the zoom level appropriately.
+     */
+    divClick: function (evt) {
+        if (!Event.isLeftClick(evt)) return;
+        var y = evt.xy.y;
+        var top = Position.page(evt.object)[1];
+        var levels = Math.floor((y - top)/this.zoomStopHeight);
+        this.map.zoomTo(this.map.getZoomLevels() - levels);
+        Event.stop(evt);
+    },
+    
+    /* 
+     * @param evt
+     * event listener for clicks on the slider
+     */
+    zoomBarDown:function(evt) {
+        if (!Event.isLeftClick(evt)) return;
+        this.map.events.register("mousemove", this, this.passEventToSlider);
+        this.map.events.register("mouseup", this, this.passEventToSlider);
+        this.mouseDragStart = evt.xy.copyOf();
+        this.zoomStart = evt.xy.copyOf();
+        this.div.style.cursor = "move";
+        Event.stop(evt);
+    },
+    
+    /*
+     * @param evt
+     * This is what happens when a click has occurred, and the client is dragging.
+     * Here we must ensure that the slider doesn't go beyond the bottom/top of the 
+     * zoombar div, as well as moving the slider to its new visual location
+     */
+    zoomBarDrag:function(evt) {
+        if (this.mouseDragStart != null) {
+            var deltaY = this.mouseDragStart.y - evt.xy.y
+            var offsets = Position.page(this.zoombarDiv);
+            if ((evt.clientY - offsets[1]) > 0 && 
+                (evt.clientY - offsets[1]) < parseInt(this.zoombarDiv.style.height) - 2) {
+                var newTop = parseInt(this.slider.style.top) - deltaY;
+                this.slider.style.top = newTop+"px";
+            }
+            this.mouseDragStart = evt.xy.copyOf();
+        }
+        Event.stop(evt);
+    },
+    
+    /* 
+     * @param evt
+     * Perform cleanup when a mouseup event is received -- discover new zoom level
+     * and switch to it.
+     */
+    zoomBarUp:function(evt) {
+        if (!Event.isLeftClick(evt)) return;
+        if (this.zoomStart) {
+            this.div.style.cursor="default";
+            this.map.events.remove("mousemove");
+            this.map.events.remove("mouseup");
+            var deltaY = this.zoomStart.y - evt.xy.y
+            this.map.zoomTo(this.map.zoom + Math.round(deltaY/this.zoomStopHeight));
+            this.moveZoomBar();
+            this.mouseDragStart = null;
+            Event.stop(evt);
+        }
+    },
+    
+    /* 
+    * Change the location of the slider to match the current zoom level.
+    */
+    moveZoomBar:function() {
+        var newTop = 
+            (this.map.getZoomLevels() - this.map.getZoom()) * this.zoomStopHeight
+            + this.startTop + 1;
+        this.slider.style.top = newTop + "px";
+    },    
+    
+    CLASS_NAME: "OpenLayers.Control.PanZoomBar"
+});