/* 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" });