diff --git a/examples/device-orientation.js b/examples/device-orientation.js index b464d2e958..e70f419630 100644 --- a/examples/device-orientation.js +++ b/examples/device-orientation.js @@ -25,11 +25,13 @@ var deviceOrientation = new ol.DeviceOrientation(); var track = new ol.dom.Input(document.getElementById('track')); track.bindTo('checked', deviceOrientation, 'tracking'); -deviceOrientation.on('change', function(event) { - document.getElementById('alpha').innerHTML = event.target.getAlpha(); - document.getElementById('beta').innerHTML = event.target.getBeta(); - document.getElementById('gamma').innerHTML = event.target.getGamma(); - document.getElementById('heading').innerHTML = event.target.getHeading(); +deviceOrientation.on('propertychange', function(event) { + // event.key is the changed property name + var key = event.key; + var element = document.getElementById(key); + if (element) { + element.innerHTML = deviceOrientation.get(key); + } }); // tilt the map diff --git a/examples/geolocation.js b/examples/geolocation.js index 7fb3fe83f2..fc0d2ac62e 100644 --- a/examples/geolocation.js +++ b/examples/geolocation.js @@ -29,7 +29,7 @@ geolocation.bindTo('projection', map.getView()); var track = new ol.dom.Input(document.getElementById('track')); track.bindTo('checked', geolocation, 'tracking'); -geolocation.on('change', function() { +geolocation.on('propertychange', function() { $('#accuracy').text(geolocation.getAccuracy() + ' [m]'); $('#altitude').text(geolocation.getAltitude() + ' [m]'); $('#altitudeAccuracy').text(geolocation.getAltitudeAccuracy() + ' [m]'); diff --git a/src/ol/layer/layergroup.js b/src/ol/layer/layergroup.js index c2c0940786..2afe59ca8e 100644 --- a/src/ol/layer/layergroup.js +++ b/src/ol/layer/layergroup.js @@ -3,6 +3,7 @@ goog.provide('ol.layer.Group'); goog.require('goog.array'); goog.require('goog.asserts'); goog.require('goog.events'); +goog.require('goog.events.EventType'); goog.require('goog.math'); goog.require('goog.object'); goog.require('ol.Collection'); @@ -104,7 +105,8 @@ ol.layer.Group.prototype.handleLayersChanged_ = function(event) { for (i = 0, ii = layersArray.length; i < ii; i++) { layer = layersArray[i]; this.listenerKeys_[goog.getUid(layer).toString()] = - goog.events.listen(layer, ol.ObjectEventType.CHANGE, + goog.events.listen(layer, + [ol.ObjectEventType.CHANGE, goog.events.EventType.CHANGE], this.handleLayerChange_, false, this); } } @@ -120,8 +122,8 @@ ol.layer.Group.prototype.handleLayersChanged_ = function(event) { ol.layer.Group.prototype.handleLayersAdd_ = function(collectionEvent) { var layer = /** @type {ol.layer.Base} */ (collectionEvent.getElement()); this.listenerKeys_[goog.getUid(layer).toString()] = goog.events.listen( - layer, ol.ObjectEventType.CHANGE, this.handleLayerChange_, false, - this); + layer, [ol.ObjectEventType.CHANGE, goog.events.EventType.CHANGE], + this.handleLayerChange_, false, this); this.dispatchChangeEvent(); }; diff --git a/src/ol/map.js b/src/ol/map.js index c6d2f2fcf8..d8ced68de7 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -39,6 +39,7 @@ goog.require('ol.MapBrowserEventHandler'); goog.require('ol.MapEvent'); goog.require('ol.MapEventType'); goog.require('ol.Object'); +goog.require('ol.ObjectEvent'); goog.require('ol.ObjectEventType'); goog.require('ol.Pixel'); goog.require('ol.PostRenderFunction'); @@ -208,9 +209,9 @@ ol.Map = function(options) { /** * @private - * @type {goog.events.Key} + * @type {Array.} */ - this.layerGroupPropertyListenerKey_ = null; + this.layerGroupPropertyListenerKeys_ = null; /** * @private @@ -899,7 +900,18 @@ ol.Map.prototype.handleViewChanged_ = function() { * @param {goog.events.Event} event Event. * @private */ +ol.Map.prototype.handleLayerGroupMemberChanged_ = function(event) { + goog.asserts.assertInstanceof(event, goog.events.Event); + this.render(); +}; + + +/** + * @param {ol.ObjectEvent} event Event. + * @private + */ ol.Map.prototype.handleLayerGroupPropertyChanged_ = function(event) { + goog.asserts.assertInstanceof(event, ol.ObjectEvent); this.render(); }; @@ -908,15 +920,23 @@ ol.Map.prototype.handleLayerGroupPropertyChanged_ = function(event) { * @private */ ol.Map.prototype.handleLayerGroupChanged_ = function() { - if (!goog.isNull(this.layerGroupPropertyListenerKey_)) { - goog.events.unlistenByKey(this.layerGroupPropertyListenerKey_); - this.layerGroupPropertyListenerKey_ = null; + if (!goog.isNull(this.layerGroupPropertyListenerKeys_)) { + var length = this.layerGroupPropertyListenerKeys_.length; + for (var i = 0; i < length; ++i) { + goog.events.unlistenByKey(this.layerGroupPropertyListenerKeys_[i]); + } + this.layerGroupPropertyListenerKeys_ = null; } var layerGroup = this.getLayerGroup(); if (goog.isDefAndNotNull(layerGroup)) { - this.layerGroupPropertyListenerKey_ = goog.events.listen( - layerGroup, ol.ObjectEventType.CHANGE, - this.handleLayerGroupPropertyChanged_, false, this); + this.layerGroupPropertyListenerKeys_ = [ + goog.events.listen( + layerGroup, ol.ObjectEventType.CHANGE, + this.handleLayerGroupPropertyChanged_, false, this), + goog.events.listen( + layerGroup, goog.events.EventType.CHANGE, + this.handleLayerGroupMemberChanged_, false, this) + ]; } this.render(); }; diff --git a/src/ol/object.js b/src/ol/object.js index c8dc0febdf..40e1fd65b3 100644 --- a/src/ol/object.js +++ b/src/ol/object.js @@ -6,6 +6,7 @@ */ goog.provide('ol.Object'); +goog.provide('ol.ObjectEvent'); goog.provide('ol.ObjectEventType'); goog.require('goog.array'); @@ -21,7 +22,7 @@ goog.require('ol.Observable'); */ ol.ObjectEventType = { BEFORECHANGE: 'beforechange', - CHANGE: 'change' + CHANGE: 'propertychange' };