Search code examples
javascriptmapboxmapbox-gl-jsvector-tiles

How to access clusterProperties of a clustered vector source created using supertiler library?


I am converting a GeoJson of 10 million points to MapBox tiles (.mbtiles) using the supertiler library.

var vList = ['a', 'b', 'c', 'd', 'e', 'f', 'g']; // List of video IDs
supertiler({
    input: '../file.json',
    output: '../file.mbtiles',
    maxZoom: 12,
    initial: () => {
        var t = Object();
        videoList.forEach(v => {
            t[v] = 0
        });
        return t;
    },
    map: (props) => {
        var t = Object();
        videoList.forEach(v => {
            t[v] = v === props.i ? 1 : 0; // i is the video ID - property of a single point
        });
        return t;
    },
    reduce: (accumulated, props) => {

        videoList.forEach(v => {
            accumulated[v] = accumulated[v] + props[v];
        });

    }
}).then(null, (err) => console.log(err));

I am then uploading the .mbtiles files to the Mapbox using their Uploads API so that I can add the data to my application as a vector source.

map.addSource(layerID, {
    type: 'vector',
    url: 'mapbox://octopusmapbox.vLayer',
});

map.addLayer({
    id: `${layerID}-cluster`,
    type: 'circle',
    source: layerID,
    'source-layer': 'geojsonLayer',
    maxzoom: 12.99,
    paint: {
        'circle-color': 'hsla(1, 86%, 65%, 0.5)',
        'circle-radius': [
            'interpolate',
            ['linear'],
            ['get', 'point_count'],
            0,
            20,
            156342,
            200,
        ],
        'circle-opacity': 0.7,
        'circle-stroke-color': '#f35e5b',
        'circle-stroke-width': 1,
    },
});

When I console log the properties of the cluster, I do not see any cluster properties, but only the following:

{
  "cluster": true,
  "cluster_id": 612,
  "point_count": 1399,
  "point_count_abbreviated": "1.4k"
}

How do I access the properties 'a', 'b', 'c', etc.?

The end goal is to achieve something like this.

Thanks in advance.


Solution

  • The vector layers take time to propagate the changes to the source when used in the application. My code is generating the clusterProperties correctly.