diff --git a/examples/full-screen.html b/examples/full-screen.html index 53db08f8af..11a3d5d560 100644 --- a/examples/full-screen.html +++ b/examples/full-screen.html @@ -21,6 +21,12 @@ padding: 0 0.5em 0.5em 0.5em; border-radius: 4px; } + #geolocation { + background-color: white; + border: 1px solid #222; + border-radius: 10px 10px 10px 0; + padding: 3px; + } @media only screen and (max-width: 600px) { #text { display: none; @@ -31,6 +37,7 @@
+

Full-screen example

Example of a full-screen map.
diff --git a/examples/full-screen.js b/examples/full-screen.js index 3e9cce6f89..eb13bda2f2 100644 --- a/examples/full-screen.js +++ b/examples/full-screen.js @@ -1,8 +1,11 @@ goog.require('goog.debug.Console'); goog.require('goog.debug.Logger'); goog.require('goog.debug.Logger.Level'); +goog.require('goog.style'); +goog.require('ol.AnchoredElement'); goog.require('ol.Collection'); goog.require('ol.Coordinate'); +goog.require('ol.Geolocation'); goog.require('ol.Map'); goog.require('ol.RendererHints'); goog.require('ol.View2D'); @@ -28,3 +31,14 @@ var map = new ol.Map({ zoom: 0 }) }); + +var geolocation = new ol.Geolocation(); +geolocation.bindTo('projection', map.getView()); + +var element = document.getElementById('geolocation'); +var marker = new ol.AnchoredElement({ + map: map, + element: element +}); +marker.bindTo('position', geolocation); +goog.style.showElement(element, true); diff --git a/src/ol/geolocation.exports b/src/ol/geolocation.exports new file mode 100644 index 0000000000..adc26edc01 --- /dev/null +++ b/src/ol/geolocation.exports @@ -0,0 +1 @@ +@exportSymbol ol.Geolocation diff --git a/src/ol/geolocation.js b/src/ol/geolocation.js new file mode 100644 index 0000000000..b75aaaf38c --- /dev/null +++ b/src/ol/geolocation.js @@ -0,0 +1,168 @@ +// FIXME handle geolocation not supported +// FIXME handle geolocation errors + +goog.provide('ol.Geolocation'); +goog.provide('ol.GeolocationProperty'); + +goog.require('goog.functions'); +goog.require('ol.Coordinate'); +goog.require('ol.Object'); +goog.require('ol.Projection'); + + +/** + * @enum {string} + */ +ol.GeolocationProperty = { + ACCURACY: 'accuracy', + POSITION: 'position', + PROJECTION: 'projection' +}; + + + +/** + * @constructor + * @extends {ol.Object} + * @param {GeolocationPositionOptions=} opt_positionOptions PositionOptions. + */ +ol.Geolocation = function(opt_positionOptions) { + + goog.base(this); + + /** + * The unprojected (EPSG:4326) device position. + * @private + * @type {ol.Coordinate} + */ + this.position_ = null; + + if (ol.Geolocation.isSupported) { + goog.events.listen( + this, ol.Object.getChangedEventType(ol.GeolocationProperty.PROJECTION), + this.handleProjectionChanged_, false, this); + + /** + * @private + * @type {number} + */ + this.watchId_ = navigator.geolocation.watchPosition( + goog.bind(this.positionChange_, this), + goog.bind(this.positionError_, this), + opt_positionOptions); + } +}; +goog.inherits(ol.Geolocation, ol.Object); + + +/** + * @inheritDoc + */ +ol.Geolocation.prototype.disposeInternal = function() { + navigator.geolocation.clearWatch(this.watchId_); + goog.base(this, 'disposeInternal'); +}; + + +/** + * @private + */ +ol.Geolocation.prototype.handleProjectionChanged_ = function() { + var projection = this.getProjection(); + if (goog.isDefAndNotNull(projection)) { + this.transformCoords_ = ol.Projection.getTransform( + ol.Projection.getFromCode('EPSG:4326'), projection); + if (!goog.isNull(this.position_)) { + this.set(ol.GeolocationProperty.POSITION, + this.transformCoords_(this.position_)); + } + } +}; + + +/** + * @type {boolean} Is supported. + */ +ol.Geolocation.isSupported = 'geolocation' in navigator; + + +/** + * @private + * @param {GeolocationPosition} position position event. + */ +ol.Geolocation.prototype.positionChange_ = function(position) { + var coords = position.coords; + this.position_ = new ol.Coordinate(coords.longitude, coords.latitude); + this.set(ol.GeolocationProperty.POSITION, + this.transformCoords_(this.position_)); + this.set(ol.GeolocationProperty.ACCURACY, coords.accuracy); +}; + + +/** + * @private + * @param {GeolocationPositionError} error error object. + */ +ol.Geolocation.prototype.positionError_ = function(error) { +}; + + +/** + * The position of the device. + * @return {ol.Coordinate|undefined} position. + */ +ol.Geolocation.prototype.getPosition = function() { + return /** @type {ol.Coordinate} */ ( + this.get(ol.GeolocationProperty.POSITION)); +}; +goog.exportProperty( + ol.Geolocation.prototype, + 'getPosition', + ol.Geolocation.prototype.getPosition); + + +/** + * The accuracy of the position in meters. + * @return {number|undefined} accuracy. + */ +ol.Geolocation.prototype.getAccuracy = function() { + return /** @type {number} */ ( + this.get(ol.GeolocationProperty.ACCURACY)); +}; +goog.exportProperty( + ol.Geolocation.prototype, + 'getAccuracy', + ol.Geolocation.prototype.getAccuracy); + + +/** + * @return {ol.Projection|undefined} projection. + */ +ol.Geolocation.prototype.getProjection = function() { + return /** @type {ol.Projection} */ ( + this.get(ol.GeolocationProperty.PROJECTION)); +}; +goog.exportProperty( + ol.Geolocation.prototype, + 'getProjection', + ol.Geolocation.prototype.getProjection); + + +/** + * @param {ol.Projection} projection Projection. + */ +ol.Geolocation.prototype.setProjection = function(projection) { + this.set(ol.GeolocationProperty.PROJECTION, projection); +}; +goog.exportProperty( + ol.Geolocation.prototype, + 'setProjection', + ol.Geolocation.prototype.setProjection); + + +/** + * @private + * @param {ol.Coordinate} coordinate Coordinate. + * @return {ol.Coordinate} Coordinate. + */ +ol.Geolocation.prototype.transformCoords_ = goog.functions.identity;