Add cluster features to scattermapbox trace

src/traces/scattermapbox/attributes.js

@@ -26,6 +26,54 @@ module.exports = overrideAll({
     lon: scatterGeoAttrs.lon,
     lat: scatterGeoAttrs.lat,
 
+    cluster: {
+        maxZoom: {
+            valType: 'number',
+            role: 'info',
+            min: 0,
+            max: 22,
+            dflt: 14,
+            description: 'Sets the maximum zoom level for the cluster.',
+        },
+        radius: {
+            role: 'info',
+            valType: 'number',
+            dflt: 50,
+            description: 'Radius of each cluster when clustering points.',
+        },
+        steps: {
+            role: 'info',
+            valType: 'number',
+            arrayOk: true,
+            dflt: -1,
+            min: -1,
+            description: [
+                'Sets the steps for each cluster.'
+            ].join(' ')
+        },
+        color: {
+            role: 'info',
+            valType: 'color',
+            dflt: '#51bbd6',
+            arrayOk: true,
+            editType: 'style',
+            anim: true,
+            description: [
+                'Sets the color for each cluster.'
+            ].join(' ')
+        },
+        size: {
+            role: 'info',
+            valType: 'number',
+            arrayOk: true,
+            dflt: 20,
+            min: 0,
+            description: [
+                'Sets the size for each cluster.'
+            ].join(' ')
+        },
+    },
+
     // locations
     // locationmode
 

src/traces/scattermapbox/convert.js

@@ -32,19 +32,39 @@ module.exports = function convert(gd, calcTrace) {
     var hasLines = subTypes.hasLines(trace);
     var hasMarkers = subTypes.hasMarkers(trace);
     var hasText = subTypes.hasText(trace);
-    var hasCircles = (hasMarkers && trace.marker.symbol === 'circle');
-    var hasSymbols = (hasMarkers && trace.marker.symbol !== 'circle');
+    var hasCircles = hasMarkers && trace.marker.symbol === 'circle';
+    var hasSymbols = hasMarkers && trace.marker.symbol !== 'circle';
+    var hasCluster = trace.cluster.enabled;
 
-    var fill = initContainer();
-    var line = initContainer();
-    var circle = initContainer();
-    var symbol = initContainer();
+    var fill = initContainer('fill');
+    var line = initContainer('line');
+    var circle = initContainer('circle');
+    var symbol = initContainer('symbol');
 
     var opts = {
         fill: fill,
         line: line,
         circle: circle,
-        symbol: symbol
+        symbol: symbol,
+        cluster: {
+            type: 'circle',
+            filter: ['has', 'point_count'],
+            layout: {visibility: 'visible'},
+            paint: {
+                'circle-color': createClusterColors(trace.cluster.color, trace.cluster.steps),
+                'circle-radius': createClusterSizes(trace.cluster.size, trace.cluster.steps)
+            },
+        },
+        clusterCount: {
+            type: 'symbol',
+            filter: ['has', 'point_count'],
+            paint: {},
+            layout: {
+                'text-field': '{point_count_abbreviated}',
+                'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
+                'text-size': 12
+            }
+        }
     };
 
     // early return if not visible or placeholder
@@ -90,6 +110,10 @@ module.exports = function convert(gd, calcTrace) {
         });
     }
 
+    if(hasCircles && hasCluster) {
+        circle.filter = ['!', ['has', 'point_count']];
+    }
+
     if(hasSymbols || hasText) {
         symbol.geojson = makeSymbolGeoJSON(calcTrace, gd);
 
@@ -150,10 +174,12 @@ module.exports = function convert(gd, calcTrace) {
     return opts;
 };
 
-function initContainer() {
+function initContainer(type) {
     return {
+        type: type,
         geojson: geoJsonUtils.makeBlank(),
         layout: { visibility: 'none' },
+        filter: null,
         paint: {}
     };
 }
@@ -208,7 +234,8 @@ function makeCircleOpts(calcTrace) {
 
         features.push({
             type: 'Feature',
-            geometry: {type: 'Point', coordinates: lonlat},
+            id: i + 1,
+            geometry: { type: 'Point', coordinates: lonlat },
             properties: props
         });
     }
@@ -266,7 +293,6 @@ function makeSymbolGeoJSON(calcTrace, gd) {
         getFillFunc(trace.text) :
         blankFillFunc;
 
-
     var features = [];
 
     for(var i = 0; i < calcTrace.length; i++) {
@@ -331,3 +357,32 @@ function blankFillFunc() { return ''; }
 function isBADNUM(lonlat) {
     return lonlat[0] === BADNUM;
 }
+
+function createClusterColors(colors, steps) {
+    var idx, colors_;
+    if(Lib.isArrayOrTypedArray(colors)) {
+        colors_ = ['step', ['get', 'point_count'], colors[0]];
+        for(idx = 1; idx < colors.length; idx++) {
+            colors_.push(steps[idx - 1], colors[idx]);
+        }
+    } else {
+        colors_ = colors;
+    }
+    return colors_;
+}
+
+function createClusterSizes(sizes, steps) {
+    var idx, sizes_;
+    if(
+    Lib.isArrayOrTypedArray(sizes) &&
+    Lib.isArrayOrTypedArray(steps)
+  ) {
+        sizes_ = ['step', ['get', 'point_count'], sizes[0]];
+        for(idx = 1; idx < sizes.length; idx++) {
+            sizes_.push(steps[idx - 1], sizes[idx]);
+        }
+    } else {
+        sizes_ = sizes;
+    }
+    return sizes_;
+}

src/traces/scattermapbox/defaults.js

@@ -28,6 +28,13 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         return;
     }
 
+    coerce('cluster.maxZoom');
+    coerce('cluster.radius');
+    coerce('cluster.steps');
+    coerce('cluster.size');
+    coerce('cluster.color');
+    traceOut.cluster.enabled = traceIn.cluster ? true : false;
+
     coerce('text');
     coerce('texttemplate');
     coerce('hovertext');

src/traces/scattermapbox/hover.js

@@ -14,13 +14,21 @@ var Lib = require('../../lib');
 var getTraceColor = require('../scatter/get_trace_color');
 var fillText = Lib.fillText;
 var BADNUM = require('../../constants/numerical').BADNUM;
+var LAYER_PREFIX = require('../../plots/mapbox/constants').traceLayerPrefix;
 
 module.exports = function hoverPoints(pointData, xval, yval) {
     var cd = pointData.cd;
     var trace = cd[0].trace;
     var xa = pointData.xa;
     var ya = pointData.ya;
     var subplot = pointData.subplot;
+    var clusteredPointsIds = [];
+    var layer = LAYER_PREFIX + trace.uid + '-circle';
+
+    if(trace.cluster.enabled) {
+        var elems = subplot.map.queryRenderedFeatures(null, {layers: [layer]});
+        clusteredPointsIds = elems.map(function(elem) {return elem.id;});
+    }
 
     // compute winding number about [-180, 180] globe
     var winding = (xval >= 0) ?
@@ -34,6 +42,7 @@ module.exports = function hoverPoints(pointData, xval, yval) {
     function distFn(d) {
         var lonlat = d.lonlat;
         if(lonlat[0] === BADNUM) return Infinity;
+        if(trace.cluster.enabled && !clusteredPointsIds.includes(d.i + 1)) return Infinity;
 
         var lon = Lib.modHalf(lonlat[0], 360);
         var lat = lonlat[1];