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

Advanced View Positioning example

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.

center, rotation, openstreetmap
<!DOCTYPE html>
<html>
<head>
<title>Advanced View Positioning example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.9.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.9.0/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="container-fluid">

<div class="row-fluid">
  <div class="span12 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>
</div>
<div class="row-fluid">
  <div class="span12">
    <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>
  </div>
</div>

</div>
<script>
var source = new ol.source.Vector({
  url: '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());
  var size = /** @type {ol.Size} */ (map.getSize());
  view.fit(
      polygon,
      size,
      {
        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());
  var size = /** @type {ol.Size} */ (map.getSize());
  view.fit(
      polygon,
      size,
      {
        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());
  var size = /** @type {ol.Size} */ (map.getSize());
  view.fit(
      polygon,
      size,
      {
        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());
  var size = /** @type {ol.Size} */ (map.getSize());
  view.fit(
      point,
      size,
      {
        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>