diff --git a/examples/min-zoom.html b/examples/min-zoom.html new file mode 100644 index 0000000000..6f03f6d311 --- /dev/null +++ b/examples/min-zoom.html @@ -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 minZoom option for a view limits how far out you can + zoom. This property can be updated by calling view.setMinZoom(newMinZoom). + 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" +--- +
diff --git a/examples/min-zoom.js b/examples/min-zoom.js new file mode 100644 index 0000000000..af35ff4405 --- /dev/null +++ b/examples/min-zoom.js @@ -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); + } +});