From bd459fde340eff92f7bba24a2f933f471997b3de Mon Sep 17 00:00:00 2001
From: simonseyock <simonseyock@googlemail.com>
Date: Tue, 27 Dec 2016 14:53:58 +0100
Subject: [PATCH 1/2] Moved hit Tolerance parameter to own example.

---
 examples/hit-tolerance.html   | 21 +++++++++
 examples/hit-tolerance.js     | 80 +++++++++++++++++++++++++++++++++++
 examples/select-features.html |  8 ----
 examples/select-features.js   | 37 ++--------------
 4 files changed, 105 insertions(+), 41 deletions(-)
 create mode 100644 examples/hit-tolerance.html
 create mode 100644 examples/hit-tolerance.js

diff --git a/examples/hit-tolerance.html b/examples/hit-tolerance.html
new file mode 100644
index 0000000000..fb1b597d6f
--- /dev/null
+++ b/examples/hit-tolerance.html
@@ -0,0 +1,21 @@
+---
+layout: example.html
+title: Hit Tolerance
+shortdesc: Example of using the hitTolerance parameter.
+docs: >
+  Choose the hit tolerance parameter in pixels and try to click on or near the line feature. If the feature gets hit, it is colored green.
+tags: "hitTolerance"
+---
+<div id="map" class="map"></div>
+<form class="form-inline">
+  <span id="status">&nbsp;No feature got hit.</span>
+  <br />
+  <label>Hit tolerance for selecting features </label>
+  <select id="hitTolerance" class="form-control">
+    <option value="0" selected>0 Pixels</option>
+    <option value="5">5 Pixels</option>
+    <option value="10">10 Pixels</option>
+  </select>
+  <br />
+  Area: &nbsp;<canvas id="circle" style="vertical-align: middle"/>
+</form>
diff --git a/examples/hit-tolerance.js b/examples/hit-tolerance.js
new file mode 100644
index 0000000000..bc3f9612be
--- /dev/null
+++ b/examples/hit-tolerance.js
@@ -0,0 +1,80 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.source.OSM');
+goog.require('ol.source.Vector');
+goog.require('ol.Feature');
+goog.require('ol.geom.LineString');
+goog.require('ol.style.Style');
+goog.require('ol.style.Stroke');
+
+var raster = new ol.layer.Tile({
+  source: new ol.source.OSM()
+});
+
+var style = new ol.style.Style({
+  stroke: new ol.style.Stroke({
+    color: 'black',
+    width: 1
+  })
+});
+
+var feature = new ol.Feature(new ol.geom.LineString([[-4000000, 0], [4000000, 0]]));
+
+var vector = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: [feature]
+  }),
+  style: style
+});
+
+var map = new ol.Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});
+
+var hitTolerance;
+
+var statusElement = document.getElementById('status');
+
+map.on('singleclick', function(e) {
+  var hit = false;
+  map.forEachFeatureAtPixel(e.pixel, function() {
+    hit = true;
+  }, {
+    hitTolerance: hitTolerance
+  });
+  if (hit) {
+    style.getStroke().setColor('green');
+    statusElement.innerHTML = '&nbsp;A feature got hit!';
+  } else {
+    style.getStroke().setColor('black');
+    statusElement.innerHTML = '&nbsp;No feature got hit.';
+  }
+  feature.changed();
+});
+
+var selectHitToleranceElement = document.getElementById('hitTolerance');
+var circleCanvas = document.getElementById('circle');
+
+var changeHitTolerance = function() {
+  hitTolerance = parseInt(selectHitToleranceElement.value, 10);
+
+  var size = 2 * hitTolerance + 2;
+  circleCanvas.width = size;
+  circleCanvas.height = size;
+  var ctx = circleCanvas.getContext('2d');
+  ctx.clearRect(0, 0, size, size);
+  ctx.beginPath();
+  ctx.arc(hitTolerance + 1, hitTolerance + 1, hitTolerance + 0.5, 0, 2 * Math.PI);
+  ctx.fill();
+  ctx.stroke();
+};
+
+selectHitToleranceElement.onchange = changeHitTolerance;
+changeHitTolerance();
diff --git a/examples/select-features.html b/examples/select-features.html
index 697b309a39..c7640d8514 100644
--- a/examples/select-features.html
+++ b/examples/select-features.html
@@ -19,12 +19,4 @@ tags: "select, vector"
       <option value="none">None</option>
     </select>
   <span id="status">&nbsp;0 selected features</span>
