| 1 | ---
|
| 2 | layout: example.html
|
| 3 | title: Advanced View Positioning
|
| 4 | shortdesc: This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location.
|
| 5 | docs: >
|
| 6 | This example demonstrates how a map's view can be
|
| 7 | adjusted so a geometry or coordinate is positioned at a specific
|
| 8 | pixel location. The map above has top, right, bottom, and left
|
| 9 | padding applied inside the viewport. The view's <code>fit</code> method
|
| 10 | is used to fit a geometry in the view with the same padding. The
|
| 11 | view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
|
| 12 | at a specific pixel location (the center of the black box).
|
| 13 | <p>Use <code>Alt+Shift+Drag</code> to rotate the map.</p>
|
| 14 | tags: "center, rotation, openstreetmap"
|
| 15 | ---
|
| 16 | <div class="mapcontainer">
|
| 17 | <div id="map" class="map"></div>
|
| 18 | <div class="padding-top"></div>
|
| 19 | <div class="padding-left"></div>
|
| 20 | <div class="padding-right"></div>
|
| 21 | <div class="padding-bottom"></div>
|
| 22 | <div class="center"></div>
|
| 23 | </div>
|
| 24 | <button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
|
| 25 | <button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
|
| 26 | <button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
|
| 27 | <button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
|
| 28 | <button id="centerlausanne">Center on Lausanne</button>
|