---
template: "example.html"
title: "Advanced View Positioning example"
shortdesc: "This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location."
docs: >
  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 <code>fitGeometry</code> method
  is used to fit a geometry in the view with the same padding. The
  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</code>+<code>Shift</code>+drag to rotate the map.</p>
tags: "center, rotation, openstreetmap"
---
<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>