From 814fb078cf2bb4b0cb396df9a36f8b7365630cd7 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sun, 5 Apr 2015 18:51:55 +0200 Subject: [PATCH] Rework examples to new API --- examples_src/device-orientation.js | 7 ++++--- examples_src/geolocation.js | 19 +++++++++++-------- examples_src/layer-group.js | 17 +++++++++++------ examples_src/mouse-position.js | 25 +++++++++---------------- examples_src/preload.js | 14 ++++++++------ examples_src/scale-line.js | 8 +++++--- examples_src/side-by-side.js | 12 ++++++------ 7 files changed, 54 insertions(+), 48 deletions(-) diff --git a/examples_src/device-orientation.js b/examples_src/device-orientation.js index 8f3569367d..a25d7d4463 100644 --- a/examples_src/device-orientation.js +++ b/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]'); diff --git a/examples_src/geolocation.js b/examples_src/geolocation.js index 069df5bc5c..b50c42aef3 100644 --- a/examples_src/geolocation.js +++ b/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, diff --git a/examples_src/layer-group.js b/examples_src/layer-group.js index b145d1dffb..807813e53d 100644 --- a/examples_src/layer-group.js +++ b/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))); } ); } diff --git a/examples_src/mouse-position.js b/examples_src/mouse-position.js index cdbf7eece1..9f4a4107fa 100644 --- a/examples_src/mouse-position.js +++ b/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); +}); diff --git a/examples_src/preload.js b/examples_src/preload.js index fea83937f0..1c4d71164e 100644 --- a/examples_src/preload.js +++ b/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); diff --git a/examples_src/scale-line.js b/examples_src/scale-line.js index b495fed945..92db5db61a 100644 --- a/examples_src/scale-line.js +++ b/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()); diff --git a/examples_src/side-by-side.js b/examples_src/side-by-side.js index a58340b378..6d50c3f8da 100644 --- a/examples_src/side-by-side.js +++ b/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);