Marker Clustering with Leaflet

<!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/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>

<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = L.map('map').setView([48.8566, 2.3522], 12);
L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
  tileSize: 256,
  attribution: '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
const markers = L.markerClusterGroup();
const points = [
  [48.8584, 2.2945], [48.8606, 2.3376], [48.8530, 2.3499],
  [48.8738, 2.2950], [48.8462, 2.3464], [48.8620, 2.3522],
  [48.8490, 2.3080], [48.8650, 2.3210], [48.8430, 2.3680],
  [48.8710, 2.3150], [48.8550, 2.2830], [48.8670, 2.3600]
];
points.forEach(p => markers.addLayer(L.marker(p)));
map.addLayer(markers);

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

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const map = L.map('map').setView([48.8566, 2.3522], 12);
L.tileLayer('https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', {
  tileSize: 256,
  attribution: '&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
const markers = L.markerClusterGroup();
const points = [
  [48.8584, 2.2945], [48.8606, 2.3376], [48.8530, 2.3499],
  [48.8738, 2.2950], [48.8462, 2.3464], [48.8620, 2.3522],
  [48.8490, 2.3080], [48.8650, 2.3210], [48.8430, 2.3680],
  [48.8710, 2.3150], [48.8550, 2.2830], [48.8670, 2.3600]
];
points.forEach(p => markers.addLayer(L.marker(p)));
map.addLayer(markers);