app/assets/openlayers/SimplePanZoom.js

   1 /* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for
   2  * full list of contributors). Published under the 2-clause BSD license.
   3  * See license.txt in the OpenLayers distribution or repository for the
   4  * full text of the license. */
   5
   6
   7 /**
   8  * @requires OpenLayers/Control/PanZoom.js
   9  */
  10
  11 /**
  12  * Class: OpenLayers.Control.PanZoomBar
  13  * The PanZoomBar is a visible control composed of a
  14  * <OpenLayers.Control.PanPanel> and a <OpenLayers.Control.ZoomBar>.
  15  * By default it is displayed in the upper left corner of the map as 4
  16  * directional arrows above a vertical slider.
  17  *
  18  * Inherits from:
  19  *  - <OpenLayers.Control.PanZoom>
  20  */
  21 OpenLayers.Control.SimplePanZoom = OpenLayers.Class(OpenLayers.Control.PanZoom, {
  22
  23     /**
  24      * APIProperty: zoomStopWidth
  25      */
  26     zoomStopWidth: 18,
  27
  28     /**
  29      * APIProperty: zoomStopHeight
  30      */
  31     zoomStopHeight: 7,
  32
  33     /**
  34      * Property: slider
  35      */
  36     slider: null,
  37
  38     /**
  39      * Property: sliderEvents
  40      * {<OpenLayers.Events>}
  41      */
  42     sliderEvents: null,
  43
  44     /**
  45      * Property: zoombarDiv
  46      * {DOMElement}
  47      */
  48     zoombarDiv: null,
  49
  50     /**
  51      * APIProperty: zoomWorldIcon
  52      * {Boolean}
  53      */
  54     zoomWorldIcon: false,
  55
  56     /**
  57      * APIProperty: panIcons
  58      * {Boolean} Set this property to false not to display the pan icons. If
  59      * false the zoom world icon is placed under the zoom bar. Defaults to
  60      * true.
  61      */
  62     panIcons: true,
  63
  64     /**
  65      * APIProperty: forceFixedZoomLevel
  66      * {Boolean} Force a fixed zoom level even though the map has
  67      *     fractionalZoom
  68      */
  69     forceFixedZoomLevel: false,
  70
  71     /**
  72      * Property: mouseDragStart
  73      * {<OpenLayers.Pixel>}
  74      */
  75     mouseDragStart: null,
  76
  77     /**
  78      * Property: deltaY
  79      * {Number} The cumulative vertical pixel offset during a zoom bar drag.
  80      */
  81     deltaY: null,
  82
  83     /**
  84      * Property: zoomStart
  85      * {<OpenLayers.Pixel>}
  86      */
  87     zoomStart: null,
  88
  89     /**
  90      * Constructor: OpenLayers.Control.PanZoomBar
  91      */
  92     buttons: null,
  93
  94     /**
  95      * APIMethod: destroy
  96      */
  97     destroy: function() {
  98
  99         this._removeZoomBar();
 100
 101         this.map.events.un({
 102             "changebaselayer": this.redraw,
 103             "updatesize": this.redraw,
 104             scope: this
 105         });
 106
 107         OpenLayers.Control.PanZoom.prototype.destroy.apply(this, arguments);
 108
 109         delete this.mouseDragStart;
 110         delete this.zoomStart;
 111     },
 112
 113     /**
 114      * Method: setMap
 115      *
 116      * Parameters:
 117      * map - {<OpenLayers.Map>}
 118      */
 119     setMap: function(map) {
 120         OpenLayers.Control.PanZoom.prototype.setMap.apply(this, arguments);
 121         this.map.events.on({
 122             "changebaselayer": this.redraw,
 123             "updatesize": this.redraw,
 124             scope: this
 125         });
 126     },
 127
 128     /**
 129      * Method: redraw
 130      * clear the div and start over.
 131      */
 132     redraw: function() {
 133         if (this.div !== null) {
 134             this.removeButtons();
 135             this._removeZoomBar();
 136         }
 137         this.draw();
 138         this.moveZoomBar();
 139     },
 140
 141     /**
 142     * Method: draw
 143     *
 144     * Parameters:
 145     * px - {<OpenLayers.Pixel>}
 146     */
 147     draw: function(px) {
 148         // initialize our internal div
 149         OpenLayers.Control.prototype.draw.apply(this, arguments);
 150         px = this.position.clone();
 151
 152         // place the controls
 153         this.buttons = [];
 154         var ids = ['panup', 'panleft', 'panright', 'pandown', 'zoomout', 'zoomin'];
 155
 156         for (var i = 0; i < ids.length; i++) {
 157             var b = document.createElement('div');
 158             b.id = ids[i];
 159             b.action = ids[i];
 160             b.className = 'button olButton';
 161             this.div.appendChild(b);
 162             this.buttons.push(b);
 163         }
 164
 165         this._addZoomBar();
 166         return this.div;
 167     },
 168
 169     /**
 170     * Method: _addZoomBar
 171     *
 172     * Parameters:
 173     * centered - {<OpenLayers.Pixel>} where zoombar drawing is to start.
 174     */
 175     _addZoomBar:function() {
 176         var id = this.id + "_" + this.map.id;
 177         var zoomsToEnd = this.map.getNumZoomLevels() - 1 - this.map.getZoom();
 178         var slider = document.createElement('div');
 179         slider.id = 'slider';
 180         slider.className = 'button';
 181         slider.style.cursor = 'move';
 182         this.slider = slider;
 183
 184         this.sliderEvents = new OpenLayers.Events(this, slider, null, true,
 185             { includeXY: true });
 186         this.sliderEvents.on({
 187             "touchstart": this.zoomBarDown,
 188             "touchmove": this.zoomBarDrag,
 189             "touchend": this.zoomBarUp,
 190             "mousedown": this.zoomBarDown,
 191             "mousemove": this.zoomBarDrag,
 192             "mouseup": this.zoomBarUp
 193         });
 194
 195         var height = this.zoomStopHeight * (this.map.getNumZoomLevels());
 196
 197         // this is the background image
 198         var div = document.createElement('div');
 199         div.className = 'button olButton';
 200         div.id = 'zoombar';
 201         this.zoombarDiv = div;
 202
 203         this.div.appendChild(div);
 204         this.startTop = 75;
 205         this.div.appendChild(slider);
 206
 207         this.map.events.register("zoomend", this, this.moveZoomBar);
 208     },
 209
 210     /**
 211      * Method: _removeZoomBar
 212      */
 213     _removeZoomBar: function() {
 214         this.sliderEvents.un({
 215             "touchstart": this.zoomBarDown,
 216             "touchmove": this.zoomBarDrag,
 217             "touchend": this.zoomBarUp,
 218             "mousedown": this.zoomBarDown,
 219             "mousemove": this.zoomBarDrag,
 220             "mouseup": this.zoomBarUp
 221         });
 222         this.sliderEvents.destroy();
 223
 224         this.div.removeChild(this.zoombarDiv);
 225         this.zoombarDiv = null;
 226         this.div.removeChild(this.slider);
 227         this.slider = null;
 228
 229         this.map.events.unregister("zoomend", this, this.moveZoomBar);
 230     },
 231
 232     /**
 233      * Method: onButtonClick
 234      *
 235      * Parameters:
 236      * evt - {Event}
 237      */
 238     onButtonClick: function(evt) {
 239         OpenLayers.Control.PanZoom.prototype.onButtonClick.apply(this, arguments);
 240         if (evt.buttonElement === this.zoombarDiv) {
 241             var levels = evt.buttonXY.y / this.zoomStopHeight;
 242             if (this.forceFixedZoomLevel || !this.map.fractionalZoom) {
 243                 levels = Math.floor(levels);
 244             }
 245             var zoom = (this.map.getNumZoomLevels() - 1) - levels;
 246             zoom = Math.min(Math.max(zoom, 0), this.map.getNumZoomLevels() - 1);
 247             this.map.zoomTo(zoom);
 248         }
 249     },
 250
 251     /**
 252      * Method: passEventToSlider
 253      * This function is used to pass events that happen on the div, or the map,
 254      * through to the slider, which then does its moving thing.
 255      *
 256      * Parameters:
 257      * evt - {<OpenLayers.Event>}
 258      */
 259     passEventToSlider:function(evt) {
 260         this.sliderEvents.handleBrowserEvent(evt);
 261     },
 262
 263     /*
 264      * Method: zoomBarDown
 265      * event listener for clicks on the slider
 266      *
 267      * Parameters:
 268      * evt - {<OpenLayers.Event>}
 269      */
 270     zoomBarDown:function(evt) {
 271         if (!OpenLayers.Event.isLeftClick(evt) && !OpenLayers.Event.isSingleTouch(evt)) {
 272             return;
 273         }
 274         this.map.events.on({
 275             "touchmove": this.passEventToSlider,
 276             "mousemove": this.passEventToSlider,
 277             "mouseup": this.passEventToSlider,
 278             scope: this
 279         });
 280         this.mouseDragStart = evt.xy.clone();
 281         this.zoomStart = evt.xy.clone();
 282         this.div.style.cursor = "move";
 283         // reset the div offsets just in case the div moved
 284         this.zoombarDiv.offsets = null;
 285         OpenLayers.Event.stop(evt);
 286     },
 287
 288     /*
 289      * Method: zoomBarDrag
 290      * This is what happens when a click has occurred, and the client is
 291      * dragging.  Here we must ensure that the slider doesn't go beyond the
 292      * bottom/top of the zoombar div, as well as moving the slider to its new
 293      * visual location
 294      *
 295      * Parameters:
 296      * evt - {<OpenLayers.Event>}
 297      */
 298     zoomBarDrag: function(evt) {
 299         if (this.mouseDragStart !== null) {
 300             var deltaY = this.mouseDragStart.y - evt.xy.y;
 301             var offsets = OpenLayers.Util.pagePosition(this.zoombarDiv);
 302             if ((evt.clientY - offsets[1]) > 0 &&
 303                 (evt.clientY - offsets[1]) < 140) {
 304                 var newTop = parseInt(this.slider.style.top, 10) - deltaY;
 305                 this.slider.style.top = newTop + "px";
 306                 this.mouseDragStart = evt.xy.clone();
 307             }
 308             // set cumulative displacement
 309             this.deltaY = this.zoomStart.y - evt.xy.y;
 310             OpenLayers.Event.stop(evt);
 311         }
 312     },
 313
 314     /*
 315      * Method: zoomBarUp
 316      * Perform cleanup when a mouseup event is received -- discover new zoom
 317      * level and switch to it.
 318      *
 319      * Parameters:
 320      * evt - {<OpenLayers.Event>}
 321      */
 322     zoomBarUp: function(evt) {
 323         if (!OpenLayers.Event.isLeftClick(evt) && evt.type !== "touchend") {
 324             return;
 325         }
 326         if (this.mouseDragStart) {
 327             this.div.style.cursor = "";
 328             this.map.events.un({
 329                 "touchmove": this.passEventToSlider,
 330                 "mouseup": this.passEventToSlider,
 331                 "mousemove": this.passEventToSlider,
 332                 scope: this
 333             });
 334             var zoomLevel = this.map.zoom;
 335             zoomLevel += this.deltaY/this.zoomStopHeight;
 336             zoomLevel = Math.max(Math.round(zoomLevel), 0);
 337             this.map.zoomTo(zoomLevel);
 338             this.mouseDragStart = null;
 339             this.zoomStart = null;
 340             this.deltaY = 0;
 341             OpenLayers.Event.stop(evt);
 342         }
 343     },
 344
 345     /*
 346     * Method: moveZoomBar
 347     * Change the location of the slider to match the current zoom level.
 348     */
 349     moveZoomBar:function() {
 350         var newTop =
 351             ((this.map.getNumZoomLevels()-1) - this.map.getZoom()) *
 352             this.zoomStopHeight + this.startTop;
 353         this.slider.style.top = newTop + "px";
 354     },
 355     CLASS_NAME: "OpenLayers.Control.SimplePanZoom"
 356 });