diff --git a/src/ol/map.js b/src/ol/map.js index ec33dcf61f..5339638402 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -97,6 +97,12 @@ ol.Map = function( */ this.logger = goog.debug.Logger.getLogger('ol.map.' + goog.getUid(this)); } + + /** + * @type {boolean} Are we a touch device? + * @private + */ + this.isTouch_ = false; /** * @type {ol.TransformFunction} @@ -176,6 +182,8 @@ ol.Map = function( goog.fx.Dragger.EventType.DRAG, goog.fx.Dragger.EventType.END ], this.handleDraggerEvent, false, this); + goog.events.listen(this.viewport_, goog.events.EventType.TOUCHSTART, + this.handleTouchstart, false, this); this.registerDisposable(dragger); /** @@ -503,12 +511,25 @@ ol.Map.prototype.handleBrowserEvent = function(browserEvent, opt_type) { }; +ol.Map.prototype.handleTouchstart = function(browserEvent) { + this.isTouch_ = true; + // now we know that we are a touch device + goog.events.unlisten(this.viewport_, goog.events.EventType.TOUCHSTART, + this.handleTouchstart, false, this); +}; + + /** * @param {goog.fx.DragEvent} dragEvent Drag event. */ ol.Map.prototype.handleDraggerEvent = function(dragEvent) { var browserEvent = dragEvent.browserEvent; - this.handleBrowserEvent(browserEvent, dragEvent.type); + // workaround for goog.fx.Dragger issue that causes both mousemove and + // touchmove to trigger a drag event on touch devices + if ((this.isTouch_ && browserEvent.type != goog.events.EventType.MOUSEMOVE) || + !this.isTouch_) { + this.handleBrowserEvent(browserEvent, dragEvent.type); + } }; diff --git a/src/ol/renderer/dom/map.js b/src/ol/renderer/dom/map.js index 4e2360abff..98fc6e636e 100644 --- a/src/ol/renderer/dom/map.js +++ b/src/ol/renderer/dom/map.js @@ -3,6 +3,8 @@ goog.provide('ol.renderer.dom.Map'); goog.require('goog.asserts'); goog.require('goog.dom'); goog.require('goog.dom.TagName'); +goog.require('goog.events'); +goog.require('goog.events.Event'); goog.require('goog.style'); goog.require('ol.Coordinate'); goog.require('ol.Map'); @@ -29,6 +31,10 @@ ol.renderer.dom.Map = function(container, map) { this.layersPane_ = goog.dom.createElement(goog.dom.TagName.DIV); this.layersPane_.className = 'ol-layers-pane'; this.layersPane_.style.position = 'absolute'; + goog.events.listen(this.layersPane_, 'mousedown', + goog.events.Event.preventDefault); + goog.events.listen(this.layersPane_, 'touchstart', + goog.events.Event.preventDefault); goog.dom.appendChild(container, this.layersPane_); /**