View Padding

This example demonstrates the use of the view's padding option.

This example demonstrates how a map's view can be configured to accommodate for viewport space covered by other elements. If the map viewport is partially covered with other content (overlays) along its edges, the padding option allows to shift the center of the viewport away from that content. The shifted viewport center will also be the anchor for zooming in and out with the Zoom controls, and for rotating.

Use Alt+Shift+Drag to rotate the map.

main.js

import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import View from 'ol/View';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {fromLonLat} from 'ol/proj';

/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
var source = new VectorSource({
  url: 'data/geojson/switzerland.geojson',
  format: new GeoJSON(),
});
var style = new Style({
  fill: new Fill({
    color: 'rgba(255, 255, 255, 0.6)',
  }),
  stroke: new Stroke({
    color: '#319FD3',
    width: 1,
  }),
  image: new CircleStyle({
    radius: 5,
    fill: new Fill({
      color: 'rgba(255, 255, 255, 0.6)',
    }),
    stroke: new Stroke({
      color: '#319FD3',
      width: 1,
    }),
  }),
});
var vectorLayer = new VectorLayer({
  source: source,
  style: style,
});
var view = new View({
  center: fromLonLat([6.6339863, 46.5193823]),
  padding: [170, 50, 30, 150],
  zoom: 6,
});
var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
    vectorLayer ],
  target: 'map',
  view: view,
});

var zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
zoomtoswitzerland.addEventListener(
  'click',
  function () {
    var feature = source.getFeatures()[0];
    var polygon = feature.getGeometry();
    view.fit(polygon);
  },
  false
);

var centerlausanne = document.getElementById('centerlausanne');
centerlausanne.addEventListener(
  'click',
  function () {
    var feature = source.getFeatures()[1];
    var point = feature.getGeometry();
    view.setCenter(point.getCoordinates());
  },
  false
);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>View Padding</title>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/elm-pep"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
      .mapcontainer {
        position: relative;
        margin-bottom: 20px;
      }
      .map {
        width: 1000px;
        height: 600px;
      }
      .map .ol-zoom {
        top: 178px;
        left: 158px;
      }
      .map .ol-rotate {
        top: 178px;
        right: 58px;
      }
      .map .ol-attribution,
      .map .ol-attribution.ol-uncollapsible {
        bottom: 30px;
        right: 50px;
      }
      .padding-top {
        position: absolute;
        top: 0;
        left: 0px;
        width: 1000px;
        height: 170px;
        background: rgba(255, 255, 255, 0.5);
      }
      .padding-left {
        position: absolute;
        top: 170px;
        left: 0;
        width: 150px;
        height: 400px;
        background: rgba(255, 255, 255, 0.5);
      }
      .padding-right {
        position: absolute;
        top: 170px;
        left: 950px;
        width: 50px;
        height: 400px;
        background: rgba(255, 255, 255, 0.5);
      }
      .padding-bottom {
        position: absolute;
        top: 570px;
        left: 0px;
        width: 1000px;
        height: 30px;
        background: rgba(255, 255, 255, 0.5);
      }

    </style>
  </head>
  <body>
    <div class="mapcontainer">
      <div id="map" class="map"></div>
      <div class="padding-top"></div>
      <div class="padding-left"></div>
      <div class="padding-right"></div>
      <div class="padding-bottom"></div>
    </div>
    <button id="zoomtoswitzerland">Zoom to Switzerland</button>
    <button id="centerlausanne">Center on Lausanne</button>
    <script src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "view-padding",
  "dependencies": {
    "ol": "6.5.0"
  },
  "devDependencies": {
    "parcel": "^2.0.0-beta.1"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  }
}