Show hasFeatureAtPixel in example

examples/icon-sprite-webgl.html

@@ -30,7 +30,7 @@
 
       <div class="row-fluid">
 
-        <div class="span12">
+        <div class="span8">
           <h4 id="title">Icon sprite with WebGL example</h4>
           <p id="shortdesc">Icon sprite with WebGL.</p>
           <div id="docs">
@@ -39,6 +39,11 @@
           </div>
           <div id="tags">webgl, icon, sprite, vector, point</div>
         </div>
+        <div class="span2 offset2">
+          <div id="info" class="alert alert-success">
+            &nbsp;
+          </div>
+        </div>
 
       </div>
 

examples/icon-sprite-webgl.js

@@ -109,3 +109,31 @@ var featureOverlay = new ol.FeatureOverlay({
   }),
   features: overlayFeatures
 });
+
+map.on('click', function(evt) {
+  var info = document.getElementById('info');
+  info.innerHTML =
+      'Hold on a second, while I catch those butterflies for you ...';
+
+  window.setTimeout(function() {
+    var features = [];
+    map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
+      features.push(features);
+      return false;
+    });
+
+    if (features.length === 1) {
+      info.innerHTML = 'Got one butterfly';
+    } else if (features.length > 1) {
+      info.innerHTML = 'Got ' + features.length + ' butterflies';
+    } else {
+      info.innerHTML = 'Couldn\'t catch a single butterfly';
+    }
+  }, 1);
+});
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  var hit = map.hasFeatureAtPixel(pixel);
+  map.getTarget().style.cursor = hit ? 'pointer' : '';
+});