Skip to content
Snippets Groups Projects
Commit c085ef05 authored by zdenko.vuk@ijs.si's avatar zdenko.vuk@ijs.si
Browse files

Merge branch '10-map-legend-upgrades' into 'master'

Resolve "map legend upgrades"

Closes #10

See merge request urbanite/private/wp5-integration-and-devops/urbanite-ui-template!17
parents 46d0b62c 5d7ddbe1
Branches
No related tags found
No related merge requests found
......@@ -422,7 +422,7 @@ export class ExistingSimulationsComponent implements OnInit {
);
this.runDss.status = "";
// rudimentary way of concincing our-spider-chart to redownload evaluated json
// rudimentary way of convincing our-spider-chart to redownload evaluated json
this.selectedSimulationToEmit.emit(undefined);
setTimeout(() => {
this.selectedSimulationToEmit.emit(this.selectedSimulation);
......
......@@ -28,7 +28,7 @@
padding: 4px 3px 0 3px;
}
#loadGeojsonButtonsContainer {
z-index: 1003;
z-index: 997;
position: absolute;
top: 5px;
left: 57px;
......
......@@ -5,6 +5,7 @@ import * as MapColors from "./map-colors-local";
import { legendInverted, ratiosBetweenGrades } from "./results-map-settings";
import { NbToastrService, NbDialogService } from "@nebular/theme";
import { Simulation } from "../utils/data/simulation";
import { NetworkService } from "../utils/services/network.service";
@Component({
selector: "ngx-results-map",
......@@ -39,13 +40,17 @@ export class ResultsMapComponent implements OnChanges {
constructor(
private simulationService: SimulationService,
private toastrService: NbToastrService,
private dialogService: NbDialogService
private dialogService: NbDialogService,
private networkService: NetworkService
) {}
onMapReady(map: L.Map) {
this.map = map;
this.grayscaleChange();
setTimeout(() => {
this.map.invalidateSize();
this.networkService.getMapInfo().subscribe((res) => {
this.setMapPositionAndZoom(res);
});
}, 50);
// setTimeout(() => {
// console.log(
......@@ -53,7 +58,7 @@ export class ResultsMapComponent implements OnChanges {
// "background: crimson; font-weight: bold; color: black; font-family: serif; padding: 0 10px;"
// );
// const celkomplet: HTMLElement = document.querySelectorAll(
// ".ng-tns-c441-0.appearance-filled.size-medium.shape-rectangle.status-primary.ng-star-inserted.nb-transition"
// ".appearance-filled.size-medium.shape-rectangle.status-primary.ng-star-inserted.nb-transition"
// )[1] as HTMLElement;
// celkomplet.click();
// }, 995);
......@@ -63,7 +68,7 @@ export class ResultsMapComponent implements OnChanges {
// "background: peru; font-weight: bold; color: black; font-family: serif; padding: 0 10px;"
// );
// const celkomplet: HTMLElement = document.querySelectorAll(
// ".buttons.ng-tns-c441-0"
// ".buttons"
// )[0] as HTMLElement;
// celkomplet.style.display = "none";
// }, 1000);
......@@ -72,7 +77,7 @@ export class ResultsMapComponent implements OnChanges {
onLoadClick(selectedKpi: string) {
this.selectedGeojson = selectedKpi;
this.resetLayersAndButton();
this.setMapZoomAndLoadGeojsons();
this.setLoadGeojsons();
if (this.radioButtonLayersControl)
this.radioButtonLayersControl.remove(this.map);
......@@ -122,7 +127,7 @@ export class ResultsMapComponent implements OnChanges {
if (res["message"] == "Calculating...") {
this.toastrService.show(
"Server says: Calculating the KPI visualization. GEOJSON loading will not be completed.",
"Server says: Calculating the KPI visualization. GEOJSON loading will not be completed. When it will be ready, you will need to refresh the page.",
"Geojson not ready",
{
status: "danger",
......@@ -175,9 +180,12 @@ export class ResultsMapComponent implements OnChanges {
if (
propertyGeojsons[i].myKey == "link_id" ||
propertyGeojsons[i].myKey == "modes" ||
propertyGeojsons[i].myKey == "internal_travel_by_mode"
)
propertyGeojsons[i].myKey == "internal_travel_by_mode" ||
propertyGeojsons[i].myKey == "pt_vehicles"
) {
console.log("Ignoring key ", propertyGeojsons[i].myKey);
continue;
}
obj[`${keys[i]}`] = propertyGeojsons[i];
}
this.radioButtonLayersControl = new L.Control.Layers(obj, null, {
......@@ -613,124 +621,17 @@ export class ResultsMapComponent implements OnChanges {
el.style.filter = "grayscale(" + (100 - this.grayscale) + "%)";
}
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,
buttonValue: "bikeability",
buttonLabel: "bikeability",
},
{
response: undefined,
buttonValue: "bikeIntensity",
buttonLabel: "bike Intensity",
},
{
response: undefined,
buttonValue: "bikeSafety",
buttonLabel: "bike Safety",
},
{
response: undefined,
buttonValue: "pollution",
buttonLabel: "pollution",
},
];
} else if (this.selectedSimulation["city"]["cityId"] == "bilbao") {
this.map.setView(new L.LatLng(43.3, -2.9), 9);
console.log(
"%c buttons set might not be the right ones for bilbao",
"background: indianred; font-weight: bold; color: black; font-family: serif; padding: 0 10px;"
);
this.loadGeojsons = [
{
response: undefined,
buttonValue: "bikeability",
buttonLabel: "bikeability",
},
{
response: undefined,
buttonValue: "bikeIntensity",
buttonLabel: "bike Intensity",
},
{
response: undefined,
buttonValue: "bikeSafety",
buttonLabel: "bike Safety",
},
{
response: undefined,
buttonValue: "pollution",
buttonLabel: "pollution",
},
];
} else if (this.selectedSimulation["city"]["cityId"] == "helsinki") {
this.map.setView(
new L.LatLng(60.16005488265436, 24.920971999284017),
13
);
this.loadGeojsons = [
{
response: undefined,
buttonValue: "congestionsAndBottlenecks",
buttonLabel: "congestions And Bottlenecks",
},
{
response: undefined,
buttonValue: "harbourAreaTrafficFlow",
buttonLabel: "harbour Area Traffic Flow",
},
{
response: undefined,
buttonValue: "accousticPollution",
buttonLabel: "accoustic Pollution",
},
{
response: undefined,
buttonValue: "pollution",
buttonLabel: "pollution",
},
];
} else if (this.selectedSimulation["city"]["cityId"] == "messina") {
this.map.setView(
new L.LatLng(38.10119097299323, 15.491646372349038),
9
);
console.log(
"%c buttons set might not be the right ones for messina",
"background: magenta; font-weight: bold; color: black; font-family: serif; padding: 0 10px;"
);
this.loadGeojsons = [
{
response: undefined,
buttonValue: "bikeability",
buttonLabel: "bikeability",
},
{
response: undefined,
buttonValue: "bikeIntensity",
buttonLabel: "bike Intensity",
},
{
response: undefined,
buttonValue: "bikeSafety",
buttonLabel: "bike Safety",
},
{
response: undefined,
buttonValue: "pollution",
buttonLabel: "pollution",
},
];
} else {
this.toastrService.show("Unexpected value for city name.", "Error", {
status: "danger",
setLoadGeojsons() {
this.networkService.getKpiVisInfo().subscribe((res) => {
this.loadGeojsons = [];
res.forEach((but) => {
this.loadGeojsons.push({
response: undefined,
buttonValue: but["buttonValue"],
buttonLabel: but["buttonLabel"],
});
}
}
});
});
}
openOverviewOfIndicators(dialog: TemplateRef<any>) {
......@@ -765,6 +666,13 @@ export class ResultsMapComponent implements OnChanges {
entry[1]["response"] = undefined;
});
this.setMapZoomAndLoadGeojsons();
this.setLoadGeojsons();
}
setMapPositionAndZoom(res: Object) {
this.map.setView(
new L.LatLng(res["coordinates"]["lat"], res["coordinates"]["lon"]),
res["zoom"]
);
}
}
......@@ -81,4 +81,24 @@ export class NetworkService {
})
);
}
getMapInfo(): Observable<any> {
return this.httpClient.get(`${this.dssUrl}/map-info`).pipe(
map((res) => {
return res;
}),
tapDebugApi,
catchError(this.handleError)
);
}
getKpiVisInfo(): Observable<any> {
return this.httpClient.get(`${this.dssUrl}/kpi-vis-info`).pipe(
map((res) => {
return res;
}),
tapDebugApi,
catchError(this.handleError)
);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment