---
layout: example.html
title: Clustered Features
shortdesc: Example of using ol/source/Cluster.
docs: >
  This example shows how to do clustering on point features.
tags: "cluster, vector"
resources:
  - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
---
<div id="map" class="map"></div>
<form>
  <div class="form-group">
    <label for="distance" class="col-form-label pb-0">Cluster distance</label>
    <input id="distance" class="form-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 class="form-group">
    <label for="min-distance" class="col-form-label pb-0">Minimum distance</label>
    <input id="min-distance" class="form-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>