Add view abstraction

examples/full-screen.js

@@ -4,6 +4,7 @@ goog.require('goog.debug.Logger.Level');
 goog.require('ol.Collection');
 goog.require('ol.Coordinate');
 goog.require('ol.Map');
+goog.require('ol.View2D');
 goog.require('ol.source.MapQuestOpenAerial');
 
 
@@ -17,8 +18,10 @@ var layer = new ol.layer.TileLayer({
   source: new ol.source.MapQuestOpenAerial()
 });
 var map = new ol.Map({
-  center: new ol.Coordinate(0, 0),
   layers: new ol.Collection([layer]),
   target: 'map',
-  zoom: 2
+  view: new ol.View2D({
+    center: new ol.Coordinate(0, 0),
+    zoom: 0
+  })
 });

examples/overlay-and-popup.js

@@ -4,6 +4,7 @@ goog.require('goog.debug.Logger.Level');
 goog.require('ol.Collection');
 goog.require('ol.Coordinate');
 goog.require('ol.Map');
+goog.require('ol.View2D');
 goog.require('ol.overlay.Overlay');
 goog.require('ol.source.MapQuestOpenAerial');
 
@@ -17,11 +18,14 @@ if (goog.DEBUG) {
 var layer = new ol.layer.TileLayer({
   source: new ol.source.MapQuestOpenAerial()
 });
+
 var map = new ol.Map({
-  center: new ol.Coordinate(0, 0),
   layers: new ol.Collection([layer]),
   target: 'map',
-  zoom: 2
+  view: new ol.View2D({
+    center: new ol.Coordinate(0, 0),
+    zoom: 2
+  })
 });
 
 // Vienna label

examples/side-by-side.js

@@ -4,6 +4,7 @@ goog.require('goog.debug.Logger.Level');
 goog.require('ol.Coordinate');
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
+goog.require('ol.View2D');
 goog.require('ol.control.MousePosition');
 goog.require('ol.interaction.Keyboard');
 goog.require('ol.layer.TileLayer');
@@ -20,12 +21,16 @@ var layer = new ol.layer.TileLayer({
   source: new ol.source.MapQuestOpenAerial()
 });
 
-var domMap = new ol.Map({
+var view = new ol.View2D({
   center: new ol.Coordinate(0, 0),
+  zoom: 1
+});
+
+var domMap = new ol.Map({
   layers: new ol.Collection([layer]),
   renderer: ol.RendererHint.DOM,
   target: 'domMap',
-  zoom: 1
+  view: view
 });
 
 domMap.getControls().push(new ol.control.MousePosition({
@@ -40,10 +45,8 @@ var webglMap = new ol.Map({
   target: 'webglMap'
 });
 if (webglMap !== null) {
-  webglMap.bindTo('center', domMap);
   webglMap.bindTo('layers', domMap);
-  webglMap.bindTo('resolution', domMap);
-  webglMap.bindTo('rotation', domMap);
+  webglMap.bindTo('view', domMap);
 }
 
 webglMap.getControls().push(new ol.control.MousePosition({
@@ -88,7 +91,7 @@ keyboardInteraction.addCallback('O', function() {
   layer.setOpacity(layer.getOpacity() + 0.1);
 });
 keyboardInteraction.addCallback('r', function() {
-  webglMap.setRotation(0);
+  view.setRotation(0);
 });
 keyboardInteraction.addCallback('s', function() {
   layer.setSaturation(layer.getSaturation() - 0.1);

examples/two-layers.js

@@ -3,6 +3,7 @@ goog.require('ol.Coordinate');
 goog.require('ol.Map');
 goog.require('ol.Projection');
 goog.require('ol.RendererHint');
+goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.BingMaps');
 goog.require('ol.source.TileJSON');
@@ -23,19 +24,19 @@ var layers = new ol.Collection([
 ]);
 
 var webglMap = new ol.Map({
-  center: ol.Projection.transformWithCodes(
-      new ol.Coordinate(-77.93255, 37.9555), 'EPSG:4326', 'EPSG:3857'),
   layers: layers,
   renderer: ol.RendererHint.WEBGL,
   target: 'webglMap',
-  zoom: 5
+  view: new ol.View2D({
+    center: ol.Projection.transformWithCodes(
+        new ol.Coordinate(-77.93255, 37.9555), 'EPSG:4326', 'EPSG:3857'),
+    zoom: 5
+  })
 });
 
 var domMap = new ol.Map({
   renderer: ol.RendererHint.DOM,
   target: 'domMap'
 });
-domMap.bindTo('center', webglMap);
 domMap.bindTo('layers', webglMap);
-domMap.bindTo('resolution', webglMap);
-domMap.bindTo('rotation', webglMap);
+domMap.bindTo('view', webglMap);

examples/wms-custom-proj.js

@@ -5,6 +5,7 @@ goog.require('ol.Collection');
 goog.require('ol.Coordinate');
 goog.require('ol.Map');
 goog.require('ol.Projection');
+goog.require('ol.View2D');
 goog.require('ol.source.TiledWMS');
 
 
@@ -50,12 +51,14 @@ var layers = new ol.Collection([
 ]);
 
 var map = new ol.Map({
-  center: new ol.Coordinate(660000, 190000),
   projection: epsg21781,
   // By setting userProjection to the same as projection, we do not need
   // proj4js because we do not need any transforms.
   userProjection: epsg21781,
   layers: layers,
   target: 'map',
-  zoom: 9
+  view: new ol.View2D({
+    center: new ol.Coordinate(660000, 190000),
+    zoom: 9
+  })
 });

examples/wms.js

@@ -4,6 +4,7 @@ goog.require('goog.debug.Logger.Level');
 goog.require('ol.Collection');
 goog.require('ol.Coordinate');
 goog.require('ol.Map');
+goog.require('ol.View2D');
 goog.require('ol.source.MapQuestOpenAerial');
 goog.require('ol.source.TiledWMS');
 
@@ -31,6 +32,8 @@ var map = new ol.Map({
   renderer: ol.RendererHint.DOM,
   layers: layers,
   target: 'map',
-  center: new ol.Coordinate(-10997148, 4569099),
-  zoom: 4
+  view: new ol.View2D({
+    center: new ol.Coordinate(-10997148, 4569099),
+    zoom: 4
+  })
 });