Example demonstrating view.setMinZoom()
This commit is contained in:
12
examples/min-zoom.html
Normal file
12
examples/min-zoom.html
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
layout: example.html
|
||||
title: View Min-Zoom
|
||||
shortdesc: Demonstrates how the view's minimum zoom level can be changed.
|
||||
docs: >
|
||||
The <code>minZoom</code> option for a view limits how far out you can
|
||||
zoom. This property can be updated by calling <code>view.setMinZoom(newMinZoom)</code>.
|
||||
In this example, the minimum zoom level is set so that you only see one
|
||||
world at a time. Resize your browser window to change the threshold.
|
||||
tags: "min, zoom"
|
||||
---
|
||||
<div id="map" class="map"></div>
|
||||
36
examples/min-zoom.js
Normal file
36
examples/min-zoom.js
Normal file
@@ -0,0 +1,36 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
var viewport = document.getElementById('map');
|
||||
|
||||
function getMinZoom() {
|
||||
var width = viewport.clientWidth;
|
||||
return Math.ceil(Math.LOG2E * Math.log(width / 256));
|
||||
}
|
||||
|
||||
var initialZoom = getMinZoom();
|
||||
|
||||
var view = new ol.View({
|
||||
center: [0, 0],
|
||||
minZoom: initialZoom,
|
||||
zoom: initialZoom
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
view: view
|
||||
});
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
var minZoom = getMinZoom();
|
||||
if (minZoom !== view.getMinZoom()) {
|
||||
view.setMinZoom(minZoom);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user