Add hit detection to image-vector-layer example

examples/image-vector-layer.html

@@ -30,22 +30,28 @@
 
       <div class="row-fluid">
 
-        <div class="span12">
+        <div class="span8">
           <h4 id="title">Image vector example</h4>
           <p id="shortdesc">Example of an image vector layer.</p>
           <div id="docs">
             <p>This example uses a <code>ol.source.ImageVector</code> source. That source gets vector features from the
-            <code>ol.source.Vector</code> it's configured with and draw these features to an HTML5 canvas element that
+            <code>ol.source.Vector</code> it's configured with, and draw these features to an HTML5 canvas element that
             is then used as the image of an image layer.</p>
             <p>See the <a href="image-vector-layer.js" target="_blank">image-vector-layer.js source</a> to see how this is done.</p>
           </div>
           <div id="tags">vector, image</div>
         </div>
+        <div class="span4">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
 
       </div>
 
     </div>
 
+    <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=image-vector-layer" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 

examples/image-vector-layer.js

@@ -1,8 +1,9 @@
 goog.require('ol.Map');
-goog.require('ol.RendererHints');
+goog.require('ol.RendererHint');
 goog.require('ol.View2D');
 goog.require('ol.layer.Image');
 goog.require('ol.layer.Tile');
+goog.require('ol.render.FeaturesOverlay');
 goog.require('ol.source.GeoJSON');
 goog.require('ol.source.ImageVector');
 goog.require('ol.source.MapQuest');
@@ -37,10 +38,63 @@ var map = new ol.Map({
       })
     })
   ],
-  renderers: ol.RendererHints.createFromQueryData(),
+  renderer: ol.RendererHint.CANVAS,
   target: 'map',
   view: new ol.View2D({
     center: [0, 0],
     zoom: 1
   })
 });
+
+var highlightStyleArray = [new ol.style.Style({
+  stroke: new ol.style.Stroke({
+    color: '#f00',
+    width: 1
+  }),
+  fill: new ol.style.Fill({
+    color: 'rgba(255,0,0,0.1)'
+  })
+})];
+
+var featuresOverlay = new ol.render.FeaturesOverlay({
+  map: map,
+  styleFunction: function(feature, resolution) {
+    return highlightStyleArray;
+  }
+});
+
+var highlight;
+var displayFeatureInfo = function(pixel) {
+
+  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+    return feature;
+  });
+
+  var info = document.getElementById('info');
+  if (feature) {
+    info.innerHTML = feature.getId() + ': ' + feature.get('name');
+  } else {
+    info.innerHTML = ' ';
+  }
+
+  if (feature !== highlight) {
+    if (highlight) {
+      featuresOverlay.removeFeature(highlight);
+    }
+    if (feature) {
+      featuresOverlay.addFeature(feature);
+    }
+    highlight = feature;
+  }
+
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('singleclick', function(evt) {
+  var pixel = evt.getPixel();
+  displayFeatureInfo(pixel);
+});