diff --git a/examples/min-max-resolution.html b/examples/min-max-resolution.html new file mode 100644 index 0000000000..37c8f43314 --- /dev/null +++ b/examples/min-max-resolution.html @@ -0,0 +1,65 @@ + + + + + + + + + + + Min/max resolution example + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Min/max resolution example

+

Show/hide layers depending on current view resolution.

+
+

+ Zoom in twice: the MapBox layer should hide whereas the OSM layer should be shown. +

+

+ If you continue to zoom in, you'll see the OSM layer also disappear. +

+

+ The rendering of the layers are here controlled using minResolution and maxResolution options. +

+

See the min-max-resolution.js source to see how this is done.

+
+
minResolution, maxResolution, resolution
+
+ +
+ +
+ + + + + + diff --git a/examples/min-max-resolution.js b/examples/min-max-resolution.js new file mode 100644 index 0000000000..3a05f8bd8d --- /dev/null +++ b/examples/min-max-resolution.js @@ -0,0 +1,33 @@ +goog.require('ol.Map'); +goog.require('ol.View2D'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.OSM'); +goog.require('ol.source.TileJSON'); + + +/** + * Create the map. + */ +var map = new ol.Map({ + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM(), + minResolution: 200, + maxResolution: 2000 + }), + new ol.layer.Tile({ + source: new ol.source.TileJSON({ + url: 'http://api.tiles.mapbox.com/v3/' + + 'mapbox.natural-earth-hypso-bathy.jsonp', + crossOrigin: 'anonymous' + }), + minResolution: 2000, + maxResolution: 20000 + }) + ], + target: 'map', + view: new ol.View2D({ + center: [653600, 5723680], + zoom: 5 + }) +});