Add ol.control.MousePosition.setProjection

examples/mouse-position.html

@@ -30,7 +30,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
-          <small id="mouse-position"></small>
+          <select id="projection">
+            <option value="EPSG:4326">EPSG:4326</option>
+            <option value="EPSG:3857">EPSG:3857</option>
+          </select>
+          <div style="display: inline-block;" id="mouse-position"></div>
         </div>
       </div>
 

examples/mouse-position.js

@@ -7,19 +7,18 @@ goog.require('ol.coordinate');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.OSM');
 
+var control = new ol.control.MousePosition({
+  coordinateFormat: ol.coordinate.createStringXY(4),
+  projection: 'EPSG:4326',
+  // comment the following two lines to have the mouse position
+  // be placed within the map.
+  className: 'custom-mouse-position',
+  target: document.getElementById('mouse-position'),
+  undefinedHTML: ' '
+});
 
 var map = new ol.Map({
-  controls: ol.control.defaults({}, [
+  controls: ol.control.defaults({}, [control]),
-    new ol.control.MousePosition({
-      coordinateFormat: ol.coordinate.toStringHDMS,
-      projection: 'EPSG:4326',
-      // comment the following two lines to have the mouse position
-      // be placed within the map.
-      className: 'custom-mouse-position',
-      target: document.getElementById('mouse-position'),
-      undefinedHTML: ' '
-    })
-  ]),
   layers: [
     new ol.layer.TileLayer({
       source: new ol.source.OSM()
@@ -32,3 +31,7 @@ var map = new ol.Map({
     zoom: 2
   })
 });
+
+document.getElementById('projection').addEventListener('change', function() {
+  control.setProjection(this.value);
+}, false);

src/ol/control/mousepositioncontrol.exports

@@ -1,2 +1,3 @@
 @exportClass ol.control.MousePosition ol.control.MousePositionOptions
 @exportProperty ol.control.MousePosition.prototype.setMap
+@exportProperty ol.control.MousePosition.prototype.setProjection

src/ol/control/mousepositioncontrol.js

@@ -86,15 +86,9 @@ ol.control.MousePosition = function(opt_options) {
 
   /**
    * @private
-   * @type {ol.TransformFunction}
+   * @type {?ol.TransformFunction}
    */
-  this.transform_ = ol.proj.identityTransform;
+  this.transform_ = null;
-
-  /**
-   * @private
-   * @type {ol.Projection}
-   */
-  this.renderedProjection_ = null;
 
   /**
    * @private
@@ -114,7 +108,10 @@ ol.control.MousePosition.prototype.handleMapPostrender = function(mapEvent) {
   if (goog.isNull(frameState)) {
     this.mapProjection_ = null;
   } else {
-    this.mapProjection_ = frameState.view2DState.projection;
+    if (this.mapProjection_ != frameState.view2DState.projection) {
+      this.mapProjection_ = frameState.view2DState.projection;
+      this.transform_ = null;
+    }
   }
   this.updateHTML_(this.lastMouseMovePixel_);
 };
@@ -160,6 +157,15 @@ ol.control.MousePosition.prototype.setMap = function(map) {
 };
 
 
+/**
+ * @param {ol.ProjectionLike} projection Projection.
+ */
+ol.control.MousePosition.prototype.setProjection = function(projection) {
+  this.projection_ = ol.proj.get(projection);
+  this.transform_ = null;
+};
+
+
 /**
  * @param {?ol.Pixel} pixel Pixel.
  * @private
@@ -167,14 +173,13 @@ ol.control.MousePosition.prototype.setMap = function(map) {
 ol.control.MousePosition.prototype.updateHTML_ = function(pixel) {
   var html = this.undefinedHTML_;
   if (!goog.isNull(pixel)) {
-    if (this.renderedProjection_ != this.mapProjection_) {
+    if (goog.isNull(this.transform_)) {
       if (!goog.isNull(this.projection_)) {
         this.transform_ = ol.proj.getTransformFromProjections(
             this.mapProjection_, this.projection_);
       } else {
         this.transform_ = ol.proj.identityTransform;
       }
-      this.renderedProjection_ = this.mapProjection_;
     }
     var map = this.getMap();
     var coordinate = map.getCoordinateFromPixel(pixel);