TouchNavigation.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  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/DragPan.js
  7. * @requires OpenLayers/Control/PinchZoom.js
  8. * @requires OpenLayers/Handler/Click.js
  9. */
  10. /**
  11. * Class: OpenLayers.Control.TouchNavigation
  12. * The navigation control handles map browsing with touch events (dragging,
  13. * double-tapping, tap with two fingers, and pinch zoom). Create a new
  14. * control with the <OpenLayers.Control.TouchNavigation> constructor.
  15. *
  16. * If you’re only targeting touch enabled devices with your mapping application,
  17. * you can create a map with only a TouchNavigation control. The
  18. * <OpenLayers.Control.Navigation> control is mobile ready by default, but
  19. * you can generate a smaller build of the library by only including this
  20. * touch navigation control if you aren't concerned about mouse interaction.
  21. *
  22. * Inherits:
  23. * - <OpenLayers.Control>
  24. */
  25. OpenLayers.Control.TouchNavigation = OpenLayers.Class(OpenLayers.Control, {
  26. /**
  27. * Property: dragPan
  28. * {<OpenLayers.Control.DragPan>}
  29. */
  30. dragPan: null,
  31. /**
  32. * APIProperty: dragPanOptions
  33. * {Object} Options passed to the DragPan control.
  34. */
  35. dragPanOptions: null,
  36. /**
  37. * Property: pinchZoom
  38. * {<OpenLayers.Control.PinchZoom>}
  39. */
  40. pinchZoom: null,
  41. /**
  42. * APIProperty: pinchZoomOptions
  43. * {Object} Options passed to the PinchZoom control.
  44. */
  45. pinchZoomOptions: null,
  46. /**
  47. * APIProperty: clickHandlerOptions
  48. * {Object} Options passed to the Click handler.
  49. */
  50. clickHandlerOptions: null,
  51. /**
  52. * APIProperty: documentDrag
  53. * {Boolean} Allow panning of the map by dragging outside map viewport.
  54. * Default is false.
  55. */
  56. documentDrag: false,
  57. /**
  58. * APIProperty: autoActivate
  59. * {Boolean} Activate the control when it is added to a map. Default is
  60. * true.
  61. */
  62. autoActivate: true,
  63. /**
  64. * Constructor: OpenLayers.Control.TouchNavigation
  65. * Create a new navigation control
  66. *
  67. * Parameters:
  68. * options - {Object} An optional object whose properties will be set on
  69. * the control
  70. */
  71. initialize: function(options) {
  72. this.handlers = {};
  73. OpenLayers.Control.prototype.initialize.apply(this, arguments);
  74. },
  75. /**
  76. * Method: destroy
  77. * The destroy method is used to perform any clean up before the control
  78. * is dereferenced. Typically this is where event listeners are removed
  79. * to prevent memory leaks.
  80. */
  81. destroy: function() {
  82. this.deactivate();
  83. if(this.dragPan) {
  84. this.dragPan.destroy();
  85. }
  86. this.dragPan = null;
  87. if (this.pinchZoom) {
  88. this.pinchZoom.destroy();
  89. delete this.pinchZoom;
  90. }
  91. OpenLayers.Control.prototype.destroy.apply(this,arguments);
  92. },
  93. /**
  94. * Method: activate
  95. */
  96. activate: function() {
  97. if(OpenLayers.Control.prototype.activate.apply(this,arguments)) {
  98. this.dragPan.activate();
  99. this.handlers.click.activate();
  100. this.pinchZoom.activate();
  101. return true;
  102. }
  103. return false;
  104. },
  105. /**
  106. * Method: deactivate
  107. */
  108. deactivate: function() {
  109. if(OpenLayers.Control.prototype.deactivate.apply(this,arguments)) {
  110. this.dragPan.deactivate();
  111. this.handlers.click.deactivate();
  112. this.pinchZoom.deactivate();
  113. return true;
  114. }
  115. return false;
  116. },
  117. /**
  118. * Method: draw
  119. */
  120. draw: function() {
  121. var clickCallbacks = {
  122. click: this.defaultClick,
  123. dblclick: this.defaultDblClick
  124. };
  125. var clickOptions = OpenLayers.Util.extend({
  126. "double": true,
  127. stopDouble: true,
  128. pixelTolerance: 2
  129. }, this.clickHandlerOptions);
  130. this.handlers.click = new OpenLayers.Handler.Click(
  131. this, clickCallbacks, clickOptions
  132. );
  133. this.dragPan = new OpenLayers.Control.DragPan(
  134. OpenLayers.Util.extend({
  135. map: this.map,
  136. documentDrag: this.documentDrag
  137. }, this.dragPanOptions)
  138. );
  139. this.dragPan.draw();
  140. this.pinchZoom = new OpenLayers.Control.PinchZoom(
  141. OpenLayers.Util.extend({map: this.map}, this.pinchZoomOptions)
  142. );
  143. },
  144. /**
  145. * Method: defaultClick
  146. *
  147. * Parameters:
  148. * evt - {Event}
  149. */
  150. defaultClick: function (evt) {
  151. if(evt.lastTouches && evt.lastTouches.length == 2) {
  152. this.map.zoomOut();
  153. }
  154. },
  155. /**
  156. * Method: defaultDblClick
  157. *
  158. * Parameters:
  159. * evt - {Event}
  160. */
  161. defaultDblClick: function (evt) {
  162. var newCenter = this.map.getLonLatFromViewPortPx(evt.xy);
  163. this.map.setCenter(newCenter, this.map.zoom + 1);
  164. },
  165. CLASS_NAME: "OpenLayers.Control.TouchNavigation"
  166. });