diff --git a/examples/full-screen.html b/examples/full-screen.html index 6526bc2d6b..4b51a67432 100644 --- a/examples/full-screen.html +++ b/examples/full-screen.html @@ -4,24 +4,63 @@ - Full-Screen example - + Full screen control example -
- -
-
Full-screen example
-
Example of a full-screen map.
-
fullscreen, mapquest, openaerial, tile, tilelayer
+ + +
+ +
+
+
+
+
+ +
+ +
+

Full screen control example

+

Example of a full screen control. Click the control in the top right corner to go full screen. Click it again to exit full screen.

+
+

See the full-screen.js source to see how this is done.

+
+
full-screen, bing, bing-maps
+
+ +
+ +
+ + + + diff --git a/examples/full-screen.js b/examples/full-screen.js index db48e57a27..9af6fd0c20 100644 --- a/examples/full-screen.js +++ b/examples/full-screen.js @@ -1,24 +1,30 @@ goog.require('ol.Map'); goog.require('ol.RendererHints'); goog.require('ol.View2D'); +goog.require('ol.control.FullScreen'); +goog.require('ol.control.defaults'); goog.require('ol.layer.TileLayer'); -goog.require('ol.source.MapQuestOpenAerial'); +goog.require('ol.source.BingMaps'); -var layer = new ol.layer.TileLayer({ - source: new ol.source.MapQuestOpenAerial() +var view = new ol.View2D({ + center: [-9101767, 2822912], + zoom: 14 }); -var view = new ol.View2D(); - var map = new ol.Map({ - layers: [layer], + controls: ol.control.defaults({}, [ + new ol.control.FullScreen() + ]), + layers: [ + new ol.layer.TileLayer({ + source: new ol.source.BingMaps({ + key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R', + style: 'Aerial' + }) + }) + ], renderers: ol.RendererHints.createFromQueryData(), target: 'map', view: view }); - -var mapSize = map.getSize(); -if (mapSize) { - view.fitExtent(view.getProjection().getExtent(), mapSize); -}