Create and style clusters with leaflet | TrackAsia GL JS Docs

Use TrackAsia GL JS' built-in functions to visualize points as clusters.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Create and style clusters with leaflet</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.js"></script>
<link href="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<!-- add to header -->
<!-- Leaflet -->
<link
rel="stylesheet"
href="https://unpkg.com/trackasia-leaflet@^1.9.5/dist/leaflet.css"
/>
<script src="https://unpkg.com/trackasia-leaflet@^1.9.5/dist/leaflet.js"></script>
 
<!-- leaflet marker cluster -->
<script src="https://unpkg.com/trackasia-leaflet-markercluster@^1.5.4/dist/leaflet.markercluster.js"></script>
<link
href="https://unpkg.com/trackasia-leaflet-markercluster@^1.5.4/dist/MarkerCluster.css"
rel="stylesheet"
/>
<link
href="https://unpkg.com/trackasia-leaflet-markercluster@^1.5.4/dist/MarkerCluster.Default.css"
rel="stylesheet"
/>
<!-- binding trackasia-gl for leaflet -->
<script src="https://unpkg.com/trackasia-gl-leaflet@^0.0.21/leaflet-trackasia-gl.js"></script>
 
<div id="map"></div>
<script>
const addressPoints = [
{
"lng": 106.6605172,
"lat": 10.762622,
"title": "Title 1"
},
{
"lng": 106.6604123572,
"lat": 10.7629623522,
"title": "Title 2"
},
{
"lng": 106.660517542,
"lat": 10.7625627542,
"title": "Title 3"
},
{
"lng": 106.660517542,
"lat": 10.7626422,
"title": "Title 4"
},
{
"lng": 106.663054172,
"lat": 10.76262422,
"title": "Title 5"
},
{
"lng": 106.6603172,
"lat": 10.7624562242,
"title": "Title 6"
},
{
"lng": 106.66012472,
"lat": 10.76262242,
"title": "Title 7"
},
{
"lng": 106.66420172,
"lat": 10.7642425622,
"title": "Title 8"
},
{
"lng": 106.660154572,
"lat": 10.76224622,
"title": "Title 9"
},
{
"lng": 106.66440172,
"lat": 10.762622,
"title": "Title 10"
},
{
"lng": 106.86605172,
"lat": 10.762622,
"title": "Title 11"
},
{
"lng": 106.86604123572,
"lat": 10.7629623522,
"title": "Title 12"
},
{
"lng": 106.8660517542,
"lat": 10.7625627542,
"title": "Title 13"
},
{
"lng": 106.8660517542,
"lat": 10.7626422,
"title": "Title 14"
},
{
"lng": 106.7663054172,
"lat": 10.86262422,
"title": "Title 15"
},
{
"lng": 106.76603172,
"lat": 10.8624562242,
"title": "Title 16"
},
{
"lng": 106.766012472,
"lat": 10.86262242,
"title": "Title 17"
},
{
"lng": 106.766420172,
"lat": 10.8642425622,
"title": "Title 18"
},
{
"lng": 106.7660154572,
"lat": 10.86224622,
"title": "Title 19"
},
{
"lng": 106.766440172,
"lat": 10.862622,
"title": "Title 20"
}
];
 
var map = L.map('map', {
maxZoom: 17,
zoom: 6,
center: {"lat":10.762622,"lng":106.660172}
});
 
L.trackasiaGL({
style: 'https://maps.track-asia.com/styles/v1/streets.json?key=public_key'
}).addTo(map);
 
var markers = L.markerClusterGroup();
 
for (let i = 0; i < addressPoints.length; i++) {
let a = addressPoints[i];
// https://leafletjs.com/reference.html#marker
var marker = L.marker(new L.latLng({ lat: a['lat'], lng: a['lng'] }), {
title: a['title']
});
marker.bindPopup(a['title']);
markers.addLayer(marker);
}
 
map.addLayer(markers);
</script>
 
</body>
</html>