diff --git a/examples/drag-rotate-and-zoom.html b/examples/drag-rotate-and-zoom.html new file mode 100644 index 0000000000..c965216399 --- /dev/null +++ b/examples/drag-rotate-and-zoom.html @@ -0,0 +1,55 @@ + + + + + + + + + + Drag rotate and zoom example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Drag rotate and zoom example

+

Shift + Drag to rotate and zoom the map around its center.

+
+

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

+
+
drag, rotate, zoom, interaction
+
+ +
+ +
+ + + + + + diff --git a/examples/drag-rotate-and-zoom.js b/examples/drag-rotate-and-zoom.js new file mode 100644 index 0000000000..65a7b94768 --- /dev/null +++ b/examples/drag-rotate-and-zoom.js @@ -0,0 +1,25 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.interaction.DragRotateAndZoom'); +goog.require('ol.interaction.defaults'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.source.MapQuestOpenAerial'); + + +var map = new ol.Map({ + interactions: ol.interaction.defaults({}, [ + new ol.interaction.DragRotateAndZoom() + ]), + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.MapQuestOpenAerial() + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +});