From f2bb70b34d187c63a4759a5dfecb98679a45a477 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Sandvik?= Date: Sun, 12 Sep 2021 22:22:52 +0200 Subject: [PATCH 1/4] fix: event stroke color --- src/layers/ClientCluster.js | 7 +++-- src/layers/Cluster.js | 55 +++++++++++++++++++++++++++---------- src/layers/Events.js | 13 +++++---- src/utils/layers.js | 4 +-- 4 files changed, 56 insertions(+), 23 deletions(-) diff --git a/src/layers/ClientCluster.js b/src/layers/ClientCluster.js index 0ad27fdc..8f828a16 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 } from '../utils/style' class ClientCluster extends Cluster { createSource() { @@ -13,7 +13,10 @@ class ClientCluster extends Cluster { createLayers() { const id = this.getId() - const { fillColor: color } = this.options + const { + fillColor: color, + strokeColor = eventStrokeColor, + } = this.options super.createLayers() diff --git a/src/layers/Cluster.js b/src/layers/Cluster.js index 9c890b64..e029f156 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: eventStrokeColor, + 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..9873eca3 100644 --- a/src/layers/Events.js +++ b/src/layers/Events.js @@ -13,17 +13,20 @@ 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 })) } diff --git a/src/utils/layers.js b/src/utils/layers.js index 93680c9f..8b8d998c 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,8 +92,8 @@ 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, }, }) From 5a000380b9e35017bed2f13dae8a794ad5254246 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Sandvik?= Date: Sun, 12 Sep 2021 22:29:44 +0200 Subject: [PATCH 2/4] fix: event stroke color --- src/layers/Cluster.js | 2 +- src/layers/Events.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layers/Cluster.js b/src/layers/Cluster.js index e029f156..b0d6d694 100644 --- a/src/layers/Cluster.js +++ b/src/layers/Cluster.js @@ -87,7 +87,7 @@ class Cluster extends Layer { this.addLayer( outlineLayer({ id, - color: eventStrokeColor, + color: strokeColor, source: `${id}-polygons`, }) ) diff --git a/src/layers/Events.js b/src/layers/Events.js index 9873eca3..38624065 100644 --- a/src/layers/Events.js +++ b/src/layers/Events.js @@ -28,7 +28,7 @@ class Events extends Layer { 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 })) } } From 786082f1d0377900147f7d5994a17ffce5610675 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Sandvik?= Date: Mon, 13 Sep 2021 09:40:35 +0200 Subject: [PATCH 3/4] fix: cluster count style --- src/layers/ClientCluster.js | 5 +++-- src/layers/ServerCluster.js | 11 ++++++++--- src/utils/layers.js | 4 ++-- src/utils/style.js | 2 ++ 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/layers/ClientCluster.js b/src/layers/ClientCluster.js index 8f828a16..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 } from '../utils/style' +import { eventStrokeColor, clusterCountColor } from '../utils/style' class ClientCluster extends Cluster { createSource() { @@ -16,13 +16,14 @@ class ClientCluster extends Cluster { 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/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 8b8d998c..4673e447 100644 --- a/src/utils/layers.js +++ b/src/utils/layers.js @@ -98,7 +98,7 @@ export const clusterLayer = ({ id, color, strokeColor }) => ({ }) // 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..79e3b97d 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 = '#333333' export default { textFont, @@ -22,4 +23,5 @@ export default { strokeWidth, hoverStrokeMultiplier, eventStrokeColor, + clusterCountColor, } From 2aa3b18f337b07265e34261aeefb850abc1e3b8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Sandvik?= Date: Mon, 13 Sep 2021 09:54:15 +0200 Subject: [PATCH 4/4] fix: cluster count color --- src/utils/style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/style.js b/src/utils/style.js index 79e3b97d..a8d91454 100644 --- a/src/utils/style.js +++ b/src/utils/style.js @@ -11,7 +11,7 @@ export const strokeWidth = 1 export const hoverStrokeMultiplier = 3 export const eventStrokeColor = '#333333' -export const clusterCountColor = '#333333' +export const clusterCountColor = '#000000' export default { textFont,