diff options
Diffstat (limited to 'misc/openlayers/lib/OpenLayers/Control/PanZoom.js')
| -rw-r--r-- | misc/openlayers/lib/OpenLayers/Control/PanZoom.js | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/misc/openlayers/lib/OpenLayers/Control/PanZoom.js b/misc/openlayers/lib/OpenLayers/Control/PanZoom.js new file mode 100644 index 0000000..dd007cf --- /dev/null +++ b/misc/openlayers/lib/OpenLayers/Control/PanZoom.js @@ -0,0 +1,233 @@ +/* Copyright (c) 2006-2013 by OpenLayers Contributors (see authors.txt for + * full list of contributors). Published under the 2-clause BSD license. + * See license.txt in the OpenLayers distribution or repository for the + * full text of the license. */ + + +/** + * @requires OpenLayers/Control.js + * @requires OpenLayers/Events/buttonclick.js + */ + +/** + * Class: OpenLayers.Control.PanZoom + * The PanZoom is a visible control, composed of a + * <OpenLayers.Control.PanPanel> and a <OpenLayers.Control.ZoomPanel>. By + * default it is drawn in the upper left corner of the map. + * + * Inherits from: + * - <OpenLayers.Control> + */ +OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, { + + /** + * APIProperty: slideFactor + * {Integer} Number of pixels by which we'll pan the map in any direction + * on clicking the arrow buttons. If you want to pan by some ratio + * of the map dimensions, use <slideRatio> instead. + */ + slideFactor: 50, + + /** + * APIProperty: slideRatio + * {Number} The fraction of map width/height by which we'll pan the map + * on clicking the arrow buttons. Default is null. If set, will + * override <slideFactor>. E.g. if slideRatio is .5, then the Pan Up + * button will pan up half the map height. + */ + slideRatio: null, + + /** + * Property: buttons + * {Array(DOMElement)} Array of Button Divs + */ + buttons: null, + + /** + * Property: position + * {<OpenLayers.Pixel>} + */ + position: null, + + /** + * Constructor: OpenLayers.Control.PanZoom + * + * Parameters: + * options - {Object} + */ + initialize: function(options) { + this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoom.X, + OpenLayers.Control.PanZoom.Y); + OpenLayers.Control.prototype.initialize.apply(this, arguments); + }, + + /** + * APIMethod: destroy + */ + destroy: function() { + if (this.map) { + this.map.events.unregister("buttonclick", this, this.onButtonClick); + } + this.removeButtons(); + this.buttons = null; + this.position = null; + OpenLayers.Control.prototype.destroy.apply(this, arguments); + }, + + /** + * Method: setMap + * + * Properties: + * map - {<OpenLayers.Map>} + */ + setMap: function(map) { + OpenLayers.Control.prototype.setMap.apply(this, arguments); + this.map.events.register("buttonclick", this, this.onButtonClick); + }, + + /** + * Method: draw + * + * Parameters: + * px - {<OpenLayers.Pixel>} + * + * Returns: + * {DOMElement} A reference to the container div for the PanZoom control. + */ + draw: function(px) { + // initialize our internal div + OpenLayers.Control.prototype.draw.apply(this, arguments); + px = this.position; + + // place the controls + this.buttons = []; + + var sz = {w: 18, h: 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; + }, + + /** + * Method: _addButton + * + * Parameters: + * id - {String} + * img - {String} + * xy - {<OpenLayers.Pixel>} + * sz - {<OpenLayers.Size>} + * + * Returns: + * {DOMElement} A Div (an alphaImageDiv, to be precise) that contains the + * image of the button, and has all the proper event handlers set. + */ + _addButton:function(id, img, xy, sz) { + var imgLocation = OpenLayers.Util.getImageLocation(img); + var btn = OpenLayers.Util.createAlphaImageDiv( + this.id + "_" + id, + xy, sz, imgLocation, "absolute"); + btn.style.cursor = "pointer"; + //we want to add the outer div + this.div.appendChild(btn); + btn.action = id; + btn.className = "olButton"; + + //we want to remember/reference the outer div + this.buttons.push(btn); + return btn; + }, + + /** + * Method: _removeButton + * + * Parameters: + * btn - {Object} + */ + _removeButton: function(btn) { + this.div.removeChild(btn); + OpenLayers.Util.removeItem(this.buttons, btn); + }, + + /** + * Method: removeButtons + */ + removeButtons: function() { + for(var i=this.buttons.length-1; i>=0; --i) { + this._removeButton(this.buttons[i]); + } + }, + + /** + * Method: onButtonClick + * + * Parameters: + * evt - {Event} + */ + onButtonClick: function(evt) { + var btn = evt.buttonElement; + switch (btn.action) { + case "panup": + this.map.pan(0, -this.getSlideFactor("h")); + break; + case "pandown": + this.map.pan(0, this.getSlideFactor("h")); + break; + case "panleft": + this.map.pan(-this.getSlideFactor("w"), 0); + break; + case "panright": + this.map.pan(this.getSlideFactor("w"), 0); + break; + case "zoomin": + this.map.zoomIn(); + break; + case "zoomout": + this.map.zoomOut(); + break; + case "zoomworld": + this.map.zoomToMaxExtent(); + break; + } + }, + + /** + * Method: getSlideFactor + * + * Parameters: + * dim - {String} "w" or "h" (for width or height). + * + * Returns: + * {Number} The slide factor for panning in the requested direction. + */ + getSlideFactor: function(dim) { + return this.slideRatio ? + this.map.getSize()[dim] * this.slideRatio : + this.slideFactor; + }, + + CLASS_NAME: "OpenLayers.Control.PanZoom" +}); + +/** + * Constant: X + * {Integer} + */ +OpenLayers.Control.PanZoom.X = 4; + +/** + * Constant: Y + * {Integer} + */ +OpenLayers.Control.PanZoom.Y = 4; |