Merge pull request #800 from fredj/control_object

Make ol.control.Control extends ol.Object

examples/mouse-position.html

@@ -30,11 +30,6 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
-          <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>
 
@@ -48,7 +43,23 @@
           </div>
           <div id="tags">mouse-position, openstreetmap</div>
         </div>
+        <div class="span8 pull-right">
+          <div id="mouse-position">&nbsp;</div>
+        </div>
+      </div>
 
+      <div class="row-fluid">
+        <div class="span8">
+          <form>
+            <label>Projection </label>
+            <select id="projection">
+              <option value="EPSG:4326">EPSG:4326</option>
+              <option value="EPSG:3857">EPSG:3857</option>
+            </select>
+            <label>Precision </label>
+            <input id="precision" type="number" min="0" max="12" value="4"/>
+          </form>
+        </div>
       </div>
 
     </div>

examples/mouse-position.js

@@ -4,10 +4,12 @@ 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({
+var mousePositionControl = new ol.control.MousePosition({
   coordinateFormat: ol.coordinate.createStringXY(4),
   projection: 'EPSG:4326',
   // comment the following two lines to have the mouse position
@@ -18,7 +20,7 @@ var control = new ol.control.MousePosition({
 });
 
 var map = new ol.Map({
-  controls: ol.control.defaults({}, [control]),
+  controls: ol.control.defaults({}, [mousePositionControl]),
   layers: [
     new ol.layer.TileLayer({
       source: new ol.source.OSM()
@@ -32,6 +34,13 @@ var map = new ol.Map({
   })
 });
 
-document.getElementById('projection').addEventListener('change', function() {
-  control.setProjection(this.value);
-}, false);
+var projectionSelect = new ol.dom.Input(document.getElementById('projection'));
+projectionSelect.on('change:value', function() {
+  mousePositionControl.setProjection(ol.proj.get(projectionSelect.getValue()));
+});
+
+var precisionInput = new ol.dom.Input(document.getElementById('precision'));
+precisionInput.on('change:value', function() {
+  var format = ol.coordinate.createStringXY(precisionInput.getValue());
+  mousePositionControl.setCoordinateFormat(format);
+});

examples/scale-line.html

@@ -30,6 +30,11 @@
       <div class="row-fluid">
         <div class="span12">
           <div id="map" class="map"></div>
+          <select id="units">
+            <option value="degrees">degrees</option>
+            <option value="imperial">imperial</option>
+            <option value="metric">metric</option>
+          </select>
         </div>
       </div>
 

examples/scale-line.js

@@ -2,17 +2,17 @@ goog.require('ol.Map');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.control.ScaleLine');
-goog.require('ol.control.ScaleLineUnits');
 goog.require('ol.control.defaults');
+goog.require('ol.dom.Input');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.OSM');
 
 
+var scaleLineControl = new ol.control.ScaleLine();
+
 var map = new ol.Map({
   controls: ol.control.defaults({}, [
-    new ol.control.ScaleLine({
-      units: ol.control.ScaleLineUnits.IMPERIAL
-    })
+    scaleLineControl
   ]),
   layers: [
     new ol.layer.TileLayer({
@@ -26,3 +26,7 @@ var map = new ol.Map({
     zoom: 2
   })
 });
+
+
+var unitsSelect = new ol.dom.Input(document.getElementById('units'));
+unitsSelect.bindTo('value', scaleLineControl, 'units');