diff --git a/src/app/pages/simulation-wizard/results-map/map-colors-local.ts b/src/app/pages/simulation-wizard/results-map/map-colors-local.ts index fcbf11b5997f3972684ef08ed9d9f04a6d28d8c3..1d010ca82b672fa64f55f593b14a2f9ba495bc4c 100644 --- a/src/app/pages/simulation-wizard/results-map/map-colors-local.ts +++ b/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]; 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 b5af729b62edf9a82fb2ba46569b6801fa0bae67..7a835da1b62f5becb46d1660ce9d857134c7ddba 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 @@ -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> 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 e7823cbbc9d8b922a8f224b7d9cb81510a66aa8b..2f96355894d5aaed4fccc0bbf25e4cb96a26b53c 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 @@ -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 = [];