Create clusters with TomTom web SDK

Question

I'm using TomTom to show a map on a website with this simple code:

let map = tomtom.L.map('map', {
    key: 'MY_API_KEY',
    source: 'vector',
    basePath: 'public/sdk/tomtom',
    center: mapCenter,
    zoom: 4
});

// then retrieving data from an AJAX call
$.each(data, function (i, v) {
    let marker = tomtom.L.marker([parseFloat(v["lat"]),parseFloat(v["lng"])], {
        icon: tomtom.L.icon({
            iconUrl: 'public/images/' + v['icon'],
            iconSize: [30, 45],
            iconAnchor: [15, 45],
            popupAnchor: [0, -45]
        })
    }).addTo(map);

    marker.bindPopup(v['contentString']);
}

There are many markers to show, so I'm looking to introduce clusters, but I can only find the documentation about clustering on Android SDK, while I need to do so using Web SDK. Is it possible to introduce clustering using the web SDK? How? Or is it not possible?

Answer 1

There is an example that is showing how to do that: https://developer.tomtom.com/maps-sdk-web/functional-examples#markers-clustering

In short: instead of adding directly to map .addTo(map) try to:

var markers = tomtom.L.markerClusterGroup();
markers.addLayer(marker);
map.addLayer(markers);