Hit tolerance priority example

examples/hit-tolerance-priority.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: Hit tolerance priority
+shortdesc: Shows bad behavior of hit detection with hit tolerance.
+docs: >
+  Hover over the map and observe how the small circles get a black outline as you hover over them. Is the expected feature getting highlighted?
+tags: "simple, openstreetmap"
+---
+<div id="map" class="map"></div>

examples/hit-tolerance-priority.js

@@ -0,0 +1,84 @@
+import CircleStyle from '../src/ol/style/Circle.js';
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import VectorLayer from '../src/ol/layer/Vector.js';
+import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
+import {Fill, Stroke, Style} from '../src/ol/style.js';
+import {Point} from '../src/ol/geom.js';
+
+const map = new Map({
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1,
+    resolutions: [1],
+  }),
+});
+
+const vectorLayer = new VectorLayer({
+  source: new VectorSource({
+    features: [
+      new Feature({
+        geometry: new Point([0, 0]),
+        color: 'white',
+      }),
+      new Feature({
+        geometry: new Point([-10, 0]),
+        color: 'fuchsia',
+      }),
+      new Feature({
+        geometry: new Point([-10, -10]),
+        color: 'orange',
+      }),
+      new Feature({
+        geometry: new Point([-10, 10]),
+        color: 'cyan',
+      }),
+    ],
+  }),
+  style: (feature) => {
+    return new Style({
+      image: new CircleStyle({
+        radius: 5,
+        fill: new Fill({
+          color: feature.get('color'),
+        }),
+        stroke: new Stroke({
+          color: 'gray',
+          width: 1,
+        }),
+      }),
+    });
+  },
+});
+map.addLayer(vectorLayer);
+
+const highlightFeature = new Feature(new Point([NaN, NaN]));
+highlightFeature.setStyle(
+  new Style({
+    image: new CircleStyle({
+      radius: 5,
+      stroke: new Stroke({
+        color: 'black',
+        width: 2,
+      }),
+    }),
+  })
+);
+vectorLayer.getSource().addFeature(highlightFeature);
+map.on('pointermove', (e) => {
+  const hit = map.forEachFeatureAtPixel(
+    e.pixel,
+    (feature) => {
+      highlightFeature.setGeometry(feature.getGeometry().clone());
+      return true;
+    },
+    {
+      hitTolerance: 10,
+    }
+  );
+  if (!hit) {
+    highlightFeature.setGeometry(new Point([NaN, NaN]));
+  }
+});