diff --git a/src/layers/ClientCluster.js b/src/layers/ClientCluster.js index 0ad27fdc..8d0ea0f8 100644 --- a/src/layers/ClientCluster.js +++ b/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() { diff --git a/src/layers/Cluster.js b/src/layers/Cluster.js index 9c890b64..b0d6d694 100644 --- a/src/layers/Cluster.js +++ b/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()) } diff --git a/src/layers/Events.js b/src/layers/Events.js index f0e60f2e..38624065 100644 --- a/src/layers/Events.js +++ b/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 })) } } diff --git a/src/layers/ServerCluster.js b/src/layers/ServerCluster.js index 02dd5022..6a201c9c 100644 --- a/src/layers/ServerCluster.js +++ b/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) { diff --git a/src/utils/layers.js b/src/utils/layers.js index 93680c9f..4673e447 100644 --- a/src/utils/layers.js +++ b/src/utils/layers.js @@ -84,7 +84,7 @@ 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, @@ -92,13 +92,13 @@ export const clusterLayer = ({ id, color }) => ({ 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, }, }) diff --git a/src/utils/style.js b/src/utils/style.js index 58810fce..a8d91454 100644 --- a/src/utils/style.js +++ b/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, }