Add units for, remove unnecessary html

examples/cluster.css

@@ -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;
-}

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>

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));
 });
 

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() {