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/[email protected]/dist/trackasia-gl.js"></script>
<link href="https://unpkg.com/[email protected]/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": 103.8198,
"lat": 1.3521,
"title": "Title 1"
},
{
"lng": 103.82,
"lat": 1.3525,
"title": "Title 2"
},
{
"lng": 103.8196,
"lat": 1.3518,
"title": "Title 3"
},
{
"lng": 103.8202,
"lat": 1.352354,
"title": "Title 4"
},
{
"lng": 103.821,
"lat": 1.3527,
"title": "Title 5"
},
{
"lng": 103.8185,
"lat": 1.3515,
"title": "Title 6"
},
{
"lng": 103.818,
"lat": 1.352,
"title": "Title 7"
},
{
"lng": 103.823,
"lat": 1.354,
"title": "Title 8"
},
{
"lng": 103.8175,
"lat": 1.351,
"title": "Title 9"
},
{
"lng": 103.824,
"lat": 1.3522,
"title": "Title 10"
},
{
"lng": 103.827,
"lat": 1.3526,
"title": "Title 11"
},
{
"lng": 103.8272,
"lat": 1.3529,
"title": "Title 12"
},
{
"lng": 103.8271,
"lat": 1.3518,
"title": "Title 13"
},
{
"lng": 103.8273,
"lat": 1.3523,
"title": "Title 14"
},
{
"lng": 103.8265,
"lat": 1.3624,
"title": "Title 15"
},
{
"lng": 103.8263,
"lat": 1.3621,
"title": "Title 16"
},
{
"lng": 103.8261,
"lat": 1.3626,
"title": "Title 17"
},
{
"lng": 103.8269,
"lat": 1.3642,
"title": "Title 18"
},
{
"lng": 103.826,
"lat": 1.3615,
"title": "Title 19"
},
{
"lng": 103.8274,
"lat": 1.3622,
"title": "Title 20"
}
];
 
var map = L.map('map', {
maxZoom: 17,
zoom: 12,
center: {"lat":1.3302,"lng":103.8104}
});
 
L.trackasiaGL({
style: 'https://sg-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>