From 917950a32bde9f35b26d558daec9914d90b46276 Mon Sep 17 00:00:00 2001
From: Olivier Guyot <olivier.guyot@camptocamp.com>
Date: Mon, 3 Jun 2019 09:53:14 +0200
Subject: [PATCH] Improve icon-sprite-webgl example to include hit detection

---
 examples/icon-sprite-webgl.html |  1 +
 examples/icon-sprite-webgl.js   | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/examples/icon-sprite-webgl.html b/examples/icon-sprite-webgl.html
index f465510d4c..c6dc366cd0 100644
--- a/examples/icon-sprite-webgl.html
+++ b/examples/icon-sprite-webgl.html
@@ -18,3 +18,4 @@ cloak:
     value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
+<div>Current sighting: <span id="info"></span></div>
diff --git a/examples/icon-sprite-webgl.js b/examples/icon-sprite-webgl.js
index 7c0e1da6bd..08f875e634 100644
--- a/examples/icon-sprite-webgl.js
+++ b/examples/icon-sprite-webgl.js
@@ -103,7 +103,7 @@ function loadData() {
 
 loadData();
 
-new Map({
+const map = new Map({
   layers: [
     new TileLayer({
       source: new TileJSON({
@@ -121,3 +121,18 @@ new Map({
     zoom: 2
   })
 });
+
+const info = document.getElementById('info');
+map.on('pointermove', function(evt) {
+  if (map.getView().getInteracting()) {
+    return;
+  }
+  const pixel = evt.pixel;
+  info.innerText = '';
+  map.forEachFeatureAtPixel(pixel, function(feature) {
+    const datetime = feature.get('datetime');
+    const duration = feature.get('duration');
+    const shape = feature.get('shape');
+    info.innerText = 'On ' + datetime + ', lasted ' + duration + ' seconds and had a "' + shape + '" shape.';
+  });
+});