Sketch colorizing

src/app.js

@@ -16,6 +16,7 @@ import 'hslayers-ng/components/toolbar/toolbar.module';
 import './adjuster/adjuster.module.js';
 import VectorLayer from 'ol/layer/Vector';
 import View from 'ol/View';
+import hsv2rgb from 'hsv2rgb';
 import nuts from './nuts.js';
 import {Fill, Stroke, Style} from 'ol/style';
 import {OSM} from 'ol/source';
@@ -33,21 +34,20 @@ const stroke = new Stroke({
   width: 0.25,
 });
 
-function perc2color(perc) {
-  perc = perc * 100;
-  let r;
-  let g;
-  const b = 0;
-  if (perc < 50) {
-    r = 255;
-    g = Math.round(5.1 * perc);
-  } else {
-    g = 255;
-    r = Math.round(510 - 5.1 * perc);
+function generateRandomColorPalette(colorCount) {
+  const palette = [];
+  const golden_ratio_conjugate = 0.618033988749895;
+  for (let i = 0; i < colorCount; i++) {
+    let h = Math.random();
+    h += golden_ratio_conjugate;
+    h %= 1;
+    console.log(hsv2rgb(h, 0.5, 0.95));
+    palette.push(hsv2rgb(h, 0.5, 0.95));
   }
   // eslint-disable-next-line no-unused-vars
   // const h = r * 0x10000 + g * 0x100 + b * 0x1;
-  return `rgba(${r}, ${g}, ${b}, 0.7)`;
+  return palette;
+  //return `rgba(${r}, ${g}, ${b}, 0.7)`;
 }
 
 const styles = function (feature) {
@@ -64,7 +64,7 @@ const styles = function (feature) {
     return [
       new Style({
         fill: new Fill({
-          color: perc2color(feature.get('total')),
+          color: randomColorPalette[feature.get('km25.cluster')],
         }),
         stroke: stroke,
       }),
@@ -72,6 +72,8 @@ const styles = function (feature) {
   }
 };
 
+const randomColorPalette = generateRandomColorPalette(5);
+
 const nuts2Layer = new VectorLayer({
   source: nuts.nuts2Source,
   visible: false,
@@ -85,6 +87,7 @@ const nuts3Layer = new VectorLayer({
   style: styles,
   title: 'NUTS3 regions',
 });
+//TODO: update to new PopUp config & align with new attrs
 nuts3Layer.set('hoveredKeys', [
   'NUTS_NAME',
   'totalForHumans',