49662b019c
This introduces a breaking change. This options replaces the various `constrainResolution` options on interactions and the `fit` method. Since constraints are now the responsibility of the View, the fact that intermediary zoom levels are allowed or not is now set in the view options. By default, the view resolution is unconstrained.
27 lines
1.2 KiB
HTML
27 lines
1.2 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>
|
|
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>
|