un hardcoded some colors

src/app/pages/simulation-wizard/results-map/map-colors-local.ts

@@ -127,9 +127,7 @@ export function getColorHighToLow(
     : color_0;
 }
 
-export function getColorForLegend(
-  id: number,
-): string {
+export function getColorForLegend(id: number): string {
   return id == 5
     ? color_0
     : id == 4
@@ -142,3 +140,5 @@ export function getColorForLegend(
     ? color_4
     : color_5;
 }
+
+export const colorsAll = [color_0, color_1, color_2, color_3, color_4, color_5];

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

@@ -69,67 +69,62 @@
         <section>
           <div>
             <div>
-              <label style="background: #35b499" for="">1st color, up to</label>
+              <label for="">1st color, up to</label>
               <input
                 nbInput
                 size="tiny"
                 type="number"
                 min="0"
                 max="1000000"
-                style="background-color: #35b499"
                 formControlName="legend_0"
               />
             </div>
             <div>
-              <label style="background: #6da5cc" for="">2nd color, up to</label>
+              <label for="">2nd color, up to</label>
               <input
                 nbInput
                 size="tiny"
                 type="number"
                 min="0"
                 max="1000000"
-                style="background-color: #6da5cc"
                 formControlName="legend_1"
               />
             </div>
             <div>
-              <label style="background: #c2e3ee" for="">3rd color, up to</label>
+              <label for="">3rd color, up to</label>
               <input
                 nbInput
                 size="tiny"
                 type="number"
                 min="0"
                 max="1000000"
-                style="background-color: #c2e3ee"
                 formControlName="legend_2"
               />
             </div>
             <div>
-              <label style="background: #fed98b" for="">4th color, up to</label>
+              <label for="">4th color, up to</label>
               <input
                 nbInput
                 size="tiny"
                 type="number"
                 min="0"
                 max="1000000"
-                style="background-color: #fed98b"
                 formControlName="legend_3"
               />
             </div>
             <div>
-              <label style="background: #f57d4a" for="">5th color, up to</label>
+              <label for="">5th color, up to</label>
               <input
                 nbInput
                 size="tiny"
                 type="number"
                 min="0"
                 max="1000000"
-                style="background-color: #f57d4a"
                 formControlName="legend_4"
               />
             </div>
             <div>
-              <label style="background: #a50026" for=""
+              <label for=""
                 >6th color, up to unlimited</label
               >
             </div>

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

@@ -55,6 +55,22 @@ export class ResultsMapComponent implements OnChanges {
   onMapReady(map: L.Map) {
     this.map = map;
     this.grayscaleChange();
+
+    const legendLabels = document.querySelectorAll(
+      "#inputsLegendContainer section > div > div > label"
+    );
+    for (let i = 0; i < legendLabels.length; i++) {
+      (legendLabels[i] as HTMLElement).style.backgroundColor =
+        MapColors.colorsAll[legendLabels.length - i - 1];
+    }
+    const inputsLegend = document.querySelectorAll(
+      "#inputsLegendContainer section > div > div > input"
+    );
+    for (let i = 0; i < inputsLegend.length; i++) {
+      (inputsLegend[i] as HTMLElement).style.backgroundColor =
+        MapColors.colorsAll[inputsLegend.length - i];
+    }
+
     setTimeout(() => {
       this.map.invalidateSize();
       this.networkService.getMapInfo().subscribe((res) => {
@@ -807,6 +823,11 @@ export class ResultsMapComponent implements OnChanges {
       this.radioButtonLayersControl.remove(this.map);
     this.resetLayersAndButton();
 
+    console.log(
+      "%c hardcoded 3 here",
+      "background: red; color: black; font-weight: bold;"
+    );
+
     const keys = this.extractKeys(this.loadGeojsons[3]["response"]);
     const jsonFile = this.loadGeojsons[3]["response"];
     let propertyGeojsons = [];