This is a combination of 7 commits.

css update

wip

update

update

removed temporary content

made some changes on setlegend. Page currently loads cpu at 100% for a while, dunno why

also removed two logs

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;

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;

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

-import { Component, Input, TemplateRef } 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";
@@ -11,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: [
@@ -58,7 +58,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(() => {
@@ -75,6 +75,7 @@ export class ResultsMapComponent {
 
   onLoad(selectedKpi: string) {
     this.selectedGeojson = selectedKpi;
+    this.resetLayersAndButton();
     this.setMapZoom();
 
     if (this.radioButtonLayersControl)
@@ -165,6 +166,14 @@ export class ResultsMapComponent {
   }
 
   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 (legendInverted.indexOf(legendType) == -1) {
@@ -594,7 +603,30 @@ export class ResultsMapComponent {
 
   openOverviewOfIndicators(dialog: TemplateRef<any>) {
     this.dialogService.open(dialog, {
-      context: this.selectedSimulation["city"]["cityId"]
+      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 = "";
   }
 }