Full Screen Control

Edit

Full Screen Control

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.

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

Copy

index.html<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Full Screen Control</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
      .map:-webkit-full-screen {
        height: 100%;
        margin: 0;
      }
      .map:-ms-fullscreen {
        height: 100%;
      }
      .map:fullscreen {
        height: 100%;
      }
      .ol-rotate {
        top: 3em;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="index.js"></script>
  </body>
</html>

Copy

index.jsimport 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {defaults as defaultControls, FullScreen} from 'ol/control';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';


var view = new View({
  center: [-9101767, 2822912],
  zoom: 14
});

var key = 'Get your own API key at https://www.maptiler.com/cloud/';
var attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';

var map = new Map({
  controls: defaultControls().extend([
    new FullScreen()
  ]),
  layers: [
    new TileLayer({
      source: new XYZ({
        attributions: attributions,
        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
        maxZoom: 20
      })
    })
  ],
  target: 'map',
  view: view
});

Copy

package.json{
  "name": "full-screen",
  "dependencies": {
    "ol": "6.3.1"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}