diff --git a/examples/full-screen-drag-rotate-and-zoom.html b/examples/full-screen-drag-rotate-and-zoom.html new file mode 100644 index 0000000000..362e53155b --- /dev/null +++ b/examples/full-screen-drag-rotate-and-zoom.html @@ -0,0 +1,67 @@ + + + + + + + + + + + Full screen drag rotate and zoom example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Full screen drag rotate and zoom example

+

Example of drag rotate and zoom control with full screen effect. Hold down Shift + drag to rotate and zoom. Click the button in the top right corner to go full screen. Then do the Shift + drag thing again.

+

If there is no button on the map, your browser does not support the Full Screen API.

+
+

See the full-screen-drag-rotate-and-zoom.js source to see how this is done.

+
+
full-screen, drag, rotate, zoom, bing, bing-maps
+
+ +
+ +
+ + + + + + diff --git a/examples/full-screen-drag-rotate-and-zoom.js b/examples/full-screen-drag-rotate-and-zoom.js new file mode 100644 index 0000000000..4bac68294b --- /dev/null +++ b/examples/full-screen-drag-rotate-and-zoom.js @@ -0,0 +1,35 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.control.FullScreen'); +goog.require('ol.control.defaults'); +goog.require('ol.interaction.DragRotateAndZoom'); +goog.require('ol.interaction.defaults'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.source.BingMaps'); + + +var map = new ol.Map({ + controls: ol.control.defaults({}, [ + new ol.control.FullScreen() + ]), + interactions: ol.interaction.defaults({}, [ + new ol.interaction.DragRotateAndZoom() + ]), + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.BingMaps({ + key: 'AlQLZ0-5yk301_ESrmNLma3LYxEKNSg7w-e_knuRfyYFtld-UFvXVs38NOulku3Q', + style: 'Aerial' + }) + }) + ], + // Use the canvas renderer because it's currently the fastest + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + center: [-33519607, 5616436], + rotation: -Math.PI / 8, + zoom: 8 + }) +});