Edit

Full Screen Control with extended source element

Side Panel

Example of a full screen control with a source option definition.

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 with extended source element</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=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
      .fullscreen:-webkit-full-screen {
        height: 100%;
        margin: 0;
      }
      .fullscreen:-ms-fullscreen {
        height: 100%;
      }

      .fullscreen:fullscreen {
        height: 100%;
      }

      .fullscreen {
        margin-bottom: 10px;
        width: 100%;
        height: 400px;
      }

      .ol-rotate {
        top: 3em;
      }

      .map {
        width: 80%;
        height: 100%;
        float: left;
      }

      .sidepanel {
        background: #1F6B75;
        width: 20%;
        height: 100%;
        float: left;
      }

      .sidepanel-title {
        width: 100%;
        font-size: 3em;
        color: #ffffff;
        display: block;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="fullscreen" class="fullscreen">
      <div id="map" class="map"></div>
      <div class="sidepanel">
        <span class="sidepanel-title">Side Panel</span>
      </div>
    </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 OSM from 'ol/source/OSM';


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

var map = new Map({
  controls: defaultControls().extend([
    new FullScreen({
      source: 'fullscreen'
    })
  ]),
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  target: 'map',
  view: view
});
Copy 
package.json{
  "name": "full-screen-source",
  "dependencies": {
    "ol": "6.1.1"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}