From 878122828bc2ff6c9ea213082cc839915e456499 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Sat, 5 Jan 2013 18:33:37 +0100 Subject: [PATCH] Add canvas tiles example --- examples/canvas-tiles.html | 38 +++++++++++++++++++++++++++++++++ examples/canvas-tiles.js | 43 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+) create mode 100644 examples/canvas-tiles.html create mode 100644 examples/canvas-tiles.js diff --git a/examples/canvas-tiles.html b/examples/canvas-tiles.html new file mode 100644 index 0000000000..7340cdc3fc --- /dev/null +++ b/examples/canvas-tiles.html @@ -0,0 +1,38 @@ + + + + + + + + ol3 canvas tiles demo + + +

Canvas tiles example

+
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).
+ + + + + + + + + +
DOMWebGL
+
+

See the + canvas-tiles.js source + to see how this is done.

+
+
layers, stamen, canvas
+ + + diff --git a/examples/canvas-tiles.js b/examples/canvas-tiles.js new file mode 100644 index 0000000000..92c3f15046 --- /dev/null +++ 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);