diff --git a/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.html b/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.html
index 034dc8a78eaa6f113a1a9ee6dae6219e4e00cd62..34332bf652a96f7c9660ed1ee29bd79014defcc6 100644
--- a/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.html
+++ b/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.html
@@ -29,7 +29,7 @@
     "
   >
     <nb-card-body class="single-sim">
-      <span>
+      <span class="text-name">
         {{ simulation.name }}
         <nb-icon
           [icon]="
@@ -53,9 +53,7 @@
         >
         </nb-icon>
       </span>
-      <span class="subtitle-2 text-description">{{
-        simulation.description
-      }}</span>
+      <span class="text-description">{{ simulation.description }}</span>
       <button
         *ngIf="selectedSimulation == simulation; else elseBlock"
         nbButton
@@ -65,17 +63,23 @@
       >
         selected
       </button>
-      <span
-        class="subtitle-2 text-hint"
-        [@socketStatusAnimation]="simulation.animationState"
-        (@socketStatusAnimation.done)="onAnimationEventDone($event, i)"
-        (@socketStatusAnimation.start)="onAnimationEventStart($event, i)"
-      ></span>
       <ng-template #elseBlock>
         <button nbButton status="primary" (click)="onSelect(simulation)">
           select
         </button>
       </ng-template>
+      <span
+        class="text-duration"
+        *ngIf="
+          simulation.duration != undefined;
+          else elseSimulationDurationBlock
+        "
+      >
+        {{ simulation.duration }}
+      </span>
+      <ng-template #elseSimulationDurationBlock>
+        <span class="text-duration"> no data about duration </span>
+      </ng-template>
     </nb-card-body>
   </nb-card>
 </section>
@@ -308,8 +312,9 @@
       nbTooltip="This button will run Preprocess Data, Generate Population, Generate Travel Demand Model and Run the Simulation. GET http://localhost:8082/traffic-simulation/simulation/{id}/run"
       [disabled]="!selectedSimulation || runSimulationBtnDisabled"
     >
-      Run simulation</button
-    ><nb-icon
+      Run simulation
+    </button>
+    <!-- <nb-icon
       [icon]="
         runSimulation.status == 'running'
           ? 'loader-outline'
@@ -329,7 +334,7 @@
       [ngClass]="{ 'icon-spin': runSimulation.status == 'running' }"
       class="icon"
     >
-    </nb-icon>
+    </nb-icon> -->
   </div>
   <div class="mb-2 button-envelope">
     <button
diff --git a/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.scss b/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.scss
index 94921191dab37f1b6e86e07de4982388c79ca1ba..1abd4b9e4d12340dd35fe4905d7a21c629e00d38 100644
--- a/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.scss
+++ b/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.scss
@@ -100,20 +100,22 @@
       align-items: center;
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
-      span {
-        margin-right: 15px;
+      span.text-name {
         min-width: 280px;
-      }
-      span.text-hint {
-        min-width: 210px;
+        margin-right: 15px;
       }
       span.text-description {
         min-width: 220px;
+        margin-right: 15px;
       }
       button {
         margin-right: 15px;
         min-width: 112px;
       }
+      span.text-duration {
+        min-width: 220px;
+        flex-grow: 1;
+      }
     }
     span.text-hint,
     span.text-description {
@@ -153,6 +155,34 @@
   }
 }
 
+@media screen and (max-width: 1000px) {
+  .nb-card {
+    margin-top: 0.75rem !important;
+    .single-sim {
+      display: flex;
+      flex-wrap: wrap;
+      > * {
+        margin-bottom: 0.25rem;
+      }
+      span {
+        width: 100%;
+      }
+      span.text-name {
+        margin-right: 0px;
+      }
+      span.text-description {
+        margin-right: 0px;
+      }
+      button {
+        margin-right: 0px;
+      }
+      button {
+        order: 4;
+      }
+    }
+  }
+}
+
 .icon {
   margin-left: 0.25em;
   margin-right: 0.3em;
diff --git a/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.ts b/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.ts
index cb186bdd8bcfb6004ff71e96e89a33d306eb006f..440df5c8aa304247367c06c7b1ce6510fdd16f93 100644
--- a/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.ts
+++ b/src/app/pages/simulation-wizard/existing-simulations/existing-simulations.component.ts
@@ -372,12 +372,10 @@ export class ExistingSimulationsComponent implements OnInit {
     );
     let startTime, endTime;
     startTime = new Date();
-    console.log("🚀☢ ~ this.selectedSimulation", this.selectedSimulation);
     this.simulationService
       .getCalculateKPIs(this.selectedCity.cityId, this.selectedSimulation.id)
       .subscribe(
         (res) => {
-          console.log("🚀☢ ~ res", res);
           this.calculateKPIS.status = "";
           endTime = new Date();
           let timeDiff = endTime - startTime;
@@ -425,10 +423,6 @@ export class ExistingSimulationsComponent implements OnInit {
           // rudimentary way of concincing our-spider-chart to redownload evaluated json
           this.selectedSimulationToEmit.emit(undefined);
           setTimeout(() => {
-            console.log(
-              "🚀☢ ~ this.selectedSimulation.id.toString()",
-              this.selectedSimulation
-            );
             this.selectedSimulationToEmit.emit(this.selectedSimulation);
             this.showToast(`Updating spider chart.`, "Info", "info");
           }, 0);
diff --git a/src/app/pages/simulation-wizard/ml-module/ml-module.component.scss b/src/app/pages/simulation-wizard/ml-module/ml-module.component.scss
index 119bac56c891fe19015a45efc4905c964bbc0465..0c7af6efce54b09ec0b6bbdab7daa408afed799f 100644
--- a/src/app/pages/simulation-wizard/ml-module/ml-module.component.scss
+++ b/src/app/pages/simulation-wizard/ml-module/ml-module.component.scss
@@ -27,4 +27,7 @@
       }
     }
   }
+  a {
+    text-decoration: none;
+  }
 }
diff --git a/src/app/pages/simulation-wizard/our-spider-chart/our-spider-chart.component.ts b/src/app/pages/simulation-wizard/our-spider-chart/our-spider-chart.component.ts
index 3d8db60aa3502d952a15600990695086dc404a10..ca1c8f45fecb3167a39aeec90d20881cfece75a6 100644
--- a/src/app/pages/simulation-wizard/our-spider-chart/our-spider-chart.component.ts
+++ b/src/app/pages/simulation-wizard/our-spider-chart/our-spider-chart.component.ts
@@ -98,7 +98,7 @@ export class OurSpiderChartComponent implements OnChanges {
                       values_B.push(entry[1] as string);
                     }
                   } else {
-                    console.log("🚀☢ Setting 0");
+                    console.log("🚀☢ Setting 0 for ", entry[0]);
                     if (j == 0) {
                       values_A.push(0);
                     } else if (j == 1) {
diff --git a/src/app/pages/simulation-wizard/results-map/results-map-settings.ts b/src/app/pages/simulation-wizard/results-map/results-map-settings.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d33a51bde0050dca2eef2164f5507b4421af9e17
--- /dev/null
+++ b/src/app/pages/simulation-wizard/results-map/results-map-settings.ts
@@ -0,0 +1,7 @@
+// 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];
diff --git a/src/app/pages/simulation-wizard/results-map/results-map.component.html b/src/app/pages/simulation-wizard/results-map/results-map.component.html
index 3595642f2d36f3aba9db6fe9f8813ecb94fa2cc6..e1c6c6f0a0e88ed64bd83fac52721355b5ea22f9 100644
--- a/src/app/pages/simulation-wizard/results-map/results-map.component.html
+++ b/src/app/pages/simulation-wizard/results-map/results-map.component.html
@@ -14,18 +14,46 @@
       <div id="loadGeojsonButtonsContainer">
         <button
           nbButton
-          status="primary"
           size="small"
-          (click)="onLoad(l)"
+          (click)="onLoadClick(l.buttonLabel)"
           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'"
-          *ngFor="let l of loadGeojsonButtons"
+          [status]="selectedGeojson == l.buttonLabel ? 'control' : 'primary'"
+          *ngFor="let l of loadGeojsons"
         >
-          load {{ l }} geojson
+          load {{ l.buttonLabel }} geojson
+        </button>
+        <button
+          nbButton
+          (click)="openOverviewOfIndicators(dialog)"
+          nbTooltip="click for overview of indicators"
+          [disabled]="selectedSimulation == undefined"
+        >
+          <nb-icon icon="info-outline"></nb-icon>
         </button>
       </div>
+      <ng-template #dialog let-data let-ref="dialogRef">
+        <nb-card>
+          <nb-card-header
+            >Overview of Indicators for {{ data | titlecase }}
+          </nb-card-header>
+          <nb-card-body>
+            <img
+              src="{{
+                'assets/images/overviewOfIndicators' +
+                  data[0].toUpperCase() +
+                  data.slice(1) +
+                  '.png'
+              }}"
+              alt=""
+            />
+          </nb-card-body>
+          <nb-card-footer>
+            <button nbButton (click)="ref.close()">Close</button>
+          </nb-card-footer>
+        </nb-card>
+      </ng-template>
     </div>
     <div id="grayscaleInput">
       <input
diff --git a/src/app/pages/simulation-wizard/results-map/results-map.component.scss b/src/app/pages/simulation-wizard/results-map/results-map.component.scss
index ffe1fa9d54b1384c9b4b99362c4b5630ef504831..8541f1068723f0048c0224f085fa3100577b162e 100644
--- a/src/app/pages/simulation-wizard/results-map/results-map.component.scss
+++ b/src/app/pages/simulation-wizard/results-map/results-map.component.scss
@@ -16,7 +16,7 @@
   }
   ::ng-deep .leaflet-top.leaflet-right {
     position: relative;
-    top: 37px;
+    top: 42px;
   }
   #grayscaleInput {
     background: #fffd;
diff --git a/src/app/pages/simulation-wizard/results-map/results-map.component.ts b/src/app/pages/simulation-wizard/results-map/results-map.component.ts
index 253f14e5b00347c10251e8ec588540ff85bf577f..c5584b286657216b23e33e2c23fa510c8e7c5526 100644
--- a/src/app/pages/simulation-wizard/results-map/results-map.component.ts
+++ b/src/app/pages/simulation-wizard/results-map/results-map.component.ts
@@ -1,8 +1,9 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, TemplateRef, OnChanges } from "@angular/core";
 import * as L from "leaflet";
 import { SimulationService } from "../utils/services/simulation.service";
 import * as MapColors from "./map-colors-local";
-import { NbToastrService } from "@nebular/theme";
+import { legendInverted, ratiosBetweenGrades } from "./results-map-settings";
+import { NbToastrService, NbDialogService } from "@nebular/theme";
 import { Simulation } from "../utils/data/simulation";
 
 @Component({
@@ -10,7 +11,7 @@ import { Simulation } from "../utils/data/simulation";
   templateUrl: "./results-map.component.html",
   styleUrls: ["./results-map.component.scss"],
 })
-export class ResultsMapComponent {
+export class ResultsMapComponent implements OnChanges {
   public map: L.Map;
   options = {
     layers: [
@@ -24,25 +25,37 @@ export class ResultsMapComponent {
   };
   mapLegend = new L.Control({ position: "bottomright" });
   radioButtonLayersControl: any;
+  loadGeojsons: Object[] = [
+    {
+      response: undefined,
+      buttonLabel: "bikeability",
+    },
+    {
+      response: undefined,
+      buttonLabel: "bikeIntensity",
+    },
+    {
+      response: undefined,
+      buttonLabel: "bikeSafety",
+    },
+    {
+      response: undefined,
+      buttonLabel: "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,
-    private toastrService: NbToastrService
+    private toastrService: NbToastrService,
+    private dialogService: NbDialogService
   ) {}
   onMapReady(map: L.Map) {
     this.map = map;
@@ -57,7 +70,7 @@ export class ResultsMapComponent {
     //   );
     //   const celkomplet: HTMLElement = document.querySelectorAll(
     //     ".ng-tns-c441-0.appearance-filled.size-medium.shape-rectangle.status-primary.ng-star-inserted.nb-transition"
-    //   )[6] as HTMLElement;
+    //   )[1] as HTMLElement;
     //   celkomplet.click();
     // }, 995);
     // setTimeout(() => {
@@ -72,116 +85,137 @@ export class ResultsMapComponent {
     // }, 1000);
   }
 
-  onLoad(selectedKpi: string) {
-    this.clickedButton = selectedKpi;
+  onLoadClick(selectedKpi: string) {
+    this.selectedGeojson = selectedKpi;
+    this.resetLayersAndButton();
     this.setMapZoom();
 
     if (this.radioButtonLayersControl)
       this.radioButtonLayersControl.remove(this.map);
 
-    this.toastrService.show("This might take a while", "Info", {
-      status: "info",
+    this.loadGeojsons.forEach((geojson, index) => {
+      if (geojson["buttonLabel"] == selectedKpi) {
+        if (this.loadGeojsons[index]["response"] == undefined) {
+          this.toastrService.show("This might take a while", "Info", {
+            status: "info",
+          });
+          this.geojsonLoading = true;
+          this.simulationService
+            .getGeojson(this.selectedSimulation["id"].toString(), selectedKpi)
+            .subscribe((res) => {
+              this.loadGeojsons[index]["response"] = res;
+              this.handleResponse(
+                selectedKpi,
+                this.loadGeojsons[index]["response"]
+              );
+            }),
+            (error) => {
+              this.toastrService.show(
+                error["message"],
+                "Error Getting Geojson",
+                {
+                  status: "danger",
+                }
+              );
+              this.geojsonLoading = false;
+            };
+        } else {
+          this.handleResponse(
+            selectedKpi,
+            this.loadGeojsons[index]["response"]
+          );
+        }
+      }
     });
-    this.geojsonLoading = true;
-    this.simulationService
-      .getGeojson(this.selectedSimulation["id"].toString(), selectedKpi)
-      .subscribe(
-        (res) => {
-          if (res["message"] == "Calculating...") {
-            this.toastrService.show(
-              "Server says: Calculating the KPI visualization. GEOJSON loading will not be completed.",
-              "Geojson not ready",
-              {
-                status: "danger",
-                duration: 10000,
-              }
-            );
-            this.geojsonLoading = false;
-            return;
-          } else if (res["message"] == "Calculating the KPI visualization.") {
-            this.toastrService.show(
-              "Server says: Calculating the KPI visualization. GEOJSON loading will not be completed.",
-              "Geojson not ready",
-              {
-                status: "danger",
-                duration: 10000,
-              }
-            );
-            this.geojsonLoading = false;
-            return;
-          } else if (res["message"] == "Please prepare visualizations first.") {
-            this.toastrService.show(
-              "The visualization is not prepared yet, try again in a few minutes.",
-              "Geojson not ready",
-              {
-                status: "danger",
-                duration: 10000,
-              }
-            );
-            this.geojsonLoading = false;
-            return;
-          } else if (res["message"] && res["message"].length > 0) {
-            this.toastrService.show(
-              "Geojson might not be ready",
-              "API response contains a message",
-              {
-                status: "warning",
-              }
-            );
-          }
+  }
 
-          this.toastrService.show("", "Geojson Loaded", {
-            status: "success",
-          });
+  handleResponse(selectedKpi, res) {
+    this.loadGeojsons.forEach((geojson, index) => {
+      if (geojson["buttonLabel"] == selectedKpi) {
+        this.loadGeojsons[index]["response"] = res;
+      }
+    });
 
-          const keys = this.extractKeys(res);
-          const propertyGeojsons = this.populatePropertyGeojsons(res, keys);
-          let obj = {};
-
-          for (let i = 0; i < propertyGeojsons.length; i++) {
-            if (
-              propertyGeojsons[i].myKey == "link_id" ||
-              propertyGeojsons[i].myKey == "modes" ||
-              propertyGeojsons[i].myKey == "internal_travel_by_mode"
-            )
-              continue;
-            obj[`${keys[i]}`] = propertyGeojsons[i];
-          }
-          this.radioButtonLayersControl = new L.Control.Layers(obj, null, {
-            collapsed: false,
-          });
-          this.map.addControl(this.radioButtonLayersControl);
-          this.addListenerToRadioButtonLayersControl();
-          this.geojsonLoading = false;
-        },
-        (error) => {
-          this.toastrService.show(error["message"], "Error Getting Geojson", {
-            status: "danger",
-          });
-          this.geojsonLoading = false;
+    if (res["message"] == "Calculating...") {
+      this.toastrService.show(
+        "Server says: Calculating the KPI visualization. GEOJSON loading will not be completed.",
+        "Geojson not ready",
+        {
+          status: "danger",
+          duration: 10000,
         }
       );
+      this.geojsonLoading = false;
+      return;
+    } else if (res["message"] == "Calculating the KPI visualization.") {
+      this.toastrService.show(
+        "Server says: Calculating the KPI visualization. GEOJSON loading will not be completed.",
+        "Geojson not ready",
+        {
+          status: "danger",
+          duration: 10000,
+        }
+      );
+      this.geojsonLoading = false;
+      return;
+    } else if (res["message"] == "Please prepare visualizations first.") {
+      this.toastrService.show(
+        "The visualization is not prepared yet, try again in a few minutes.",
+        "Geojson not ready",
+        {
+          status: "danger",
+          duration: 10000,
+        }
+      );
+      this.geojsonLoading = false;
+      return;
+    } else if (res["message"] && res["message"].length > 0) {
+      this.toastrService.show(
+        "Geojson might not be ready",
+        "API response contains a message",
+        {
+          status: "warning",
+        }
+      );
+    }
+
+    this.toastrService.show("", "Geojson Loaded", {
+      status: "success",
+    });
+
+    const keys = this.extractKeys(res);
+    const propertyGeojsons = this.populatePropertyGeojsons(res, keys);
+    let obj = {};
+
+    for (let i = 0; i < propertyGeojsons.length; i++) {
+      if (
+        propertyGeojsons[i].myKey == "link_id" ||
+        propertyGeojsons[i].myKey == "modes" ||
+        propertyGeojsons[i].myKey == "internal_travel_by_mode"
+      )
+        continue;
+      obj[`${keys[i]}`] = propertyGeojsons[i];
+    }
+    this.radioButtonLayersControl = new L.Control.Layers(obj, null, {
+      collapsed: false,
+    });
+    this.map.addControl(this.radioButtonLayersControl);
+    this.addListenerToRadioButtonLayersControl();
+    this.geojsonLoading = false;
   }
 
-  // LEGEND
   setLegend(legendType) {
+    if (this.map != undefined && legendType == undefined) {
+      this.map.removeControl(this.mapLegend);
+      return;
+    }
+    if (this.map == undefined) {
+      return;
+    }
+
     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 +225,10 @@ 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;
@@ -200,24 +238,19 @@ export class ResultsMapComponent {
       const grades = [
         0,
         this.limitMyDigits(
-          this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[0]
+          this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[0]
         ),
         this.limitMyDigits(
-          this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[1]
+          this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[1]
         ),
         this.limitMyDigits(
-          this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[2]
+          this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[2]
         ),
         this.limitMyDigits(
-          this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[3]
+          this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[3]
         ),
         this.limitMyDigits(
-          this.maxKeyValues["maxValue_" + legendType] /
-            this.ratiosBetweenGrades[4]
+          this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[4]
         ),
       ];
 
@@ -372,86 +405,105 @@ export class ResultsMapComponent {
 
     for (let f = 0; f < keys.length; f++) {
       let tmp: Object = {};
-      if (keys[f] == "capacity") {
-        tmp = L.geoJSON(<any>jsonFile, {
-          style: (feature) => ({
-            weight: this.geoJsonStyleWeight,
-            color: MapColors.getColorHighToLow(
-              feature["properties"]["capacity"],
-              keys[f],
-              this.maxKeyValues[`maxValue_${keys[f]}`],
-              this.ratiosBetweenGrades,
-              parseInt(feature["properties"]["capacity"]) == 9999 ? true : false
-            ),
-            opacity: this.geoJsonStyleOpacity,
-          }),
-          onEachFeature: (feature, layer) =>
-            layer.on({
-              mouseover: (e) => this.highlightFeature(e, feature.properties),
-              mouseout: (e) => this.resetFeature(e, feature.properties),
-            }),
+
+      if (
+        this.maxKeyValues["maxValue_" + keys[f]] == undefined ||
+        this.maxKeyValues["maxValue_" + keys[f]] == 0
+      ) {
+        tmp = L.geoJSON(<any>{
+          type: "FeatureCollection",
+          features: [],
         });
-      } else if (keys[f] == "dailyInternalBikeTravels") {
-        tmp = L.geoJSON(<any>jsonFile, {
-          style: (feature) => ({
-            weight: this.geoJsonStyleWeight,
-            color: MapColors.getColorHighToLow(
-              feature["properties"]["cityWide"]["traffic"]
-                .dailyInternalBikeTravels ||
-                feature["properties"].dailyInternalBikeTravels,
-              keys[f],
-              this.maxKeyValues[`maxValue_${keys[f]}`],
-              this.ratiosBetweenGrades,
-              parseInt(feature["properties"]["capacity"]) == 9999 ? true : false
-            ),
-            opacity: this.geoJsonStyleOpacity,
-          }),
-          onEachFeature: (feature, layer) =>
-            layer.on({
-              mouseover: (e) => this.highlightFeature(e, feature.properties),
-              mouseout: (e) => this.resetFeature(e, feature.properties),
+      } else {
+        if (keys[f] == "capacity") {
+          tmp = L.geoJSON(<any>jsonFile, {
+            style: (feature) => ({
+              weight: this.geoJsonStyleWeight,
+              color: MapColors.getColorHighToLow(
+                feature["properties"]["capacity"],
+                keys[f],
+                this.maxKeyValues[`maxValue_${keys[f]}`],
+                ratiosBetweenGrades,
+                parseInt(feature["properties"]["capacity"]) == 9999
+                  ? true
+                  : false
+              ),
+              opacity: this.geoJsonStyleOpacity,
             }),
-        });
-      } else if (keys[f] == "pedestrianTravelTime") {
-        tmp = L.geoJSON(<any>jsonFile, {
-          style: (feature) => ({
-            weight: this.geoJsonStyleWeight,
-            color: MapColors.getColor(
-              feature["properties"]["cityWide"]["traffic"]
-                .pedestrianTravelTime ||
-                feature["properties"].pedestrianTravelTime,
-              keys[f],
-              this.maxKeyValues[`maxValue_${keys[f]}`],
-              this.ratiosBetweenGrades,
-              parseInt(feature["properties"]["capacity"]) == 9999 ? true : false
-            ),
-            opacity: this.geoJsonStyleOpacity,
-          }),
-          onEachFeature: (feature, layer) =>
-            layer.on({
-              mouseover: (e) => this.highlightFeature(e, feature.properties),
-              mouseout: (e) => this.resetFeature(e, feature.properties),
+            onEachFeature: (feature, layer) =>
+              layer.on({
+                mouseover: (e) => this.highlightFeature(e, feature.properties),
+                mouseout: (e) => this.resetFeature(e, feature.properties),
+              }),
+          });
+        } else if (keys[f] == "dailyInternalBikeTravels") {
+          tmp = L.geoJSON(<any>jsonFile, {
+            style: (feature) => ({
+              weight: this.geoJsonStyleWeight,
+              color: MapColors.getColorHighToLow(
+                feature["properties"]["cityWide"]["traffic"]
+                  .dailyInternalBikeTravels ||
+                  feature["properties"].dailyInternalBikeTravels,
+                keys[f],
+                this.maxKeyValues[`maxValue_${keys[f]}`],
+                ratiosBetweenGrades,
+                parseInt(feature["properties"]["capacity"]) == 9999
+                  ? true
+                  : false
+              ),
+              opacity: this.geoJsonStyleOpacity,
             }),
-        });
-      } else {
-        tmp = L.geoJSON(<any>jsonFile, {
-          style: (feature) => ({
-            weight: this.geoJsonStyleWeight,
-            color: MapColors.getColor(
-              feature["properties"],
-              keys[f],
-              this.maxKeyValues[`maxValue_${keys[f]}`],
-              this.ratiosBetweenGrades,
-              parseInt(feature["properties"]["capacity"]) == 9999 ? true : false
-            ),
-            opacity: this.geoJsonStyleOpacity,
-          }),
-          onEachFeature: (feature, layer) =>
-            layer.on({
-              mouseover: (e) => this.highlightFeature(e, feature.properties),
-              mouseout: (e) => this.resetFeature(e, feature.properties),
+            onEachFeature: (feature, layer) =>
+              layer.on({
+                mouseover: (e) => this.highlightFeature(e, feature.properties),
+                mouseout: (e) => this.resetFeature(e, feature.properties),
+              }),
+          });
+        } else if (keys[f] == "pedestrianTravelTime") {
+          tmp = L.geoJSON(<any>jsonFile, {
+            style: (feature) => ({
+              weight: this.geoJsonStyleWeight,
+              color: MapColors.getColor(
+                feature["properties"]["cityWide"]["traffic"]
+                  .pedestrianTravelTime ||
+                  feature["properties"].pedestrianTravelTime,
+                keys[f],
+                this.maxKeyValues[`maxValue_${keys[f]}`],
+                ratiosBetweenGrades,
+                parseInt(feature["properties"]["capacity"]) == 9999
+                  ? true
+                  : false
+              ),
+              opacity: this.geoJsonStyleOpacity,
             }),
-        });
+            onEachFeature: (feature, layer) =>
+              layer.on({
+                mouseover: (e) => this.highlightFeature(e, feature.properties),
+                mouseout: (e) => this.resetFeature(e, feature.properties),
+              }),
+          });
+        } else {
+          tmp = L.geoJSON(<any>jsonFile, {
+            style: (feature) => ({
+              weight: this.geoJsonStyleWeight,
+              color: MapColors.getColor(
+                feature["properties"],
+                keys[f],
+                this.maxKeyValues[`maxValue_${keys[f]}`],
+                ratiosBetweenGrades,
+                parseInt(feature["properties"]["capacity"]) == 9999
+                  ? true
+                  : false
+              ),
+              opacity: this.geoJsonStyleOpacity,
+            }),
+            onEachFeature: (feature, layer) =>
+              layer.on({
+                mouseover: (e) => this.highlightFeature(e, feature.properties),
+                mouseout: (e) => this.resetFeature(e, feature.properties),
+              }),
+          });
+        }
       }
       tmp["myKey"] = keys[f];
       res.push(tmp);
@@ -587,4 +639,37 @@ export class ResultsMapComponent {
       });
     }
   }
+
+  openOverviewOfIndicators(dialog: TemplateRef<any>) {
+    this.dialogService.open(dialog, {
+      context: this.selectedSimulation["city"]["cityId"],
+    });
+  }
+
+  resetLayersAndButton() {
+    let timeout = 100;
+    if (this.map != undefined) {
+      this.map.eachLayer((layer) => {
+        if (layer["feature"] != undefined) {
+          setTimeout(() => {
+            this.map.removeLayer(layer);
+            timeout += 50;
+          }, timeout);
+        }
+      });
+
+      if (this.radioButtonLayersControl)
+        this.radioButtonLayersControl.remove(this.map);
+    }
+    this.setLegend(undefined);
+  }
+
+  ngOnChanges() {
+    this.resetLayersAndButton();
+    this.selectedGeojson = "";
+
+    Object.entries(this.loadGeojsons).forEach((entry) => {
+      entry[1]["response"] = undefined;
+    });
+  }
 }
diff --git a/src/assets/images/overviewOfIndicatorsAmsterdam.png b/src/assets/images/overviewOfIndicatorsAmsterdam.png
new file mode 100644
index 0000000000000000000000000000000000000000..06b8ff8eadfc3d28210c222b8bf1f0e182406e3d
Binary files /dev/null and b/src/assets/images/overviewOfIndicatorsAmsterdam.png differ
diff --git a/src/assets/images/overviewOfIndicatorsBilbao.png b/src/assets/images/overviewOfIndicatorsBilbao.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1412b8aa99c3db2cf2de7f32d5325b671984f91
Binary files /dev/null and b/src/assets/images/overviewOfIndicatorsBilbao.png differ
diff --git a/src/assets/images/overviewOfIndicatorsHelsinki.png b/src/assets/images/overviewOfIndicatorsHelsinki.png
new file mode 100644
index 0000000000000000000000000000000000000000..97521a8252ce50e181a6f27038f572721380d81b
Binary files /dev/null and b/src/assets/images/overviewOfIndicatorsHelsinki.png differ
diff --git a/src/assets/images/overviewOfIndicatorsMessina.png b/src/assets/images/overviewOfIndicatorsMessina.png
new file mode 100644
index 0000000000000000000000000000000000000000..12900cd5021e9868289266dc067dda3a3da74b66
Binary files /dev/null and b/src/assets/images/overviewOfIndicatorsMessina.png differ