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();
}