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 e1c6c6f0a0e88ed64bd83fac52721355b5ea22f9..0198118bcb5fd35ce10208c6d5678554dde36702 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 @@ -22,10 +22,12 @@ [status]="selectedGeojson == l.buttonLabel ? 'control' : 'primary'" *ngFor="let l of loadGeojsons" > - load {{ l.buttonLabel }} geojson + {{ l.buttonLabel }} geojson </button> + <span class="flex-grow-1"></span> <button nbButton + size="small" (click)="openOverviewOfIndicators(dialog)" nbTooltip="click for overview of indicators" [disabled]="selectedSimulation == undefined" 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 8541f1068723f0048c0224f085fa3100577b162e..9e9931e5683ff4931f2367d252fe26876e4b14a7 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 @@ -35,7 +35,7 @@ width: calc(100% - 114px); border-radius: 0.25rem; display: flex; - justify-content: space-around; + justify-content: flex-start; flex-wrap: wrap; button { margin: 2px; 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 c5584b286657216b23e33e2c23fa510c8e7c5526..2a43842dc920674ece7bf436b177300d24615405 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 @@ -25,24 +25,7 @@ export class ResultsMapComponent implements OnChanges { }; 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", - }, - ]; + loadGeojsons: Object[] = []; checkedRadioButton: string = ""; geoJsonStyleWeight: number = 5; geoJsonStyleOpacity: number = 0.8; @@ -88,7 +71,7 @@ export class ResultsMapComponent implements OnChanges { onLoadClick(selectedKpi: string) { this.selectedGeojson = selectedKpi; this.resetLayersAndButton(); - this.setMapZoom(); + this.setMapZoomAndLoadGeojsons(); if (this.radioButtonLayersControl) this.radioButtonLayersControl.remove(this.map); @@ -624,19 +607,60 @@ export class ResultsMapComponent implements OnChanges { el.style.filter = "grayscale(" + (100 - this.grayscale) + "%)"; } - setMapZoom() { - if (this.selectedSimulation["city"]["cityId"] == "amsterdam") { - this.map.setView(new L.LatLng(52.4, 4.9), 9); - } else if (this.selectedSimulation["city"]["cityId"] == "bilbao") { - this.map.setView(new L.LatLng(43.3, -2.9), 9); - } else if (this.selectedSimulation["city"]["cityId"] == "helsinki") { - this.map.setView(new L.LatLng(60.2, 24.9), 9); - } else if (this.selectedSimulation["city"]["cityId"] == "messina") { - this.map.setView(new L.LatLng(38.2, 15.6), 9); - } else { - this.toastrService.show("Unexpected value for city name.", "Error", { - status: "danger", - }); + setMapZoomAndLoadGeojsons() { + if (this.selectedSimulation != undefined) { + if (this.selectedSimulation["city"]["cityId"] == "amsterdam") { + this.map.setView(new L.LatLng(52.4, 4.9), 9); + this.loadGeojsons = [ + { + response: undefined, + buttonLabel: "bikeability", + }, + { + response: undefined, + buttonLabel: "bikeIntensity", + }, + { + response: undefined, + buttonLabel: "bikeSafety", + }, + { + response: undefined, + buttonLabel: "pollution", + }, + ]; + } else if (this.selectedSimulation["city"]["cityId"] == "bilbao") { + this.map.setView(new L.LatLng(43.3, -2.9), 9); + } else if (this.selectedSimulation["city"]["cityId"] == "helsinki") { + this.map.setView( + new L.LatLng(60.16005488265436, 24.920971999284017), + 13 + ); + this.loadGeojsons = [ + { + response: undefined, + buttonLabel: "congestionsAndBottlenecks", + }, + { + response: undefined, + buttonLabel: "harbourAreaTrafficFlow", + }, + { + response: undefined, + buttonLabel: "accousticPollution", + }, + { + response: undefined, + buttonLabel: "pollution", + }, + ]; + } else if (this.selectedSimulation["city"]["cityId"] == "messina") { + this.map.setView(new L.LatLng(38.2, 15.6), 9); + } else { + this.toastrService.show("Unexpected value for city name.", "Error", { + status: "danger", + }); + } } } @@ -671,5 +695,7 @@ export class ResultsMapComponent implements OnChanges { Object.entries(this.loadGeojsons).forEach((entry) => { entry[1]["response"] = undefined; }); + + this.setMapZoomAndLoadGeojsons(); } }