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({}, [
-    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: ' '
-    })
-  ]),
+  controls: ol.control.defaults({}, [control]),
   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);