diff --git a/examples/layer-extent.html b/examples/layer-extent.html
index 52ec7210ef..f844b39fb1 100644
--- a/examples/layer-extent.html
+++ b/examples/layer-extent.html
@@ -14,3 +14,4 @@ tags: "extent, tilejson"
 <button type="button" class="btn btn-default" id="southeast">southeast</button>
 <button type="button" class="btn btn-default" id="southwest">southwest</button>
 <button type="button" class="btn btn-default" id="world">world</button>
+<button type="button" class="btn btn-default" id="draw">draw</button>
diff --git a/examples/layer-extent.js b/examples/layer-extent.js
index 474469d4da..1772d5db2b 100644
--- a/examples/layer-extent.js
+++ b/examples/layer-extent.js
@@ -3,6 +3,8 @@ goog.require('ol.View');
 goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.TileJSON');
+goog.require('ol.interaction.Draw');
+goog.require('ol.interaction.DragRotateAndZoom');
 
 function transform(extent) {
   return ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
@@ -43,6 +45,37 @@ var map = new ol.Map({
   })
 });
 
+function box(coordinates, geometry) {
+  if (!geometry) {
+    geometry = new ol.geom.Polygon(null);
+  }
+  var start = coordinates[0];
+  var end = coordinates[1];
+
+  geometry.setCoordinates([
+    [start, [start[0], end[1]], end, [end[0], start[1]], start]
+  ]);
+  return geometry;
+}
+
+
+var draw = new ol.interaction.Draw({
+  type: /** @type {ol.geom.GeometryType} */ ('LineString'),
+  geometryFunction: box,
+  maxPoints: 2
+});
+
+draw.on('drawend', function(ev) {
+  var extent = ev.feature.getGeometry().getExtent();
+  overlay.setExtent(extent);
+});
+
+map.addInteraction(new ol.interaction.DragRotateAndZoom());
+
+document.getElementById('draw').onclick = function() {
+  map.addInteraction(draw);
+};
+
 for (var key in extents) {
   document.getElementById(key).onclick = function(event) {
     overlay.setExtent(extents[event.target.id]);