🐛 display index layer independently

src/app.service.ts

@@ -49,12 +49,21 @@ export class AppService {
     style: this.nuts2style,
     title: 'NUTS2 regions',
   });
-  nuts3Layer = new VectorLayer({
+  nuts3IndexLayer = new VectorLayer({
+    source: nuts.nuts3Source,
+    editor: {editable: false},
+    visible: true,
+    style: (f) => {
+      return this.indexStyle(f);
+    },
+    title: 'NUTS3 regions: Rural attractiveness index',
+  });
+  nuts3ClustersLayer = new VectorLayer({
     source: nuts.nuts3Source,
     editor: {editable: false},
     visible: true,
     style: this.generateStyle(this.adjusterService.method),
-    title: 'NUTS3 regions',
+    title: 'NUTS3 regions: Clusters',
   });
   pilotsStyle = new Style({
     stroke: new Stroke({
@@ -88,7 +97,27 @@ export class AppService {
     public hsSidebarService: HsSidebarService
   ) {
     this.serviceUrl = this.adjusterService.serviceBaseUrl + 'georeport/';
-    this.nuts3Layer.set('popUp', {
+    this.nuts3IndexLayer.set('popUp', {
+      attributes: [
+        {attribute: 'CNTR_CODE', label: 'Country'},
+        {attribute: 'NUTS_NAME', label: 'Name'},
+        {
+          attribute: 'aggregate',
+          label: 'aggregated index',
+          displayFunction: (x) => {
+            return `${(x * 100).toFixed(2)} %`;
+          },
+        },
+        {
+          attribute: 'NUTS_ID',
+          label: 'Detailed report',
+          displayFunction: (x) => {
+            return `<a href="${this.serviceUrl}${x}" target="_blank">in a new page</a>.`;
+          },
+        },
+      ],
+    });
+    this.nuts3ClustersLayer.set('popUp', {
       attributes: [
         {attribute: 'CNTR_CODE', label: 'Country'},
         {attribute: 'NUTS_NAME', label: 'Name'},
@@ -102,8 +131,8 @@ export class AppService {
         },
       ],
     });
-    this.nuts3Layer.set('editable', false);
-    this.nuts3Layer.set('queryable', false);
+    this.nuts3ClustersLayer.set('editable', false);
+    this.nuts3ClustersLayer.set('queryable', false);
     this.pilotRegions.set('popUp', {
       attributes: [
         {attribute: 'NUTS_NAME', label: 'Region name'},
@@ -126,11 +155,19 @@ export class AppService {
       }
     });
     this.adjusterEventService.methodChanged.subscribe((method) => {
-      this.nuts3Layer.get('popUp').attributes[2].attribute = method;
-      this.nuts3Layer.setStyle(this.generateStyle(this.adjusterService.method));
+      /*TODO: prettify this
+      this.nuts3ClustersLayer.set(
+        'title',
+        `NUTS3 regions: ${method.replaceAll(/\((.+?)\)/g, '')} Clusters`
+      );*/
+      this.nuts3ClustersLayer.get('popUp').attributes[2].attribute = method;
+      this.nuts3ClustersLayer.setStyle(
+        this.generateStyle(this.adjusterService.method)
+      );
     });
     /* The order of pushes matter! */
-    this.hsConfig.default_layers.push(this.nuts3Layer);
+    this.hsConfig.default_layers.push(this.nuts3ClustersLayer);
+    this.hsConfig.default_layers.push(this.nuts3IndexLayer);
     this.hsConfig.default_layers.push(this.nuts2Layer);
     this.hsConfig.default_layers.push(this.pilotRegions);
     /*this.hsMapService
@@ -208,4 +245,49 @@ export class AppService {
       }
     };
   }
+
+  private indexStyle = (feature) => {
+    if (isNaN(feature.get('aggregate'))) {
+      return [
+        new Style({
+          fill: new Fill({
+            color: '#FFF',
+          }),
+          stroke: new Stroke({
+            color: '#3399CC',
+            width: 0.25,
+          }),
+        }),
+      ];
+    } else {
+      return [
+        new Style({
+          fill: new Fill({
+            color: this.perc2color(feature.get('aggregate')),
+          }),
+          stroke: new Stroke({
+            color: '#FFFFFF',
+            width: 0.15,
+          }),
+        }),
+      ];
+    }
+  };
+
+  private perc2color = (perc: number): string => {
+    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);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const h = r * 0x10000 + g * 0x100 + b * 0x1;
+    return `rgba(${r}, ${g}, ${b}, 0.7)`;
+  };
 }