Rework examples to new API

examples_src/device-orientation.js

@@ -2,7 +2,6 @@ goog.require('ol.DeviceOrientation');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
-goog.require('ol.dom.Input');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
@@ -31,8 +30,10 @@ var map = new ol.Map({
 });
 
 var deviceOrientation = new ol.DeviceOrientation();
-var track = new ol.dom.Input(document.getElementById('track'));
-track.bindTo('checked', deviceOrientation, 'tracking');
+
+$('#track').on('change', function() {
+  deviceOrientation.setTracking(this.checked);
+});
 
 deviceOrientation.on('change', function(event) {
   $('#alpha').text(deviceOrientation.getAlpha() + ' [rad]');

examples_src/geolocation.js

@@ -4,7 +4,6 @@ goog.require('ol.Geolocation');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
-goog.require('ol.dom.Input');
 goog.require('ol.geom.Point');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
@@ -37,8 +36,9 @@ var geolocation = new ol.Geolocation({
   projection: view.getProjection()
 });
 
-var track = new ol.dom.Input(document.getElementById('track'));
-track.bindTo('checked', geolocation, 'tracking');
+$('#track').on('change', function() {
+  geolocation.setTracking(this.checked);
+});
 
 // update the HTML page when the position changes.
 geolocation.on('change', function() {
@@ -57,7 +57,9 @@ geolocation.on('error', function(error) {
 });
 
 var accuracyFeature = new ol.Feature();
-accuracyFeature.bindTo('geometry', geolocation, 'accuracyGeometry');
+geolocation.on('change:accuracyGeometry', function() {
+  accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
+});
 
 var positionFeature = new ol.Feature();
 positionFeature.setStyle(new ol.style.Style({
@@ -73,10 +75,11 @@ positionFeature.setStyle(new ol.style.Style({
   })
 }));
 
-positionFeature.bindTo('geometry', geolocation, 'position')
-    .transform(function() {}, function(coordinates) {
-      return coordinates ? new ol.geom.Point(coordinates) : null;
-    });
+geolocation.on('change:position', function() {
+  var coordinates = geolocation.getPosition();
+  positionFeature.setGeometry(coordinates ?
+      new ol.geom.Point(coordinates) : null);
+});
 
 var featuresOverlay = new ol.FeatureOverlay({
   map: map,

examples_src/layer-group.js

@@ -1,6 +1,5 @@
 goog.require('ol.Map');
 goog.require('ol.View');
-goog.require('ol.dom.Input');
 goog.require('ol.layer.Group');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
@@ -39,13 +38,19 @@ var map = new ol.Map({
 });
 
 function bindInputs(layerid, layer) {
-  new ol.dom.Input($(layerid + ' .visible')[0])
-      .bindTo('checked', layer, 'visible');
+  var visibilityInput = $(layerid + ' input.visible');
+  visibilityInput.on('change', function() {
+    layer.setVisible(this.checked);
+  });
+  visibilityInput.prop('checked', layer.getVisible());
+
   $.each(['opacity', 'hue', 'saturation', 'contrast', 'brightness'],
       function(i, v) {
-        new ol.dom.Input($(layerid + ' .' + v)[0])
-            .bindTo('value', layer, v)
-            .transform(parseFloat, String);
+        var input = $(layerid + ' input.' + v);
+        input.on('input change', function() {
+          layer.set(v, parseFloat(this.value));
+        });
+        input.val(String(layer.get(v)));
       }
   );
 }

examples_src/mouse-position.js

@@ -3,7 +3,6 @@ goog.require('ol.View');
 goog.require('ol.control');
 goog.require('ol.control.MousePosition');
 goog.require('ol.coordinate');
-goog.require('ol.dom.Input');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
@@ -37,20 +36,14 @@ var map = new ol.Map({
   })
 });
 
-var projectionSelect = new ol.dom.Input(document.getElementById('projection'));
-projectionSelect.bindTo('value', mousePositionControl, 'projection')
-  .transform(
-    function(code) {
-      // projectionSelect.value -> mousePositionControl.projection
-      return ol.proj.get(/** @type {string} */ (code));
-    },
-    function(projection) {
-      // mousePositionControl.projection -> projectionSelect.value
-      return projection.getCode();
-    });
+var projectionSelect = $('#projection');
+projectionSelect.on('change', function() {
+  mousePositionControl.setProjection(ol.proj.get(this.value));
+});
+projectionSelect.val(mousePositionControl.getProjection().getCode());
 
-var precisionInput = document.getElementById('precision');
-precisionInput.addEventListener('change', function() {
-  var format = ol.coordinate.createStringXY(precisionInput.valueAsNumber);
+var precisionInput = $('#precision');
+precisionInput.on('change', function() {
+  var format = ol.coordinate.createStringXY(this.valueAsNumber);
   mousePositionControl.setCoordinateFormat(format);
-}, false);
+});

examples_src/preload.js

@@ -4,6 +4,11 @@ goog.require('ol.layer.Tile');
 goog.require('ol.source.BingMaps');
 
 
+var view = new ol.View({
+  center: [-4808600, -2620936],
+  zoom: 8
+});
+
 var map1 = new ol.Map({
   layers: [
     new ol.layer.Tile({
@@ -16,10 +21,7 @@ var map1 = new ol.Map({
   ],
   renderer: exampleNS.getRendererFromQueryString(),
   target: 'map1',
-  view: new ol.View({
-    center: [-4808600, -2620936],
-    zoom: 8
-  })
+  view: view
 });
 
 var map2 = new ol.Map({
@@ -33,6 +35,6 @@ var map2 = new ol.Map({
     })
   ],
   renderer: exampleNS.getRendererFromQueryString(),
-  target: 'map2'
+  target: 'map2',
+  view: view
 });
-map2.bindTo('view', map1);

examples_src/scale-line.js

@@ -2,7 +2,6 @@ goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
 goog.require('ol.control.ScaleLine');
-goog.require('ol.dom.Input');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
 
@@ -31,5 +30,8 @@ var map = new ol.Map({
 });
 
 
-var unitsSelect = new ol.dom.Input(document.getElementById('units'));
-unitsSelect.bindTo('value', scaleLineControl, 'units');
+var unitsSelect = $('#units');
+unitsSelect.on('change', function() {
+  scaleLineControl.setUnits(this.value);
+});
+unitsSelect.val(scaleLineControl.getUnits());

examples_src/side-by-side.js

@@ -22,10 +22,10 @@ var domMap = new ol.Map({
 if (ol.has.WEBGL) {
   var webglMap = new ol.Map({
     renderer: 'webgl',
-    target: 'webglMap'
+    target: 'webglMap',
+    layers: domMap.getLayers(),
+    view: domMap.getView()
   });
-  webglMap.bindTo('layergroup', domMap);
-  webglMap.bindTo('view', domMap);
 } else {
   var info = document.getElementById('no-webgl');
   /**
@@ -35,7 +35,7 @@ if (ol.has.WEBGL) {
 }
 
 var canvasMap = new ol.Map({
-  target: 'canvasMap'
+  target: 'canvasMap',
+  layers: domMap.getLayers(),
+  view: domMap.getView()
 });
-canvasMap.bindTo('layergroup', domMap);
-canvasMap.bindTo('view', domMap);