Fixed document ref in hitdetect

fixed lint

examples/offscreen-canvas.css

@@ -1,5 +1,6 @@
 .map {
   background: rgba(232, 230, 223, 1);
+  position: relative;
 }
 .map .ol-rotate {
   left: .5em;
@@ -7,3 +8,16 @@
   top: auto;
   right: auto;
 }
+
+.info {
+  z-index: 1;
+  opacity: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  background: rgba(0,60,136,0.7);
+  color: white;
+  border: 0;
+  transition: opacity 100ms ease-in;
+}

examples/offscreen-canvas.html

@@ -11,4 +11,6 @@ cloak:
     value: Get your own API key at https://www.maptiler.com/cloud/
 
 ---
-<div id="map" class="map"></div>
+<div id="map" class="map">
+  <pre id="info" class="info"/>
+</div>

examples/offscreen-canvas.js

@@ -99,6 +99,17 @@ const map = new Map({
 });
 map.addControl(new FullScreen());
 
+map.on('pointermove', function (evt) {
+  if (evt.dragging) {
+    return;
+  }
+  const pixel = map.getEventPixel(evt.originalEvent);
+  worker.postMessage({
+    action: 'requestFeatures',
+    pixel: pixel,
+  });
+});
+
 // Worker messaging and actions
 worker.addEventListener('message', (message) => {
   if (message.data.action === 'loadImage') {
@@ -119,7 +130,9 @@ worker.addEventListener('message', (message) => {
         }
       );
     });
-    image.src = event.data.src;
+    image.src = message.data.src;
+  } else if (message.data.action === 'getFeatures') {
+    showInfo(message.data.features);
   } else if (message.data.action === 'requestRender') {
     // Worker requested a new render frame
     map.render();
@@ -137,3 +150,19 @@ worker.addEventListener('message', (message) => {
     rendering = false;
   }
 });
+
+const info = document.getElementById('info');
+function showInfo(propertiesFromFeatures) {
+  if (propertiesFromFeatures.length == 0) {
+    info.innerText = '';
+    info.style.opacity = 0;
+    return;
+  }
+  const properties = propertiesFromFeatures.map((e) =>
+    Object.keys(e)
+      .filter((key) => !key.includes(':'))
+      .reduce((newObj, currKey) => ((newObj[currKey] = e[currKey]), newObj), {})
+  );
+  info.innerText = JSON.stringify(properties, null, 2);
+  info.style.opacity = 1;
+}

examples/offscreen-canvas.worker.js

@@ -111,7 +111,6 @@ function loadStyles() {
 }
 
 // Minimal map-like functionality for rendering
-
 const tileQueue = new TileQueue(
   (tile, tileSourceKey, tileCenter, tileResolution) =>
     tilePriorityFunction(
@@ -128,6 +127,23 @@ const maxTotalLoading = 8;
 const maxNewLoads = 2;
 
 worker.addEventListener('message', (event) => {
+  if (event.data.action === 'requestFeatures') {
+    const layersInView = layers.filter((l) =>
+      inView(l.getLayerState(), frameState.viewState)
+    );
+    const observables = layersInView.map((l) =>
+      l.getFeatures(event.data.pixel)
+    );
+    Promise.all(observables).then((res) => {
+      const features = res.flat();
+      worker.postMessage({
+        action: 'getFeatures',
+        features: JSON.parse(stringify(features.map((e) => e.getProperties()))),
+      });
+    });
+    return;
+  }
+
   if (event.data.action !== 'render') {
     return;
   }