Add canvas tiles example

2013-01-05 18:33:37 +01:00
parent 6984fbb9b9
commit 878122828b
2 changed files with 81 additions and 0 deletions
--- a/examples/canvas-tiles.html
+++ b/examples/canvas-tiles.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <style type="text/css">
+      .map {
+        width: 400px;
+        height: 400px;
+        border: thin solid #cccccc;
+        margin: 1em;
+      }
+    </style>
+    <title>ol3 canvas tiles demo</title>
+  </head>
+  <body>
+    <h1 id="title">Canvas tiles example</h1>
+    <div id="shortdesc">The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not OSM tile coordinates (origin top left).</div>
+    <table>
+      <tr>
+        <th>DOM</th>
+        <th>WebGL</th>
+      </tr>
+      <tr>
+        <td><div id="domMap" class="map"></div></td>
+        <td><div id="webglMap" class="map"></div></td>
+      </tr>
+    </table>
+    <div id="docs">
+      <p>See the
+      <a href="canvas-tiles.js" target="_blank">canvas-tiles.js source</a>
+      to see how this is done.</p>
+    </div>
+    <div id="tags">layers, stamen, canvas</div>
+    <script src="loader.js?id=canvas-tiles" type="text/javascript"></script>
+  </body>
+</html>
--- a/examples/canvas-tiles.js
+++ b/examples/canvas-tiles.js
@@ -0,0 +1,43 @@
+goog.require('ol.Collection');
+goog.require('ol.Coordinate');
+goog.require('ol.Map');
+goog.require('ol.Projection');
+goog.require('ol.RendererHint');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.source.DebugTileSource');
+goog.require('ol.source.Stamen');
+
+
+var layers = new ol.Collection([
+  new ol.layer.TileLayer({
+    source: new ol.source.Stamen({
+      provider: ol.source.StamenProvider.WATERCOLOR
+    })
+  }),
+  new ol.layer.TileLayer({
+    source: new ol.source.DebugTileSource({
+      projection: ol.Projection.getFromCode('EPSG:3857'),
+      tileGrid: new ol.tilegrid.XYZ({
+        maxZoom: 22
+      })
+    })
+  })
+]);
+
+var webglMap = new ol.Map({
+  view: new ol.View2D({
+    center: ol.Projection.transformWithCodes(
+        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);