From e6b1d38cc32bb702cc208c6ae6b7f2f36e03738d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Thu, 4 Mar 2021 20:29:38 +0100
Subject: [PATCH] Add units for, remove unnecessary html

---
 examples/cluster.css     | 15 ---------------
 examples/cluster.html    | 28 ++++++++++++----------------
 examples/cluster.js      | 10 ----------
 src/ol/source/Cluster.js | 20 +++++++++-----------
 4 files changed, 21 insertions(+), 52 deletions(-)
 delete mode 100644 examples/cluster.css

diff --git a/examples/cluster.css b/examples/cluster.css
deleted file mode 100644
index b1f7938dd4..0000000000
--- a/examples/cluster.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.info {
-  min-width: 3em;
-  text-align: right;
-}
-form {
-  display: table;
-}
-form > div  {
-  display: table-row;
-}
-form > div > *  {
-  display: table-cell;
-  white-space: nowrap;
-  padding-right: 5px;
-}
diff --git a/examples/cluster.html b/examples/cluster.html
index 9313ece8d3..ffcba31d83 100644
--- a/examples/cluster.html
+++ b/examples/cluster.html
@@ -8,22 +8,18 @@ tags: "cluster, vector"
 ---
 <div id="map" class="map"></div>
 <form>
-  <div>
-    <label for="distance" cellspan>Cluster distance: </label>
-    <span id="distance-info" class="info"></span>
-    <span>px</span>
-    <input id="distance" type="range" min="0" max="200" step="1" value="40"/>
+  <div class="form-group">
+    <label for="distance" class="col-form-label">Cluster distance</label>
+    <input id="distance" class="form-control-range" type="range" min="0" max="200" step="1" value="40"/>
+    <small class="form-text text-muted">
+      The distance within which features will be clustered together.
+    </small>
   </div>
-  <div>
-    <label for="min-distance">Min distance:</label>
-    <span id="min-distance-info" class="info"></span>
-    <span>px</span>
-    <input id="min-distance" type="range" min="0" max="200" step="1" value="20"/>
-  </div>
-  <div>
-    <span>Clusters:</span>
-    <span id ="num-clusters" class="info"></span>
-    <span></span>
-    <span></span>
+  <div class="form-group">
+    <label for="min-distance" class="col-form-label">Minimum distance</label>
+    <input id="min-distance" class="form-control-range" type="range" min="0" max="200" step="1" value="20"/>
+    <small class="form-text text-muted">
+      The minimum distance between clusters. Can't be larger than the configured distance.
+    </small>
   </div>
 </form>
diff --git a/examples/cluster.js b/examples/cluster.js
index ddc96de897..125325b20f 100644
--- a/examples/cluster.js
+++ b/examples/cluster.js
@@ -14,10 +14,7 @@ import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {boundingExtent} from '../src/ol/extent.js';
 
 const distanceInput = document.getElementById('distance');
-const distanceNode = document.getElementById('distance-info');
 const minDistanceInput = document.getElementById('min-distance');
-const minDistanceNode = document.getElementById('min-distance-info');
-const numClustersNode = document.getElementById('num-clusters');
 
 const count = 20000;
 const features = new Array(count);
@@ -36,11 +33,6 @@ const clusterSource = new Cluster({
   minDistance: parseInt(minDistanceInput.value, 10),
   source: source,
 });
-clusterSource.on('change', function (evt) {
-  numClustersNode.innerText = evt.target.features.length;
-});
-distanceNode.innerText = clusterSource.getDistance();
-minDistanceNode.innerText = clusterSource.getMinDistance();
 
 const styleCache = {};
 const clusters = new VectorLayer({
@@ -86,12 +78,10 @@ const map = new Map({
 });
 
 distanceInput.addEventListener('input', function () {
-  distanceNode.innerText = distanceInput.value;
   clusterSource.setDistance(parseInt(distanceInput.value, 10));
 });
 
 minDistanceInput.addEventListener('input', function () {
-  minDistanceNode.innerText = minDistanceInput.value;
   clusterSource.setMinDistance(parseInt(minDistanceInput.value, 10));
 });
 
diff --git a/src/ol/source/Cluster.js b/src/ol/source/Cluster.js
index a8192b9974..a2fc5dd3e6 100644
--- a/src/ol/source/Cluster.js
+++ b/src/ol/source/Cluster.js
@@ -20,8 +20,13 @@ import {getUid} from '../util.js';
 /**
  * @typedef {Object} Options
  * @property {import("./Source.js").AttributionLike} [attributions] Attributions.
- * @property {number} [distance=20] Distance within which features will be clustered
- * together.
+ * @property {number} [distance=20] Distance in pixels within which features will
+ * be clustered together.
+ * @property {number} [minDistance=0] Minimum distance in pixels between clusters.
+ * Will be capped at the configured distance.
+ * By default no minimum distance is guaranteed. This config can be used to avoid
+ * overlapping icons. As a tradoff, the cluster feature's position will no longer be
+ * the center of all its features.
  * @property {function(Feature):Point} [geometryFunction]
  * Function that takes an {@link module:ol/Feature} as argument and returns an
  * {@link module:ol/geom/Point} as cluster calculation point for the feature. When a
@@ -35,11 +40,6 @@ import {getUid} from '../util.js';
  * ```
  * See {@link module:ol/geom/Polygon~Polygon#getInteriorPoint} for a way to get a cluster
  * calculation point for polygons.
- * @property {number} [minDistance=0] Minimum distance between clusters. Will be capped
- * at the configured distance.
- * By default no minimum distance is guaranteed. This config can be used to avoid
- * overlapping icons. As a tradoff, the cluster feature's position will no longer be
- * the center of all its features.
  * @property {VectorSource} [source] Source.
  * @property {boolean} [wrapX=true] Whether to wrap the world horizontally.
  */
@@ -156,10 +156,8 @@ class Cluster extends VectorSource {
   loadFeatures(extent, resolution, projection) {
     this.source.loadFeatures(extent, resolution, projection);
     if (resolution !== this.resolution) {
-      this.clear();
       this.resolution = resolution;
-      this.cluster();
-      this.addFeatures(this.features);
+      this.refresh();
     }
   }
 
@@ -184,7 +182,7 @@ class Cluster extends VectorSource {
 
   /**
    * The configured minimum distance between clusters.
-   * @return {number} The minimum distance.
+   * @return {number} The minimum distance in pixels.
    * @api
    */
   getMinDistance() {