💄 improve color brewing

src/app/calculator/calculator.service.ts

@@ -116,7 +116,7 @@ export class CalculatorService {
       console.log('data received!');
       console.log(data);
       this._zonesLoading = false;
-      this.zonesService.updateZones(data);
+      this.zonesService.updateZones(data, {quantileCount: this.quantileCount});
     } catch (err) {
       this._zonesLoading = false;
       console.error('Somethin fucked up!');

src/app/calculator/zones.service.ts

@@ -12,31 +12,93 @@ export class ZonesService {
   zonesLayer: VectorLayer<VectorSource<Geometry>>;
   zonesSource: VectorSource<Geometry>;
   zonesStyle: (feature) => Style;
-  QUANTILE_COLORS = [
-    '#0000ff',
-    '#0033cc',
-    '#006666',
-    '#00cc33',
-    '#00ff00',
+  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=2 */
+  QUANTILE_COLORS_2 = ['#43a2ca', '#e0f3db'] as const;
+  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=3 */
+  QUANTILE_COLORS_3 = ['#43a2ca', '#a8ddb5', '#e0f3db'] as const;
+  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=4 */
+  QUANTILE_COLORS_4 = ['#2b8cbe', '#7bccc4', '#bae4bc', '#f0f9e8'] as const;
+  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=5 */
+  QUANTILE_COLORS_5 = [
+    '#0868ac',
+    '#43a2ca',
+    '#7bccc4',
+    '#bae4bc',
+    '#f0f9e8',
+  ] as const;
+  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=6 */
+  QUANTILE_COLORS_6 = [
+    '#0868ac',
+    '#43a2ca',
+    '#7bccc4',
+    '#a8ddb5',
+    '#ccebc5',
+    '#f0f9e8',
+  ] as const;
+  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=7 */
+  QUANTILE_COLORS_7 = [
+    '#08589e',
+    '#2b8cbe',
+    '#4eb3d3',
+    '#7bccc4',
+    '#a8ddb5',
+    '#ccebc5',
+    '#f0f9e8',
+  ] as const;
+  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=8 */
+  QUANTILE_COLORS_8 = [
+    '#08589e',
+    '#2b8cbe',
+    '#4eb3d3',
+    '#7bccc4',
+    '#a8ddb5',
+    '#ccebc5',
+    '#e0f3db',
+    '#f7fcf0',
+  ] as const;
+  /** https://colorbrewer2.org/#type=sequential&scheme=GnBu&n=9 */
+  QUANTILE_COLORS_9 = [
+    '#084081',
+    '#0868ac',
+    '#2b8cbe',
+    '#4eb3d3',
+    '#7bccc4',
+    '#a8ddb5',
+    '#ccebc5',
+    '#e0f3db',
+    '#f7fcf0',
+  ] as const;
+  QUANTILE_COLORS_MATRIX = [
+    this.QUANTILE_COLORS_2,
+    this.QUANTILE_COLORS_3,
+    this.QUANTILE_COLORS_4,
+    this.QUANTILE_COLORS_5,
+    this.QUANTILE_COLORS_6,
+    this.QUANTILE_COLORS_7,
+    this.QUANTILE_COLORS_8,
+    this.QUANTILE_COLORS_9,
   ] as const;
 
   constructor(private hsAddDataService: HsAddDataService) {
     this.zonesStyle = (feature) =>
       new Style({
         fill: new Fill({
-          color: this.QUANTILE_COLORS[feature.get('quantile')],
+          color: '#006666',
         }),
         stroke: new Stroke(),
       });
   }
 
-  updateZones(zones) {
+  updateZones(zones, {quantileCount}): void {
     if (!this.zonesLayer) {
       this.zonesSource = new VectorSource();
       this.zonesLayer = new VectorLayer({
         properties: {
           title: 'Zones',
           path: 'Results',
+          popUp: {
+            attributes: ['quantile'],
+          },
         },
         style: this.zonesStyle,
         source: this.zonesSource,
@@ -44,6 +106,8 @@ export class ZonesService {
       this.hsAddDataService.addLayer(this.zonesLayer);
     }
     this.zonesSource.clear();
+    this.updateZonesStyle(quantileCount);
+    this.zonesLayer.setStyle(this.zonesStyle);
     this.zonesSource.addFeatures(
       new GeoJSON().readFeatures(zones, {
         dataProjection: 'EPSG:4326',
@@ -51,4 +115,15 @@ export class ZonesService {
       })
     );
   }
+
+  private updateZonesStyle(classes: number) {
+    const colorRamp = this.QUANTILE_COLORS_MATRIX[classes - 2];
+    this.zonesStyle = (feature) =>
+      new Style({
+        fill: new Fill({
+          color: colorRamp[feature.get('quantile') - 1],
+        }),
+        stroke: new Stroke(),
+      });
+  }
 }