24 lines
983 B
HTML
24 lines
983 B
HTML
---
|
|
layout: example.html
|
|
title: View Padding
|
|
shortdesc: This example demonstrates the use of the view's padding option.
|
|
docs: >
|
|
This example demonstrates how a map's view can be configured to accommodate
|
|
for viewport space covered by other elements.
|
|
If the map viewport is partially covered with other content (overlays) along
|
|
its edges, the `padding` option allows to shift the center of the viewport away from
|
|
that content. The shifted viewport center will also be the anchor for zooming in and
|
|
out with the Zoom controls, and for rotating.
|
|
<p>Use <code>Alt+Shift+Drag</code> to rotate the map.</p>
|
|
tags: "center, padding, view, shift"
|
|
---
|
|
<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>
|
|
<button id="zoomtoswitzerland">Zoom to Switzerland</button>
|
|
<button id="centerlausanne">Center on Lausanne</button>
|