74759142d9
Fit accepts either a geometry or an extent. This combines two previously distinct functions into one more flexible call. Also brings the rotations support and options previously available to fitGeometry to extents
35 lines
1.6 KiB
HTML
35 lines
1.6 KiB
HTML
---
|
|
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>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</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>
|