PanZoom.js 6.9 KB

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