Point Clustering with OpenLayers

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/ol@10.10.0/ol.css" />
<script src="https://unpkg.com/ol@10.10.0/dist/ol.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var features = [];
for (var i = 0; i < 200; i++) {
  features.push(new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([2.3 + Math.random() * 0.3, 48.8 + Math.random() * 0.15]))
  }));
}
var clusterSource = new ol.source.Cluster({
  distance: 40,
  source: new ol.source.Vector({ features: features })
});
var clusterLayer = new ol.layer.Vector({
  source: clusterSource,
  style: function(feature) {
    var size = feature.get('features').length;
    return new ol.style.Style({
      image: new ol.style.Circle({ radius: 10 + Math.min(size, 20), fill: new ol.style.Fill({ color: size > 5 ? '#e63946' : '#457b9d' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }),
      text: new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: '#fff' }), font: 'bold 12px sans-serif' })
    });
  }
});
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
    clusterLayer
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.45, 48.87]), zoom: 11 })
});

</script>
</body>
</html>

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';

var features = [];
for (var i = 0; i < 200; i++) {
  features.push(new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([2.3 + Math.random() * 0.3, 48.8 + Math.random() * 0.15]))
  }));
}
var clusterSource = new ol.source.Cluster({
  distance: 40,
  source: new ol.source.Vector({ features: features })
});
var clusterLayer = new ol.layer.Vector({
  source: clusterSource,
  style: function(feature) {
    var size = feature.get('features').length;
    return new ol.style.Style({
      image: new ol.style.Circle({ radius: 10 + Math.min(size, 20), fill: new ol.style.Fill({ color: size > 5 ? '#e63946' : '#457b9d' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }),
      text: new ol.style.Text({ text: size.toString(), fill: new ol.style.Fill({ color: '#fff' }), font: 'bold 12px sans-serif' })
    });
  }
});
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
    clusterLayer
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.45, 48.87]), zoom: 11 })
});