diff --git a/examples/layer-extent.html b/examples/layer-extent.html new file mode 100644 index 0000000000..95bc7d041c --- /dev/null +++ b/examples/layer-extent.html @@ -0,0 +1,68 @@ + + + + + + + + + + + Limited Layer Extent + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Limited layer extent

+

Restricting layer rendering to a limited extent.

+
+

+ This example uses the layer.setExtent() method to + modify the extent of the overlay layer. Use the controls below + to limit rendering based on an extent. +

+

+

+ + + + + +
+

+

+ See the layer-extent.js + source for details on how this is done. +

+
+
extent, tilejson
+
+ +
+ +
+ + + + + + + diff --git a/examples/layer-extent.js b/examples/layer-extent.js new file mode 100644 index 0000000000..fca59929fa --- /dev/null +++ b/examples/layer-extent.js @@ -0,0 +1,50 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Tile'); +goog.require('ol.proj'); +goog.require('ol.source.TileJSON'); + +function transform(extent) { + return ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857'); +} + +var extents = { + northwest: transform([-180, 0, 0, 85]), + northeast: transform([0, 0, 180, 85]), + southeast: transform([0, -85, 180, 0]), + southwest: transform([-180, -85, 0, 0]), + world: transform([-180, -85, 180, 85]) +}; + +var base = new ol.layer.Tile({ + source: new ol.source.TileJSON({ + url: 'http://api.tiles.mapbox.com/v3/' + + 'mapbox.world-black.jsonp', + crossOrigin: 'anonymous' + }) +}); + +var overlay = new ol.layer.Tile({ + extent: extents.northwest, + source: new ol.source.TileJSON({ + url: 'http://api.tiles.mapbox.com/v3/' + + 'mapbox.world-glass.jsonp', + crossOrigin: 'anonymous' + }) +}); + +var map = new ol.Map({ + layers: [base, overlay], + renderer: exampleNS.getRendererFromQueryString(), + target: 'map', + view: new ol.View({ + center: [0, 0], + zoom: 1 + }) +}); + +for (var key in extents) { + document.getElementById(key).onclick = function(event) { + overlay.setExtent(extents[event.target.id]); + }; +}