From d65ae078ef3c40f96c5b4c703981bddb5b0a31cd Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Wed, 13 Nov 2013 13:29:02 +0100 Subject: [PATCH] Add layer-swipe example --- examples/layer-swipe.html | 51 +++++++++++++++++++++++++++++++++++++++ examples/layer-swipe.js | 47 ++++++++++++++++++++++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 examples/layer-swipe.html create mode 100644 examples/layer-swipe.js diff --git a/examples/layer-swipe.html b/examples/layer-swipe.html new file mode 100644 index 0000000000..0ecb8b932f --- /dev/null +++ b/examples/layer-swipe.html @@ -0,0 +1,51 @@ + + + + + + + + + + + Layer Swipe example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+ +
+
+ +
+ +
+

Layer Swipe example

+

Example of a Layer swipe map.

+
+

See the layer-swipe.js source to see how this is done.

+
+
swipe, openstreetmap
+
+ +
+ +
+ + + + + + diff --git a/examples/layer-swipe.js b/examples/layer-swipe.js new file mode 100644 index 0000000000..61a6dd08f0 --- /dev/null +++ b/examples/layer-swipe.js @@ -0,0 +1,47 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.BingMaps'); +goog.require('ol.source.OSM'); + +var osm = new ol.layer.Tile({ + source: new ol.source.OSM() +}); +var bing = new ol.layer.Tile({ + source: new ol.source.BingMaps({ + key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3', + style: 'Aerial' + }) +}); + +var map = new ol.Map({ + layers: [osm, bing], + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +}); + +var swipe = document.getElementById('swipe'); + +bing.on('precompose', function(event) { + var ctx = event.getContext(); + var width = ctx.canvas.width * (swipe.value / 100); + + ctx.save(); + ctx.beginPath(); + ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height); + ctx.clip(); +}); + +bing.on('postcompose', function(event) { + var ctx = event.getContext(); + ctx.restore(); +}); + +swipe.addEventListener('change', function() { + map.requestRenderFrame(); +}, false);