From 8e8804caf183b31bb7e23ddddd40cf5cd0e70f55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 23 Apr 2013 10:41:34 +0200 Subject: [PATCH] Add a teleport map example --- examples/teleport.html | 65 ++++++++++++++++++++++++++++++++++++++++++ examples/teleport.js | 31 ++++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 examples/teleport.html create mode 100644 examples/teleport.js diff --git a/examples/teleport.html b/examples/teleport.html new file mode 100644 index 0000000000..4d221d5d0e --- /dev/null +++ b/examples/teleport.html @@ -0,0 +1,65 @@ + + + + + + + + + + Teleport example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+ +
+
+ Teleport +
+
+ +
+ +
+

Teleport example

+

Example of moving a map from one target to another.

+
+

Click on the Teleport button below the map to move the map from one target to another.

+

See the teleport.js source to see how this is done.

+
+
teleport, openstreetmap
+
+ +
+ +
+ + + + + + diff --git a/examples/teleport.js b/examples/teleport.js new file mode 100644 index 0000000000..c528154811 --- /dev/null +++ b/examples/teleport.js @@ -0,0 +1,31 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.source.OSM'); + + +var map = new ol.Map({ + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.OSM() + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +}); + +var mapTarget1 = document.getElementById('map1'); +var mapTarget2 = document.getElementById('map2'); + +map.setTarget(mapTarget1); + +var teleportButton = document.getElementById('teleport'); + +teleportButton.addEventListener('click', function() { + var target = map.getTarget() === mapTarget1 ? mapTarget2 : mapTarget1; + map.setTarget(target); +}, false);