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. */
7 * @requires OpenLayers/Control.js
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.
17 * - <OpenLayers.Control>
19 OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
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.
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.
40 * {Array(DOMElement)} Array of Button Divs
46 * {<OpenLayers.Pixel>}
51 * Constructor: OpenLayers.Control.PanZoom
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);
66 OpenLayers.Control.prototype.destroy.apply(this, arguments);
76 * px - {<OpenLayers.Pixel>}
79 * {DOMElement} A reference to the container div for the PanZoom control.
82 // initialize our internal div
83 OpenLayers.Control.prototype.draw.apply(this, arguments);
89 var sz = new OpenLayers.Size(18,18);
90 var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
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);
113 * xy - {<OpenLayers.Pixel>}
114 * sz - {<OpenLayers.Size>}
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.
120 _addButton:function(id, img, xy, sz) {
121 var imgLocation = OpenLayers.Util.getImagesLocation() + img;
122 var btn = OpenLayers.Util.createAlphaImageDiv(
124 xy, sz, imgLocation, "absolute");
126 //we want to add the outer div
127 this.div.appendChild(btn);
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));
138 if(!this.slideRatio){
139 var slideFactorPixels = this.slideFactor;
140 var getSlideFactor = function() {
141 return slideFactorPixels;
144 var slideRatio = this.slideRatio;
145 var getSlideFactor = function(dim) {
146 return this.map.getSize()[dim] * slideRatio;
150 btn.getSlideFactor = getSlideFactor;
152 //we want to remember/reference the outer div
153 this.buttons.push(btn);
158 * Method: _removeButton
163 _removeButton: function(btn) {
164 OpenLayers.Event.stopObservingElement(btn);
166 this.div.removeChild(btn);
167 OpenLayers.Util.removeItem(this.buttons, btn);
171 * Method: removeButtons
173 removeButtons: function() {
174 for(var i=this.buttons.length-1; i>=0; --i) {
175 this._removeButton(this.buttons[i]);
180 * Method: doubleClick
188 doubleClick: function (evt) {
189 OpenLayers.Event.stop(evt);
199 buttonDown: function (evt) {
200 if (!OpenLayers.Event.isLeftClick(evt)) {
204 switch (this.action) {
206 this.map.pan(0, -this.getSlideFactor("h"));
209 this.map.pan(0, this.getSlideFactor("h"));
212 this.map.pan(-this.getSlideFactor("w"), 0);
215 this.map.pan(this.getSlideFactor("w"), 0);
224 this.map.zoomToMaxExtent();
228 OpenLayers.Event.stop(evt);
231 CLASS_NAME: "OpenLayers.Control.PanZoom"
238 OpenLayers.Control.PanZoom.X = 4;
244 OpenLayers.Control.PanZoom.Y = 4;