---
title: "Visualize points as cluster maps in Leaflet | Leaflet"
description: "Visualize data points as cluster maps using Leaflet JS."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Visualize points as cluster maps in Leaflet
This tutorial shows how to visualize points as cluster maps with Leaflet JS. Learn how to group data points into clusters for effective data analysis and visualization.
In this Leaflet example, we use the Leaflet.markercluster plugin to create a cluster map with smooth animations and high-performance.
### NPM module setup
```bash
npm install --save @maptiler/leaflet-maptilersdk leaflet leaflet.markercluster
```
#### main.js
```js
import { MaptilerLayer, MapStyle } from '@maptiler/leaflet-maptilersdk';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet.markercluster';
import 'leaflet.markercluster/dist/MarkerCluster.css';
import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new L.Map('map', {maxZoom: 22}).setView([0, 20], 1);
const mtLayer = new MaptilerLayer({
style: MapStyle.DATAVIZ.LIGHT,
apiKey: key,
}).addTo(map);
const markers = L.markerClusterGroup();
(async () => {
const response = await fetch('https://docs.maptiler.com/sdk-js/assets/earthquakes.geojson');
const jsonData = await response.json();
for (let i = 0; i < jsonData.features.length; i++) {
const feature = jsonData.features[i];
const title = feature.properties.mag;
const marker = L.marker(new L.LatLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]), { title: title });
marker.bindPopup(`${title}`);
markers.addLayer(marker);
}
map.addLayer(markers);
})();
```
#### index.html
```html
Visualize points as cluster maps in Leaflet | NPM example
```
#### style.css
```css
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
```
### Basic JavaScript setup
```html
Cluste
```
Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
## Related examples
### [Plotting millions of points in Leaflet](https://docs.maptiler.com/leaflet/examples/helpers-point/)
Examples
Display millions of points efficiently in Leaflet using maptilersdk.
### [How to create a heatmap layer in Leaflet](https://docs.maptiler.com/leaflet/examples/helpers-heatmap/)
Examples
Create heatmap layers in Leaflet using the maptilersdk plugin.