fix: event stroke and count color

src/layers/ClientCluster.js

@@ -1,7 +1,7 @@
 import Cluster from './Cluster'
 import { featureCollection } from '../utils/geometry'
 import { clusterLayer, clusterCountLayer } from '../utils/layers'
-import { eventStrokeColor as strokeColor } from '../utils/style'
+import { eventStrokeColor, clusterCountColor } from '../utils/style'
 
 class ClientCluster extends Cluster {
     createSource() {
@@ -13,13 +13,17 @@ class ClientCluster extends Cluster {
 
     createLayers() {
         const id = this.getId()
-        const { fillColor: color } = this.options
+        const {
+            fillColor: color,
+            strokeColor = eventStrokeColor,
+            countColor = clusterCountColor,
+        } = this.options
 
         super.createLayers()
 
         // Clusters
         this.addLayer(clusterLayer({ id, color, strokeColor }), true)
-        this.addLayer(clusterCountLayer({ id }))
+        this.addLayer(clusterCountLayer({ id, color: countColor }))
     }
 
     onAdd() {

src/layers/Cluster.js

@@ -17,7 +17,7 @@ class Cluster extends Layer {
     setFeatures(data = []) {
         super.setFeatures(data) // Assigns id to each feature
 
-        this._hasPolygons = data.some(f => f.geometry.type === 'Polygon');
+        this._hasPolygons = data.some(f => f.geometry.type === 'Polygon')
 
         if (this._hasPolygons) {
             this._polygons = {}
@@ -34,7 +34,7 @@ class Cluster extends Layer {
                         properties: {
                             ...f.properties,
                             isPolygon: true,
-                        }
+                        },
                     }
                 }
 
@@ -55,20 +55,42 @@ class Cluster extends Layer {
 
         this.setSource(`${id}-polygons`, {
             type: 'geojson',
-            data: featureCollection()
+            data: featureCollection(),
         })
     }
 
     createLayers() {
         const id = this.getId()
-        const { fillColor: color, radius } = this.options
+        const {
+            fillColor: color,
+            strokeColor = eventStrokeColor,
+            radius,
+        } = this.options
 
         // Non-clustered points
-        this.addLayer(pointLayer({ id, color, strokeColor: eventStrokeColor, radius, filter: isClusterPoint }), true)
+        this.addLayer(
+            pointLayer({
+                id,
+                color,
+                strokeColor,
+                radius,
+                filter: isClusterPoint,
+            }),
+            true
+        )
 
         // Non-clustered polygons
-        this.addLayer(polygonLayer({ id, color, source: `${id}-polygons` }), true)
-        this.addLayer(outlineLayer({ id, color: eventStrokeColor, source: `${id}-polygons` }))
+        this.addLayer(
+            polygonLayer({ id, color, source: `${id}-polygons` }),
+            true
+        )
+        this.addLayer(
+            outlineLayer({
+                id,
+                color: strokeColor,
+                source: `${id}-polygons`,
+            })
+        )
     }
 
     setOpacity(opacity) {
@@ -152,26 +174,31 @@ class Cluster extends Layer {
 
     updatePolygons = () => {
         // Returns polygons visible on the map (within the map view and not clustered)
-        const polygons = this.getSourceFeatures().filter(f => f.properties.isPolygon)
+        const polygons = this.getSourceFeatures().filter(
+            f => f.properties.isPolygon
+        )
         let polygonIds = []
 
         if (polygons.length) {
             // Using set as features might be returned multipe times due to tiling
-            polygonIds = [...new Set(polygons.map(f => f.id))].sort()      
-        }   
+            polygonIds = [...new Set(polygons.map(f => f.id))].sort()
+        }
 
         // Only update source if there is a change
-        if (polygonIds.length !== this._polygonsOnMap.length || polygonIds.some((id, index) => id !== this._polygonsOnMap[index])) {
+        if (
+            polygonIds.length !== this._polygonsOnMap.length ||
+            polygonIds.some((id, index) => id !== this._polygonsOnMap[index])
+        ) {
             this._polygonsOnMap = polygonIds
 
             const features = polygonIds.map(id => this._polygons[id])
             const source = this.getMapGL().getSource(`${this.getId()}-polygons`)
-    
+
             source.setData(featureCollection(features))
-        } 
+        }
     }
 
-    // Returns source features 
+    // Returns source features
     getSourceFeatures() {
         return this.getMapGL().querySourceFeatures(this.getId())
     }

src/layers/Events.js

@@ -13,19 +13,22 @@ class Events extends Layer {
 
     createLayers() {
         const id = this.getId()
-        const { fillColor: color, radius, buffer, bufferStyle } = this.options
+        const {
+            fillColor: color,
+            strokeColor = eventStrokeColor,
+            radius,
+            buffer,
+            bufferStyle,
+        } = this.options
 
         if (buffer) {
             this.addLayer(bufferLayer({ id, ...bufferStyle }))
             this.addLayer(bufferOutlineLayer({ id, ...bufferStyle }))
         }
 
-        this.addLayer(
-            pointLayer({ id, color, radius, strokeColor: eventStrokeColor }),
-            true
-        )
+        this.addLayer(pointLayer({ id, color, radius, strokeColor }), true)
         this.addLayer(polygonLayer({ id, color }), true)
-        this.addLayer(outlineLayer({ id, color: eventStrokeColor }))
+        this.addLayer(outlineLayer({ id, color: strokeColor }))
     }
 }
 

src/layers/ServerCluster.js

@@ -10,7 +10,7 @@ import {
 } from '../utils/layers'
 import { isClusterPoint } from '../utils/filters'
 import { featureCollection } from '../utils/geometry'
-import { eventStrokeColor as strokeColor } from '../utils/style'
+import { eventStrokeColor, clusterCountColor } from '../utils/style'
 import { earthRadius } from '../utils/geo'
 
 class ServerCluster extends Cluster {
@@ -45,7 +45,12 @@ class ServerCluster extends Cluster {
 
     createLayers() {
         const id = this.getId()
-        const { fillColor: color, radius } = this.options
+        const {
+            fillColor: color,
+            strokeColor = eventStrokeColor,
+            countColor = clusterCountColor,
+            radius,
+        } = this.options
 
         // Non-clustered points
         this.addLayer(
@@ -65,7 +70,7 @@ class ServerCluster extends Cluster {
 
         // Clusters
         this.addLayer(clusterLayer({ id, color, strokeColor }), true)
-        this.addLayer(clusterCountLayer({ id }))
+        this.addLayer(clusterCountLayer({ id, color: countColor }))
     }
 
     getTileId(tile) {

src/utils/layers.js

@@ -84,21 +84,21 @@ export const symbolLayer = ({ id, source, filter }) => ({
 })
 
 // Layer with cluster (circles)
-export const clusterLayer = ({ id, color }) => ({
+export const clusterLayer = ({ id, color, strokeColor }) => ({
     id: `${id}-cluster`,
     type: 'circle',
     source: id,
     filter: isCluster,
     paint: {
         'circle-color': color,
         'circle-radius': clusterRadiusExpr,
+        'circle-stroke-color': strokeColor,
         'circle-stroke-width': defaults.strokeWidth,
-        'circle-stroke-color': defaults.eventStrokeColor,
     },
 })
 
 //  Layer with cluster counts (text)
-export const clusterCountLayer = ({ id }) => ({
+export const clusterCountLayer = ({ id, color }) => ({
     id: `${id}-count`,
     type: 'symbol',
     source: id,
@@ -109,6 +109,6 @@ export const clusterCountLayer = ({ id }) => ({
         'text-size': defaults.textSize,
     },
     paint: {
-        'text-color': defaults.textColor,
+        'text-color': color || defaults.textColor,
     },
 })

src/utils/style.js

@@ -11,6 +11,7 @@ export const strokeWidth = 1
 export const hoverStrokeMultiplier = 3
 
 export const eventStrokeColor = '#333333'
+export const clusterCountColor = '#000000'
 
 export default {
     textFont,
@@ -22,4 +23,5 @@ export default {
     strokeWidth,
     hoverStrokeMultiplier,
     eventStrokeColor,
+    clusterCountColor,
 }