Merge pull request #1424 from elemoine/vector-api-dragzoom

[vector-api] Minor additions to dragzoom example

examples/dragzoom.html

@@ -32,8 +32,9 @@
 
         <div class="span12">
           <h4 id="title">DragZoom example</h4>
-          <p id="shortdesc">Example of dragzoom interaction</p>
+          <p id="shortdesc">Example of dragzoom interaction.</p>
           <div id="docs">
+            <p>Press SHIFT and drag the map to trigger the interaction.</p>
             <p>See the <a href="dragzoom.js" target="_blank">dragzoom.js source</a> to see how this is done.</p>
             <p>For the moment, only works with the <strong>canvas</strong> renderer.</p>
           </div>

examples/dragzoom.js

@@ -1,12 +1,29 @@
 goog.require('ol.Map');
 goog.require('ol.RendererHint');
 goog.require('ol.View2D');
+goog.require('ol.interaction');
 goog.require('ol.interaction.DragZoom');
 goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
+goog.require('ol.style.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
 
 
 var map = new ol.Map({
+  interactions: ol.interaction.defaults().extend([
+    new ol.interaction.DragZoom({
+      style: new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: 'rgba(255,0,0,1)',
+          width: 2
+        }),
+        fill: new ol.style.Fill({
+          color: 'rgba(155,0,0,0.2)'
+        })
+      })
+    })
+  ]),
   layers: [
     new ol.layer.Tile({
       source: new ol.source.OSM()
@@ -19,6 +36,3 @@ var map = new ol.Map({
     zoom: 2
   })
 });
-
-var dragzoom = new ol.interaction.DragZoom();
-map.addInteraction(dragzoom);