32 lines
1.5 KiB
HTML
32 lines
1.5 KiB
HTML
---
|
|
layout: example.html
|
|
title: Advanced View Positioning
|
|
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>fit</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+Shift+Drag</code> to rotate the map.</p>
|
|
<p><b>Note:</b> This example does not shift the view center. So the zoom
|
|
controls and rotating the map will still use the center of the viewport as anchor.
|
|
To shift the whole view based on a padding, use the `padding` option on the view,
|
|
as shown in the <a href="view-padding.html">view-padding.html</a> example.
|
|
</p>
|
|
tags: "center, rotation, openstreetmap"
|
|
---
|
|
<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="zoomtoswitzerland">Zoom to Switzerland</button> (best fit).<br/>
|
|
<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
|
|
<button id="centerlausanne">Center on Lausanne</button>
|