openlayers/lib/OpenLayers/Control/PanZoom.js

   1 /* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
   2  * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the
   3  * full text of the license. */
   4
   5
   6 /**
   7  * @requires OpenLayers/Control.js
   8  */
   9
  10 /**
  11  * Class: OpenLayers.Control.PanZoom
  12  * The PanZoom is a visible control, composed of a
  13  * <OpenLayers.Control.PanPanel> and a <OpenLayers.Control.ZoomPanel>. By
  14  * default it is drawn in the upper left corner of the map.
  15  *
  16  * Inherits from:
  17  *  - <OpenLayers.Control>
  18  */
  19 OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
  20
  21     /**
  22      * APIProperty: slideFactor
  23      * {Integer} Number of pixels by which we'll pan the map in any direction
  24      *     on clicking the arrow buttons.  If you want to pan by some ratio
  25      *     of the map dimensions, use <slideRatio> instead.
  26      */
  27     slideFactor: 50,
  28
  29     /**
  30      * APIProperty: slideRatio
  31      * {Number} The fraction of map width/height by which we'll pan the map
  32      *     on clicking the arrow buttons.  Default is null.  If set, will
  33      *     override <slideFactor>. E.g. if slideRatio is .5, then the Pan Up
  34      *     button will pan up half the map height.
  35      */
  36     slideRatio: null,
  37
  38     /**
  39      * Property: buttons
  40      * {Array(DOMElement)} Array of Button Divs
  41      */
  42     buttons: null,
  43
  44     /**
  45      * Property: position
  46      * {<OpenLayers.Pixel>}
  47      */
  48     position: null,
  49
  50     /**
  51      * Constructor: OpenLayers.Control.PanZoom
  52      *
  53      * Parameters:
  54      * options - {Object}
  55      */
  56     initialize: function(options) {
  57         this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoom.X,
  58                                              OpenLayers.Control.PanZoom.Y);
  59         OpenLayers.Control.prototype.initialize.apply(this, arguments);
  60     },
  61
  62     /**
  63      * APIMethod: destroy
  64      */
  65     destroy: function() {
  66         OpenLayers.Control.prototype.destroy.apply(this, arguments);
  67         this.removeButtons();
  68         this.buttons = null;
  69         this.position = null;
  70     },
  71
  72     /**
  73      * Method: draw
  74      *
  75      * Parameters:
  76      * px - {<OpenLayers.Pixel>}
  77      *
  78      * Returns:
  79      * {DOMElement} A reference to the container div for the PanZoom control.
  80      */
  81     draw: function(px) {
  82         // initialize our internal div
  83         OpenLayers.Control.prototype.draw.apply(this, arguments);
  84         px = this.position;
  85
  86         // place the controls
  87         this.buttons = [];
  88
  89         var sz = new OpenLayers.Size(18,18);
  90         var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
  91
  92         this._addButton("panup", "north-mini.png", centered, sz);
  93         px.y = centered.y+sz.h;
  94         this._addButton("panleft", "west-mini.png", px, sz);
  95         this._addButton("panright", "east-mini.png", px.add(sz.w, 0), sz);
  96         this._addButton("pandown", "south-mini.png",
  97                         centered.add(0, sz.h*2), sz);
  98         this._addButton("zoomin", "zoom-plus-mini.png",
  99                         centered.add(0, sz.h*3+5), sz);
 100         this._addButton("zoomworld", "zoom-world-mini.png",
 101                         centered.add(0, sz.h*4+5), sz);
 102         this._addButton("zoomout", "zoom-minus-mini.png",
 103                         centered.add(0, sz.h*5+5), sz);
 104         return this.div;
 105     },
 106
 107     /**
 108      * Method: _addButton
 109      *
 110      * Parameters:
 111      * id - {String}
 112      * img - {String}
 113      * xy - {<OpenLayers.Pixel>}
 114      * sz - {<OpenLayers.Size>}
 115      *
 116      * Returns:
 117      * {DOMElement} A Div (an alphaImageDiv, to be precise) that contains the
 118      *     image of the button, and has all the proper event handlers set.
 119      */
 120     _addButton:function(id, img, xy, sz) {
 121         var imgLocation = OpenLayers.Util.getImagesLocation() + img;
 122         var btn = OpenLayers.Util.createAlphaImageDiv(
 123                                     this.id + "_" + id,
 124                                     xy, sz, imgLocation, "absolute");
 125
 126         //we want to add the outer div
 127         this.div.appendChild(btn);
 128
 129         OpenLayers.Event.observe(btn, "mousedown",
 130             OpenLayers.Function.bindAsEventListener(this.buttonDown, btn));
 131         OpenLayers.Event.observe(btn, "dblclick",
 132             OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
 133         OpenLayers.Event.observe(btn, "click",
 134             OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
 135         btn.action = id;
 136         btn.map = this.map;
 137
 138         if(!this.slideRatio){
 139             var slideFactorPixels = this.slideFactor;
 140             var getSlideFactor = function() {
 141                 return slideFactorPixels;
 142             };
 143         } else {
 144             var slideRatio = this.slideRatio;
 145             var getSlideFactor = function(dim) {
 146                 return this.map.getSize()[dim] * slideRatio;
 147             };
 148         }
 149
 150         btn.getSlideFactor = getSlideFactor;
 151
 152         //we want to remember/reference the outer div
 153         this.buttons.push(btn);
 154         return btn;
 155     },
 156
 157     /**
 158      * Method: _removeButton
 159      *
 160      * Parameters:
 161      * btn - {Object}
 162      */
 163     _removeButton: function(btn) {
 164         OpenLayers.Event.stopObservingElement(btn);
 165         btn.map = null;
 166         this.div.removeChild(btn);
 167         OpenLayers.Util.removeItem(this.buttons, btn);
 168     },
 169
 170     /**
 171      * Method: removeButtons
 172      */
 173     removeButtons: function() {
 174         for(var i=this.buttons.length-1; i>=0; --i) {
 175             this._removeButton(this.buttons[i]);
 176         }
 177     },
 178
 179     /**
 180      * Method: doubleClick
 181      *
 182      * Parameters:
 183      * evt - {Event}
 184      *
 185      * Returns:
 186      * {Boolean}
 187      */
 188     doubleClick: function (evt) {
 189         OpenLayers.Event.stop(evt);
 190         return false;
 191     },
 192
 193     /**
 194      * Method: buttonDown
 195      *
 196      * Parameters:
 197      * evt - {Event}
 198      */
 199     buttonDown: function (evt) {
 200         if (!OpenLayers.Event.isLeftClick(evt)) {
 201             return;
 202         }
 203
 204         switch (this.action) {
 205             case "panup":
 206                 this.map.pan(0, -this.getSlideFactor("h"));
 207                 break;
 208             case "pandown":
 209                 this.map.pan(0, this.getSlideFactor("h"));
 210                 break;
 211             case "panleft":
 212                 this.map.pan(-this.getSlideFactor("w"), 0);
 213                 break;
 214             case "panright":
 215                 this.map.pan(this.getSlideFactor("w"), 0);
 216                 break;
 217             case "zoomin":
 218                 this.map.zoomIn();
 219                 break;
 220             case "zoomout":
 221                 this.map.zoomOut();
 222                 break;
 223             case "zoomworld":
 224                 this.map.zoomToMaxExtent();
 225                 break;
 226         }
 227
 228         OpenLayers.Event.stop(evt);
 229     },
 230
 231     CLASS_NAME: "OpenLayers.Control.PanZoom"
 232 });
 233
 234 /**
 235  * Constant: X
 236  * {Integer}
 237  */
 238 OpenLayers.Control.PanZoom.X = 4;
 239
 240 /**
 241  * Constant: Y
 242  * {Integer}
 243  */
 244 OpenLayers.Control.PanZoom.Y = 4;