diff --git a/examples/navigation-controls.html b/examples/navigation-controls.html new file mode 100644 index 0000000000..9503429b29 --- /dev/null +++ b/examples/navigation-controls.html @@ -0,0 +1,60 @@ + + + + + + + + + + Navigation controls example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Navigation controls example

+

Shows how to add navigation controls.

+ The following navigation controls are added to the map: +
    +
  • ol.control.Zoom (added by default)
    • +
  • ol.control.ZoomToExtent
    • +
+
+

See the navigation-controls.js source to see how this is done.

+
+
control, navigation, extent
+
+ +
+ +
+ + + + + + diff --git a/examples/navigation-controls.js b/examples/navigation-controls.js new file mode 100644 index 0000000000..86f6d06f1e --- /dev/null +++ b/examples/navigation-controls.js @@ -0,0 +1,32 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHints'); +goog.require('ol.View2D'); +goog.require('ol.control.ZoomToExtent'); +goog.require('ol.control.defaults'); +goog.require('ol.layer.TileLayer'); +goog.require('ol.source.OSM'); + + +var map = new ol.Map({ + controls: ol.control.defaults({}, [ + new ol.control.ZoomToExtent({ + extent: [ + 813079.7791264898, + 848966.9639063801, + 5929220.284081122, + 5936863.986909639 + ] + }) + ]), + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.OSM() + }) + ], + renderers: ol.RendererHints.createFromQueryData(), + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +});