created legendINverted

moveda c ouple of vabriables to out file

some furhter work

also geojson is empty if all values are zero or undefined

reverted back something, works OK

update, empty geojson loading for undefined values

not displaying empty geojson work fine

removed a console log

src/app/pages/simulation-wizard/results-map/results-map-settings.ts

+// legendInverted are those who 'more is better'
+export const legendInverted: string[] = [
+    'infra', 'speed', 'bikeability_safety', 'capacity'
+]
+
+// ratiosBetweenGrades are used for legend
+export const ratiosBetweenGrades: number[] = [25.6, 12.8, 6.4, 3.2, 1.6];

src/app/pages/simulation-wizard/results-map/results-map.component.html

@@ -20,7 +20,7 @@
           nbTooltip="Select a simulation in order to use this button. GET http://localhost:8083/dss/geojson/{id}/selectedKpi"
           [disabled]="selectedSimulation == undefined"
           [nbSpinner]="geojsonLoading"
-          [status]="clickedButton == l ? 'control' : 'primary'"
+          [status]="selectedGeojson == l ? 'control' : 'primary'"
           *ngFor="let l of loadGeojsonButtons"
         >
           load {{ l }} geojson

src/app/pages/simulation-wizard/results-map/results-map.component.ts

@@ -2,6 +2,7 @@ import { Component, Input } from "@angular/core";
 import * as L from "leaflet";
 import { SimulationService } from "../utils/services/simulation.service";
 import * as MapColors from "./map-colors-local";
+import { legendInverted, ratiosBetweenGrades } from "./results-map-settings"
 import { NbToastrService } from "@nebular/theme";
 import { Simulation } from "../utils/data/simulation";
 
@@ -24,21 +25,20 @@ export class ResultsMapComponent {
   };
   mapLegend = new L.Control({ position: "bottomright" });
   radioButtonLayersControl: any;
+  loadGeojsonButtons: string[] = [
+    "bikeability",
+    "bikeIntensity",
+    "bikeSafety",
+    "pollution",
+  ];
   checkedRadioButton: string = "";
   geoJsonStyleWeight: number = 5;
   geoJsonStyleOpacity: number = 0.8;
   maxKeyValues: Object = {};
-  ratiosBetweenGrades: number[] = [25.6, 12.8, 6.4, 3.2, 1.6];
   grayscale: any = 50;
   geojsonLoading: boolean = false;
   @Input() selectedSimulation: Simulation;
-  clickedButton: string = "";
-  loadGeojsonButtons: string[] = [
-    "bikeability",
-    "bikeIntensity",
-    "bikeSafety",
-    "pollution",
-  ];
+  selectedGeojson: string = "";
 
   constructor(
     private simulationService: SimulationService,
@@ -73,7 +73,7 @@ export class ResultsMapComponent {
   }
 
   onLoad(selectedKpi: string) {
-    this.clickedButton = selectedKpi;
+    this.selectedGeojson = selectedKpi;
     this.setMapZoom();
 
     if (this.radioButtonLayersControl)
@@ -163,25 +163,10 @@ export class ResultsMapComponent {
       );
   }
 
-  // LEGEND
   setLegend(legendType) {
     this.mapLegend.onAdd = (map) => {
       let direction: string;
-      if (
-        legendType == "PM" ||
-        legendType == "CO2_rep" ||
-        legendType == "CO" ||
-        legendType == "CO2_TOTAL" ||
-        legendType == "HC" ||
-        legendType == "NOx" ||
-        legendType == "pedestrianTravelTime" ||
-        legendType == "bike_count" ||
-        legendType == "bus_count" ||
-        legendType == "car_count" ||
-        legendType == "infra" ||
-        legendType == "speed" ||
-        legendType == "bikeability_safety"
-      ) {
+      if (legendInverted.indexOf(legendType) == -1) {
         direction = "lowToHigh";
       } else {
         direction = "highToLow";
@@ -191,6 +176,7 @@ export class ResultsMapComponent {
         this.maxKeyValues["maxValue_" + legendType] == undefined ||
         this.maxKeyValues["maxValue_" + legendType] == 0
       ) {
+        this.toastrService.info("Geojson not displayed because all values are undefined or zero!", "Geojson not displayed")
         let div = L.DomUtil.create("div");
         div.innerHTML += `<p style='background:white; display: inline; font-size:17px; padding: 0 7px; background: #ff3d71'>Values for ${legendType} kpi are undefined or zero!</p>`;
         return div;
@@ -201,23 +187,23 @@ export class ResultsMapComponent {
         0,
         this.limitMyDigits(
           this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[0]
+          ratiosBetweenGrades[0]
         ),
         this.limitMyDigits(
           this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[1]
+          ratiosBetweenGrades[1]
         ),
         this.limitMyDigits(
           this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[2]
+          ratiosBetweenGrades[2]
         ),
         this.limitMyDigits(
           this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[3]
+          ratiosBetweenGrades[3]
         ),
         this.limitMyDigits(
           this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[4]
+          ratiosBetweenGrades[4]
         ),
       ];
 
@@ -372,6 +358,16 @@ export class ResultsMapComponent {
 
     for (let f = 0; f < keys.length; f++) {
       let tmp: Object = {};
+
+      if (
+        this.maxKeyValues["maxValue_" + keys[f]] == undefined ||
+        this.maxKeyValues["maxValue_" + keys[f]] == 0
+      ) {
+        tmp = L.geoJSON(<any>{
+          "type": "FeatureCollection",
+          "features": []
+        });
+      } else {
         if (keys[f] == "capacity") {
           tmp = L.geoJSON(<any>jsonFile, {
             style: (feature) => ({
@@ -380,7 +376,7 @@ export class ResultsMapComponent {
                 feature["properties"]["capacity"],
                 keys[f],
                 this.maxKeyValues[`maxValue_${keys[f]}`],
-              this.ratiosBetweenGrades,
+                ratiosBetweenGrades,
                 parseInt(feature["properties"]["capacity"]) == 9999 ? true : false
               ),
               opacity: this.geoJsonStyleOpacity,
@@ -401,7 +397,7 @@ export class ResultsMapComponent {
                 feature["properties"].dailyInternalBikeTravels,
                 keys[f],
                 this.maxKeyValues[`maxValue_${keys[f]}`],
-              this.ratiosBetweenGrades,
+                ratiosBetweenGrades,
                 parseInt(feature["properties"]["capacity"]) == 9999 ? true : false
               ),
               opacity: this.geoJsonStyleOpacity,
@@ -422,7 +418,7 @@ export class ResultsMapComponent {
                 feature["properties"].pedestrianTravelTime,
                 keys[f],
                 this.maxKeyValues[`maxValue_${keys[f]}`],
-              this.ratiosBetweenGrades,
+                ratiosBetweenGrades,
                 parseInt(feature["properties"]["capacity"]) == 9999 ? true : false
               ),
               opacity: this.geoJsonStyleOpacity,
@@ -441,7 +437,7 @@ export class ResultsMapComponent {
                 feature["properties"],
                 keys[f],
                 this.maxKeyValues[`maxValue_${keys[f]}`],
-              this.ratiosBetweenGrades,
+                ratiosBetweenGrades,
                 parseInt(feature["properties"]["capacity"]) == 9999 ? true : false
               ),
               opacity: this.geoJsonStyleOpacity,
@@ -453,6 +449,7 @@ export class ResultsMapComponent {
               }),
           });
         }
+      }
       tmp["myKey"] = keys[f];
       res.push(tmp);
     }