Create and style clusters with leaflet
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>