-  <br />
-  <label>Hit tolerance for selecting features </label>
-    <select id="hitTolerance" class="form-control">
-      <option value="0" selected>0 Pixels</option>
-      <option value="5">5 Pixels</option>
-      <option value="10">10 Pixels</option>
-    </select>
-    <canvas id="circle" style="vertical-align: middle"/>
 </form>
diff --git a/examples/select-features.js b/examples/select-features.js
index 5d0a658f7a..8d68284e2c 100644
--- a/examples/select-features.js
+++ b/examples/select-features.js
@@ -31,28 +31,23 @@ var map = new ol.Map({
 var select = null;  // ref to currently selected interaction
 
 // select interaction working on "singleclick"
-var selectSingleClick = new ol.interaction.Select({
-  multi: true // multi is used in this example if hitTolerance > 0
-});
+var selectSingleClick = new ol.interaction.Select();
 
 // select interaction working on "click"
 var selectClick = new ol.interaction.Select({
-  condition: ol.events.condition.click,
-  multi: true
+  condition: ol.events.condition.click
 });
 
 // select interaction working on "pointermove"
 var selectPointerMove = new ol.interaction.Select({
-  condition: ol.events.condition.pointerMove,
-  multi: true
+  condition: ol.events.condition.pointerMove
 });
 
 var selectAltClick = new ol.interaction.Select({
   condition: function(mapBrowserEvent) {
     return ol.events.condition.click(mapBrowserEvent) &&
         ol.events.condition.altKeyOnly(mapBrowserEvent);
-  },
-  multi: true
+  }
 });
 
 var selectElement = document.getElementById('type');
@@ -90,27 +85,3 @@ var changeInteraction = function() {
  */
 selectElement.onchange = changeInteraction;
 changeInteraction();
-
-var selectHitToleranceElement = document.getElementById('hitTolerance');
-var circleCanvas = document.getElementById('circle');
-
-var changeHitTolerance = function() {
-  var value = parseInt(selectHitToleranceElement.value, 10);
-  selectSingleClick.setHitTolerance(value);
-  selectClick.setHitTolerance(value);
-  selectPointerMove.setHitTolerance(value);
-  selectAltClick.setHitTolerance(value);
-
-  var size = 2 * value + 2;
-  circleCanvas.width = size;
-  circleCanvas.height = size;
-  var ctx = circleCanvas.getContext('2d');
-  ctx.clearRect(0, 0, size, size);
-  ctx.beginPath();
-  ctx.arc(value + 1, value + 1, value + 0.5, 0, 2 * Math.PI);
-  ctx.fill();
-  ctx.stroke();
-};
-
-selectHitToleranceElement.onchange = changeHitTolerance;
-changeHitTolerance();

From 6e1672bb6ec441c70ff27b4b720f28803a575098 Mon Sep 17 00:00:00 2001
From: simonseyock <simonseyock@gmail.com>
Date: Fri, 30 Dec 2016 12:51:32 +0100
Subject: [PATCH 2/2] changed example docs

---
 examples/hit-tolerance.html | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/examples/hit-tolerance.html b/examples/hit-tolerance.html
index fb1b597d6f..dc55ff516c 100644
--- a/examples/hit-tolerance.html
+++ b/examples/hit-tolerance.html
@@ -1,9 +1,13 @@
 ---
 layout: example.html
 title: Hit Tolerance
-shortdesc: Example of using the hitTolerance parameter.
+shortdesc: Example using the hitTolerance parameter.
 docs: >
-  Choose the hit tolerance parameter in pixels and try to click on or near the line feature. If the feature gets hit, it is colored green.
+  By default, the map.forEachFeatureAtPixel() function only considers features that are directly under the provided
+  pixel. This can make it difficult to interact with features on touch devices. To consider features within some
+  distance of the provided pixel, use the hitTolerance option. For example,
+  map.forEachFeatureAtPixel(pixel, callback, {hitTolerance: 3}) will call the callback with all features that are
+  within three pixels of the provided pixel.
 tags: "hitTolerance"
 ---
 <div id="map" class="map"></div>