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);