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 GeoJSON from 'ol/format/GeoJSON.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
import {OSM, Vector as VectorSource} from 'ol/source.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {fromLonLat} from 'ol/proj.js';

/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
const source = new VectorSource({
  url: 'data/geojson/switzerland.geojson',
  format: new GeoJSON(),
});
const 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,
    }),
  }),
});
const vectorLayer = new VectorLayer({
  source: source,
  style: style,
});
const view = new View({
  center: fromLonLat([6.6339863, 46.5193823]),
  padding: [170, 50, 30, 150],
  zoom: 6,
});
const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
    vectorLayer,
  ],
  target: 'map',
  view: view,
});

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

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>View Padding</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <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 type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "view-padding",
  "dependencies": {
    "ol": "10.2.1"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}