Full Screen Control with extended source element

This example uses OpenLayers v4.0.1. The latest is v.

#### 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.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.control
,
- ol.control.FullScreen
,
- ol.layer.Tile
,
- ol.source.OSM

Copy Edit
Full Screen Control with extended source element Example of a full screen control with a source option definition. var view = new ol.View({ center: [-9101767, 2822912], zoom: 14 }); var map = new ol.Map({ controls: ol.control.defaults().extend([ new ol.control.FullScreen({ source: 'fullscreen' }) ]), layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', view: view }); .fullscreen:-moz-full-screen { height: 100%; } .fullscreen:-webkit-full-screen { height: 100%; } .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; } <div id="fullscreen" class="fullscreen"> <div id="map" class="map"></div> <div class="sidepanel"> <span class="sidepanel-title">Side Panel</span> </div> </div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Full Screen Control with extended source element</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- 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>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
        <style>
          .fullscreen:-moz-full-screen {
            height: 100%;
          }
          .fullscreen:-webkit-full-screen {
            height: 100%;
          }
          .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>
          var view = new ol.View({
            center: [-9101767, 2822912],
            zoom: 14
          });

          var map = new ol.Map({
            controls: ol.control.defaults().extend([
              new ol.control.FullScreen({
                source: 'fullscreen'
              })
            ]),
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            target: 'map',
            view: view
          });
        </script>
      </body>
    </html>