diff --git a/examples/mouse-position.html b/examples/mouse-position.html index 620b8e5544..6424cac8ca 100644 --- a/examples/mouse-position.html +++ b/examples/mouse-position.html @@ -30,11 +30,6 @@
- -
@@ -48,7 +43,23 @@
mouse-position, openstreetmap
+
+
 
+
+ +
+
+
+ + + + +
+
diff --git a/examples/mouse-position.js b/examples/mouse-position.js index 848b002d4b..9e4fed51ef 100644 --- a/examples/mouse-position.js +++ b/examples/mouse-position.js @@ -4,7 +4,9 @@ goog.require('ol.View2D'); goog.require('ol.control.MousePosition'); goog.require('ol.control.defaults'); goog.require('ol.coordinate'); +goog.require('ol.dom.Input'); goog.require('ol.layer.TileLayer'); +goog.require('ol.proj'); goog.require('ol.source.OSM'); var control = new ol.control.MousePosition({ @@ -32,6 +34,13 @@ var map = new ol.Map({ }) }); -document.getElementById('projection').addEventListener('change', function() { - control.setProjection(this.value); -}, false); +var projection = new ol.dom.Input(document.getElementById('projection')); +projection.on('change:value', function() { + control.setProjection(ol.proj.get(projection.getValue())); +}); + +var precision = new ol.dom.Input(document.getElementById('precision')); +precision.on('change:value', function() { + var format = ol.coordinate.createStringXY(precision.getValue()); + control.setCoordinateFormat(format); +}); diff --git a/src/ol/control/mousepositioncontrol.exports b/src/ol/control/mousepositioncontrol.exports index 602113910e..925d6c0720 100644 --- a/src/ol/control/mousepositioncontrol.exports +++ b/src/ol/control/mousepositioncontrol.exports @@ -1,4 +1,2 @@ @exportClass ol.control.MousePosition ol.control.MousePositionOptions @exportProperty ol.control.MousePosition.prototype.setMap -@exportProperty ol.control.MousePosition.prototype.getProjection -@exportProperty ol.control.MousePosition.prototype.setProjection diff --git a/src/ol/control/mousepositioncontrol.js b/src/ol/control/mousepositioncontrol.js index 2be4b2d3dd..b4b62d3c07 100644 --- a/src/ol/control/mousepositioncontrol.js +++ b/src/ol/control/mousepositioncontrol.js @@ -10,6 +10,7 @@ goog.require('goog.events'); goog.require('goog.events.EventType'); goog.require('goog.style'); goog.require('ol.CoordinateFormatType'); +goog.require('ol.Object'); goog.require('ol.Pixel'); goog.require('ol.Projection'); goog.require('ol.TransformFunction'); @@ -17,6 +18,15 @@ goog.require('ol.control.Control'); goog.require('ol.proj'); +/** + * @enum {string} + */ +ol.control.MousePositionProperty = { + PROJECTION: 'projection', + COORDINATE_FORMAT: 'coordinateFormat' +}; + + /** * Create a new control to show the position of the mouse in the map's @@ -53,17 +63,16 @@ ol.control.MousePosition = function(opt_options) { target: options.target }); - /** - * @private - * @type {ol.Projection} - */ - this.projection_ = ol.proj.get(options.projection); + goog.events.listen(this, + ol.Object.getChangeEventType(ol.control.MousePositionProperty.PROJECTION), + this.handleProjectionChanged_, false, this); - /** - * @private - * @type {ol.CoordinateFormatType|undefined} - */ - this.coordinateFormat_ = options.coordinateFormat; + if (goog.isDef(options.coordinateFormat)) { + this.setCoordinateFormat(options.coordinateFormat); + } + if (goog.isDef(options.projection)) { + this.setProjection(ol.proj.get(options.projection)); + } /** * @private @@ -118,11 +127,37 @@ ol.control.MousePosition.prototype.handleMapPostrender = function(mapEvent) { /** - * @return {ol.Projection} projection. + * @private + */ +ol.control.MousePosition.prototype.handleProjectionChanged_ = function() { + this.transform_ = null; +}; + + +/** + * @return {ol.CoordinateFormatType|undefined} projection. + */ +ol.control.MousePosition.prototype.getCoordinateFormat = function() { + return /** @type {ol.CoordinateFormatType|undefined} */ ( + this.get(ol.control.MousePositionProperty.COORDINATE_FORMAT)); +}; +goog.exportProperty( + ol.control.MousePosition.prototype, + 'getCoordinateFormat', + ol.control.MousePosition.prototype.getCoordinateFormat); + + +/** + * @return {ol.Projection|undefined} projection. */ ol.control.MousePosition.prototype.getProjection = function() { - return this.projection_; + return /** @type {ol.Projection|undefined} */ ( + this.get(ol.control.MousePositionProperty.PROJECTION)); }; +goog.exportProperty( + ol.control.MousePosition.prototype, + 'getProjection', + ol.control.MousePosition.prototype.getProjection); /** @@ -166,12 +201,27 @@ ol.control.MousePosition.prototype.setMap = function(map) { /** - * @param {ol.ProjectionLike} projection Projection. + * @param {ol.CoordinateFormatType} format Coordinate format. + */ +ol.control.MousePosition.prototype.setCoordinateFormat = function(format) { + this.set(ol.control.MousePositionProperty.COORDINATE_FORMAT, format); +}; +goog.exportProperty( + ol.control.MousePosition.prototype, + 'setCoordinateFormat', + ol.control.MousePosition.prototype.setCoordinateFormat); + + +/** + * @param {ol.Projection} projection Projection. */ ol.control.MousePosition.prototype.setProjection = function(projection) { - this.projection_ = ol.proj.get(projection); - this.transform_ = null; + this.set(ol.control.MousePositionProperty.PROJECTION, projection); }; +goog.exportProperty( + ol.control.MousePosition.prototype, + 'setProjection', + ol.control.MousePosition.prototype.setProjection); /** @@ -182,9 +232,10 @@ ol.control.MousePosition.prototype.updateHTML_ = function(pixel) { var html = this.undefinedHTML_; if (!goog.isNull(pixel)) { if (goog.isNull(this.transform_)) { - if (!goog.isNull(this.projection_)) { + var projection = this.getProjection(); + if (goog.isDef(projection)) { this.transform_ = ol.proj.getTransformFromProjections( - this.mapProjection_, this.projection_); + this.mapProjection_, projection); } else { this.transform_ = ol.proj.identityTransform; } @@ -193,8 +244,9 @@ ol.control.MousePosition.prototype.updateHTML_ = function(pixel) { var coordinate = map.getCoordinateFromPixel(pixel); if (!goog.isNull(coordinate)) { this.transform_(coordinate, coordinate); - if (goog.isDef(this.coordinateFormat_)) { - html = this.coordinateFormat_(coordinate); + var coordinateFormat = this.getCoordinateFormat(); + if (goog.isDef(coordinateFormat)) { + html = coordinateFormat(coordinate); } else { html = coordinate.toString(); }