Advanced View Positioning

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

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

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.control
,
- ol.format.GeoJSON
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.source.OSM
,
- ol.source.Vector
,
- ol.style.Circle
,
- ol.style.Fill
,
- ol.style.Stroke
,
- ol.style.Style

Copy Edit
Advanced View Positioning This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location. var source = new ol.source.Vector({ url: 'https://openlayers.org/en/v4.0.1/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: /** @type {olx.control.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); .mapcontainer { position: relative; margin-bottom: 20px; } .map { width: 1000px; height: 600px; } div.ol-zoom { top: 178px; left: 158px; } 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; } <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>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Advanced View Positioning</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>
          .mapcontainer {
            position: relative;
            margin-bottom: 20px;
          }
          .map {
            width: 1000px;
            height: 600px;
          }
          div.ol-zoom {
            top: 178px;
            left: 158px;
          }
          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.0.1/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: /** @type {olx.control.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>