Merge pull request #346 from twpayne/single-map-in-canvas-tiles-example

Use a single map in the canvas tiles example

examples/canvas-tiles.html

@@ -26,17 +26,8 @@
     <div class="container-fluid">
 
       <div class="row-fluid">
-        <div class="span4">
-          <h4>Canvas</h4>
-          <div id="canvasMap" class="map"></div>
-        </div>
-        <div class="span4">
-          <h4>WebGL</h4>
-          <div id="webglMap" class="map"></div>
-        </div>
-        <div class="span4">
-          <h4>DOM</h4>
-          <div id="domMap" class="map"></div>
+        <div class="span12">
+          <div id="map" class="map"></div>
         </div>
       </div>
 
@@ -53,6 +44,8 @@
 
       </div>
 
+    </div>
+
     <script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
 
   </body>

examples/canvas-tiles.js

@@ -1,6 +1,6 @@
 goog.require('ol.Coordinate');
 goog.require('ol.Map');
-goog.require('ol.RendererHint');
+goog.require('ol.RendererHints');
 goog.require('ol.View2D');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.projection');
@@ -9,41 +9,25 @@ goog.require('ol.source.OpenStreetMap');
 goog.require('ol.tilegrid.XYZ');
 
 
-var layers = [
-  new ol.layer.TileLayer({
-    source: new ol.source.OpenStreetMap()
-  }),
-  new ol.layer.TileLayer({
-    source: new ol.source.DebugTileSource({
-      projection: 'EPSG:3857',
-      tileGrid: new ol.tilegrid.XYZ({
-        maxZoom: 22
+var map = new ol.Map({
+  layers: [
+    new ol.layer.TileLayer({
+      source: new ol.source.OpenStreetMap()
+    }),
+    new ol.layer.TileLayer({
+      source: new ol.source.DebugTileSource({
+        projection: 'EPSG:3857',
+        tileGrid: new ol.tilegrid.XYZ({
+          maxZoom: 22
+        })
       })
     })
-  })
-];
-
-var webglMap = new ol.Map({
+  ],
+  renderers: ol.RendererHints.createFromQueryData(),
+  target: 'map',
   view: new ol.View2D({
     center: ol.projection.transform(
         new ol.Coordinate(-0.1275, 51.507222), 'EPSG:4326', 'EPSG:3857'),
     zoom: 10
-  }),
-  layers: layers,
-  renderer: ol.RendererHint.WEBGL,
-  target: 'webglMap'
+  })
 });
-
-var domMap = new ol.Map({
-  renderer: ol.RendererHint.DOM,
-  target: 'domMap'
-});
-domMap.bindTo('layers', webglMap);
-domMap.bindTo('view', webglMap);
-
-var canvasMap = new ol.Map({
-  renderer: ol.RendererHint.CANVAS,
-  target: 'canvasMap'
-});
-canvasMap.bindTo('layers', webglMap);
-canvasMap.bindTo('view', webglMap);