Advanced View Positioning

(best fit),
(respect resolution constraint).
(nearest),
(with min resolution),

This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location.

This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location. The map above has top, right, bottom, and left padding applied inside the viewport. The view's fit method is used to fit a geometry in the view with the same padding. The view's centerOn method is used to position a coordinate (Lausanne) at a specific pixel location (the center of the black box).

Use Alt+Shift+Drag to rotate the map.

<!DOCTYPE html>
<html>
  <head>
    <title>Advanced View Positioning</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/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.6.4/build/ol.js"></script>
    <style>
      .mapcontainer {
        position: relative;
        margin-bottom: 20px;
      }
      .map {
        width: 1000px;
        height: 600px;
      }
      div.ol-zoom {
        top: 178px;
        left: 158px;
      }
      div.ol-rotate {
        top: 178px;
        right: 58px;
      }
      .map div.ol-attribution {
        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);
      }
      .center {
        position: absolute;
        border: solid 1px black;
        top: 490px;
        left: 560px;
        width: 20px;
        height: 20px;
      }
    </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 class="center"></div>
    </div>
    <button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
    <button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
    <button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
    <button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
    <button id="centerlausanne">Center on Lausanne</button>
    <script>
      var source = new ol.source.Vector({
        url: 'https://openlayers.org/en/v4.6.4/examples/data/geojson/switzerland.geojson',
        format: new ol.format.GeoJSON()
      });
      var style = new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.6)'
        }),
        stroke: new ol.style.Stroke({
          color: '#319FD3',
          width: 1
        }),
        image: new ol.style.Circle({
          radius: 5,
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.6)'
          }),
          stroke: new ol.style.Stroke({
            color: '#319FD3',
            width: 1
          })
        })
      });
      var vectorLayer = new ol.layer.Vector({
        source: source,
        style: style
      });
      var view = new ol.View({
        center: [0, 0],
        zoom: 1
      });
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
          vectorLayer
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }),
        view: view
      });

      var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
      zoomtoswitzerlandbest.addEventListener('click', function() {
        var feature = source.getFeatures()[0];
        var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
        view.fit(polygon, {padding: [170, 50, 30, 150], constrainResolution: false});
      }, false);

      var zoomtoswitzerlandconstrained =
          document.getElementById('zoomtoswitzerlandconstrained');
      zoomtoswitzerlandconstrained.addEventListener('click', function() {
        var feature = source.getFeatures()[0];
        var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
        view.fit(polygon, {padding: [170, 50, 30, 150]});
      }, false);

      var zoomtoswitzerlandnearest =
          document.getElementById('zoomtoswitzerlandnearest');
      zoomtoswitzerlandnearest.addEventListener('click', function() {
        var feature = source.getFeatures()[0];
        var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
        view.fit(polygon, {padding: [170, 50, 30, 150], nearest: true});
      }, false);

      var zoomtolausanne = document.getElementById('zoomtolausanne');
      zoomtolausanne.addEventListener('click', function() {
        var feature = source.getFeatures()[1];
        var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
        view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
      }, false);

      var centerlausanne = document.getElementById('centerlausanne');
      centerlausanne.addEventListener('click', function() {
        var feature = source.getFeatures()[1];
        var point = /** @type {ol.geom.Point} */ (feature.getGeometry());
        var size = /** @type {ol.Size} */ (map.getSize());
        view.centerOn(point.getCoordinates(), size, [570, 500]);
      }, false);
    </script>
  </body>
</html>