Add padding option for View

examples/center.html

@@ -11,6 +11,11 @@ docs: >
   view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
   at a specific pixel location (the center of the black box).
   <p>Use <code>Alt+Shift+Drag</code> to rotate the map.</p>
+  <p><b>Note:</b> This example does not shift the view center. So the zoom 
+  controls and rotating the map will still use the center of the viewport as anchor.
+  To shift the whole view based on a padding, use the `padding` option on the view,
+  as shown in the <a href="view-padding.html">view-padding.html</a> example.
+  </p>
 tags: "center, rotation, openstreetmap"
 ---
 <div class="mapcontainer">

examples/view-padding.css

@@ -0,0 +1,54 @@
+.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);
+}
+

examples/view-padding.html

@@ -0,0 +1,23 @@
+---
+layout: example.html
+title: View Padding
+shortdesc: This example demonstrates the use of the view's padding option.
+docs: >
+  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.
+  <p>Use <code>Alt+Shift+Drag</code> to rotate the map.</p>
+tags: "center, padding, view, shift"
+---
+<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>

examples/view-padding.js

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