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 7f29ec8cd68762ee558b0815b2485305660cd5e3..150f685fc9333bc3092ae2ff6e7db4b157fab015 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
@@ -15,47 +15,10 @@ const color_5 = "#35b499";
const color_capacity_equal_9999 = "#ffffff00";
const color_value_undefined = "#9efcff33";
-export function getNewColor(
- bioSection,
- properties: any,
- pro: any,
- isCapacityEqual9999: boolean
-): string {
- if (isCapacityEqual9999 == true) {
- return color_capacity_equal_9999;
- }
- let value = undefined;
-
- if (pro == "pedestrianTravelTime") {
- value = properties;
- } else {
- for (let key in properties) {
- if (key == pro) {
- value = properties[key];
- }
- }
- }
-
- if (value == undefined) return color_value_undefined;
-
- return value > bioSection.get("legend_4").value
- ? color_0
- : value > bioSection.get("legend_3").value
- ? color_1
- : value > bioSection.get("legend_2").value
- ? color_2
- : value > bioSection.get("legend_1").value
- ? color_3
- : value > bioSection.get("legend_0").value
- ? color_4
- : color_5;
-}
-
export function getColor(
properties: any,
pro: any,
- max: number,
- ratiosBetweenGrades: number[],
+ ograjice: number[],
isCapacityEqual9999: boolean
): string {
if (isCapacityEqual9999 == true) {
@@ -63,7 +26,11 @@ export function getColor(
}
let value = undefined;
- if (pro == "pedestrianTravelTime") {
+ if (
+ pro == "pedestrianTravelTime" ||
+ pro == "dailyInternalBikeTravels" ||
+ pro == "capacity"
+ ) {
value = properties;
} else {
for (let key in properties) {
@@ -75,24 +42,23 @@ export function getColor(
if (value == undefined) return color_value_undefined;
- return value > max / ratiosBetweenGrades[4]
+ return value > ograjice[4]
? color_0
- : value > max / ratiosBetweenGrades[3]
+ : value > ograjice[3]
? color_1
- : value > max / ratiosBetweenGrades[2]
+ : value > ograjice[2]
? color_2
- : value > max / ratiosBetweenGrades[1]
+ : value > ograjice[1]
? color_3
- : value > max / ratiosBetweenGrades[0]
+ : value > ograjice[0]
? color_4
: color_5;
}
-export function getColorHighToLow(
+export function getColorOgrajiceHighToLow(
properties: any,
pro: any,
- max: number,
- ratiosBetweenGrades: number[],
+ ograjice: number[],
isCapacityEqual9999: boolean
): string {
if (isCapacityEqual9999 == true) {
@@ -100,9 +66,11 @@ export function getColorHighToLow(
}
let value = undefined;
- if (pro == "dailyInternalBikeTravels") {
- value = properties;
- } else if (pro == "capacity") {
+ if (
+ pro == "pedestrianTravelTime" ||
+ pro == "dailyInternalBikeTravels" ||
+ pro == "capacity"
+ ) {
value = properties;
} else {
for (let key in properties) {
@@ -114,15 +82,15 @@ export function getColorHighToLow(
if (value == undefined) return color_value_undefined;
- return value > max / ratiosBetweenGrades[4]
+ return value > ograjice[4]
? color_5
- : value > max / ratiosBetweenGrades[3]
+ : value > ograjice[3]
? color_4
- : value > max / ratiosBetweenGrades[2]
+ : value > ograjice[2]
? color_3
- : value > max / ratiosBetweenGrades[1]
+ : value > ograjice[1]
? color_2
- : value > max / ratiosBetweenGrades[0]
+ : value > ograjice[0]
? color_1
: color_0;
}
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 54ecdc058437a7f330a224f7bba303c61eeb678c..d4e57c2c4e3a92b004054ae4e9d72eb2c4c5d16e 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
@@ -41,6 +41,7 @@ export class ResultsMapComponent implements OnInit, OnChanges {
grayscale: number = 50;
loadGeojsons: Object[] = [];
maxKeyValues: Object = {};
+ ograjiceValues: Object = {};
newBrinkValuesForm = new FormGroup({
legend_0: new FormControl(undefined),
legend_1: new FormControl(undefined),
@@ -73,34 +74,34 @@ export class ResultsMapComponent implements OnInit, OnChanges {
this.setMapPositionAndZoom(res);
});
}, 50);
- // setTimeout(() => {
- // console.log(
- // "%cTemporary",
- // "background: peru; font-weight: bold; color: black; font-family: serif; padding: 0 10px;"
- // );
- // const celkomplet: HTMLElement = document.querySelectorAll(
- // ".buttons"
- // )[0] as HTMLElement;
- // celkomplet.style.display = "none";
- // }, 825);
- // setTimeout(() => {
- // const celkomplet1: HTMLElement = document.querySelectorAll(
- // ".appearance-filled.size-medium.shape-rectangle.status-primary.ng-star-inserted.nb-transition"
- // )[1] as HTMLElement;
- // celkomplet1.click();
- // }, 1000);
- // setTimeout(() => {
- // const celkomplet2: HTMLElement = document.querySelectorAll(
- // "#loadGeojsonButtonsContainer button"
- // )[1] as HTMLElement;
- // celkomplet2.click();
- // }, 1050);
- // setTimeout(() => {
- // const celkomplet3: HTMLElement = document.querySelectorAll(
- // ".leaflet-control-layers-selector"
- // )[2] as HTMLElement;
- // celkomplet3.click();
- // }, 2228);
+ setTimeout(() => {
+ console.log(
+ "%cTemporary",
+ "background: peru; font-weight: bold; color: black; font-family: serif; padding: 0 10px;"
+ );
+ const celkomplet: HTMLElement = document.querySelectorAll(
+ ".buttons"
+ )[0] as HTMLElement;
+ celkomplet.style.display = "none";
+ }, 825);
+ setTimeout(() => {
+ const celkomplet1: HTMLElement = document.querySelectorAll(
+ ".appearance-filled.size-medium.shape-rectangle.status-primary.ng-star-inserted.nb-transition"
+ )[1] as HTMLElement;
+ celkomplet1.click();
+ }, 1000);
+ setTimeout(() => {
+ const celkomplet2: HTMLElement = document.querySelectorAll(
+ "#loadGeojsonButtonsContainer button"
+ )[1] as HTMLElement;
+ celkomplet2.click();
+ }, 1050);
+ setTimeout(() => {
+ const celkomplet3: HTMLElement = document.querySelectorAll(
+ ".leaflet-control-layers-selector"
+ )[8] as HTMLElement;
+ celkomplet3.click();
+ }, 2228);
}
onLoadClick(selectedKpi: string) {
@@ -223,116 +224,6 @@ export class ResultsMapComponent implements OnInit, OnChanges {
this.newBrinkValuesApplied = true;
}
- 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) {
- direction = "lowToHigh";
- } else {
- direction = "highToLow";
- }
-
- if (
- this.maxKeyValues["maxValue_" + legendType] == undefined ||
- this.maxKeyValues["maxValue_" + legendType] == 0
- ) {
- this.toastrService.info(
- "Geojson not displayed because all values are undefined or zero!",
- "Geojson not displayed"
- );
- let div = L.DomUtil.create("div");
- div.innerHTML += `<p style='background:white; display: inline; font-size:17px; padding: 0 7px; background: #ff3d71'>Values for ${legendType} kpi are undefined or zero!</p>`;
- return div;
- }
-
- var div = L.DomUtil.create("div");
- let grades;
-
- if (this.newBrinkValuesApplied == true) {
- grades = [
- 0,
- this.newBrinkValuesForm.get("legend_0").value,
- this.newBrinkValuesForm.get("legend_1").value,
- this.newBrinkValuesForm.get("legend_2").value,
- this.newBrinkValuesForm.get("legend_3").value,
- this.newBrinkValuesForm.get("legend_4").value,
- ];
- } else {
- grades = [
- 0,
- this.limitMyDigits(
- this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[0]
- ),
- this.limitMyDigits(
- this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[1]
- ),
- this.limitMyDigits(
- this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[2]
- ),
- this.limitMyDigits(
- this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[3]
- ),
- this.limitMyDigits(
- this.maxKeyValues["maxValue_" + legendType] / ratiosBetweenGrades[4]
- ),
- ];
- }
-
- this.setInputsLegendContainerColors(direction);
-
- if (direction == "lowToHigh") {
- div.innerHTML +=
- "<p style='background:white; display: inline; font-size:17px'> <span style='color:" +
- MapColors.getColorForLegend(0) +
- "'>■</span> <" +
- grades[1] +
- "</p>";
- for (let i = 1; i < 6; i++) {
- div.innerHTML +=
- "<p style='background:white; display: inline; font-size:17px'> <span style='color:" +
- MapColors.getColorForLegend(i) +
- "'>■</span> " +
- grades[i] +
- (grades[i + 1] ? "–" + grades[i + 1] + "</p>" : "+</p>");
- this.newBrinkValuesForm
- .get(`legend_${i - 1}`)
- .setValue(`${grades[i]}`);
- }
- } else {
- div.innerHTML +=
- "<p style='background:white; display: inline; font-size:17px'> <span style='color:" +
- MapColors.getColorForLegendHighToLow(0) +
- "'>■</span> <" +
- grades[1] +
- "</p>";
-
- for (let i = 1; i < 6; i++) {
- div.innerHTML +=
- "<p style='background:white; display: inline; font-size:17px'> <span style='color:" +
- MapColors.getColorForLegendHighToLow(i) +
- "'>■</span> " +
- grades[i] +
- (grades[i + 1] ? "–" + grades[i + 1] + "</p>" : "+</p>");
-
- this.newBrinkValuesForm
- .get(`legend_${i - 1}`)
- .setValue(`${grades[i]}`);
- }
- }
-
- return div;
- };
- this.mapLegend.addTo(this.map);
- }
-
private highlightFeature(e, feature) {
const layer = e.target;
let text = "";
@@ -391,7 +282,7 @@ export class ResultsMapComponent implements OnInit, OnChanges {
});
}
- private resetFeature(e, feature) {
+ private resetFeature(e) {
const layer = e.target;
layer.setStyle({
@@ -466,19 +357,22 @@ export class ResultsMapComponent implements OnInit, OnChanges {
});
} else {
if (this.newBrinkValuesApplied) {
+ let ograjice = [];
+ ograjice.push(this.newBrinkValuesForm.get("legend_0").value);
+ ograjice.push(this.newBrinkValuesForm.get("legend_1").value);
+ ograjice.push(this.newBrinkValuesForm.get("legend_2").value);
+ ograjice.push(this.newBrinkValuesForm.get("legend_3").value);
+ ograjice.push(this.newBrinkValuesForm.get("legend_4").value);
+ this.ograjiceValues[keys[f]] = ograjice;
+
if (keys[f] == "capacity") {
- console.log(
- "%c this has yet to be done, exception for capacity",
- "background: maroon; color: black; font-weight: bold;"
- );
tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({
weight: this.geoJsonStyleWeight,
- color: MapColors.getColorHighToLow(
+ color: MapColors.getColorOgrajiceHighToLow(
feature["properties"]["capacity"],
keys[f],
- this.maxKeyValues[`maxValue_${keys[f]}`],
- ratiosBetweenGrades,
+ ograjice,
parseInt(feature["properties"]["capacity"]) == 9999
? true
: false
@@ -489,29 +383,22 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({
mouseover: (e) =>
this.highlightFeature(e, feature.properties),
- mouseout: (e) => this.resetFeature(e, feature.properties),
+ mouseout: (e) => this.resetFeature(e),
}),
});
} else if (
keys[f] == "dailyInternalBikeTravels" ||
keys[f] == "pedestrianTravelTime"
) {
- console.log(
- "%c this has yet to be done, exception for dailyInternalBikeTravels or pedestrianTravelTime",
- "background: sienna; color: black; font-weight: bold;"
- );
tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({
weight: this.geoJsonStyleWeight,
- color: MapColors.getColorHighToLow(
+ color: MapColors.getColor(
feature["properties"]["cityWide"]["traffic"][keys[f]] ||
feature["properties"][keys[f]],
keys[f],
- this.maxKeyValues[`maxValue_${keys[f]}`],
- ratiosBetweenGrades,
- parseInt(feature["properties"]["capacity"]) == 9999
- ? true
- : false
+ ograjice,
+ false
),
opacity: this.geoJsonStyleOpacity,
}),
@@ -519,21 +406,18 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({
mouseover: (e) =>
this.highlightFeature(e, feature.properties),
- mouseout: (e) => this.resetFeature(e, feature.properties),
+ mouseout: (e) => this.resetFeature(e),
}),
});
} else if (legendInverted.indexOf(keys[f]) > -1) {
- console.log(" inverted and after new values");
tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({
weight: this.geoJsonStyleWeight,
- color: MapColors.getNewColor(
- this.newBrinkValuesForm,
+ color: MapColors.getColorOgrajiceHighToLow(
feature["properties"],
keys[f],
- parseInt(feature["properties"]["capacity"]) == 9999
- ? true
- : false
+ ograjice,
+ false
),
opacity: this.geoJsonStyleOpacity,
}),
@@ -541,20 +425,18 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({
mouseover: (e) =>
this.highlightFeature(e, feature.properties),
- mouseout: (e) => this.resetFeature(e, feature.properties),
+ mouseout: (e) => this.resetFeature(e),
}),
});
} else {
tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({
weight: this.geoJsonStyleWeight,
- color: MapColors.getNewColor(
- this.newBrinkValuesForm,
+ color: MapColors.getColor(
feature["properties"],
keys[f],
- parseInt(feature["properties"]["capacity"]) == 9999
- ? true
- : false
+ ograjice,
+ false
),
opacity: this.geoJsonStyleOpacity,
}),
@@ -562,21 +444,28 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({
mouseover: (e) =>
this.highlightFeature(e, feature.properties),
- mouseout: (e) => this.resetFeature(e, feature.properties),
+ mouseout: (e) => this.resetFeature(e),
}),
});
}
} else {
// default, newBrinkValuesForm not applied
+ let ograjice = [];
+ ratiosBetweenGrades.forEach((r) => {
+ ograjice.push(
+ this.roundMyNumbers(this.maxKeyValues[`maxValue_${keys[f]}`] / r)
+ );
+ });
+ this.ograjiceValues[keys[f]] = ograjice;
+
if (keys[f] == "capacity") {
tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({
weight: this.geoJsonStyleWeight,
- color: MapColors.getColorHighToLow(
+ color: MapColors.getColorOgrajiceHighToLow(
feature["properties"]["capacity"],
keys[f],
- this.maxKeyValues[`maxValue_${keys[f]}`],
- ratiosBetweenGrades,
+ ograjice,
parseInt(feature["properties"]["capacity"]) == 9999
? true
: false
@@ -587,7 +476,7 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({
mouseover: (e) =>
this.highlightFeature(e, feature.properties),
- mouseout: (e) => this.resetFeature(e, feature.properties),
+ mouseout: (e) => this.resetFeature(e),
}),
});
} else if (
@@ -597,15 +486,12 @@ export class ResultsMapComponent implements OnInit, OnChanges {
tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({
weight: this.geoJsonStyleWeight,
- color: MapColors.getColorHighToLow(
+ color: MapColors.getColor(
feature["properties"]["cityWide"]["traffic"][keys[f]] ||
feature["properties"][keys[f]],
keys[f],
- this.maxKeyValues[`maxValue_${keys[f]}`],
- ratiosBetweenGrades,
- parseInt(feature["properties"]["capacity"]) == 9999
- ? true
- : false
+ ograjice,
+ false
),
opacity: this.geoJsonStyleOpacity,
}),
@@ -613,22 +499,18 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({
mouseover: (e) =>
this.highlightFeature(e, feature.properties),
- mouseout: (e) => this.resetFeature(e, feature.properties),
+ mouseout: (e) => this.resetFeature(e),
}),
});
} else if (legendInverted.indexOf(keys[f]) > -1) {
- // default but inverted
tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({
weight: this.geoJsonStyleWeight,
- color: MapColors.getColorHighToLow(
- feature["properties"] || feature["properties"][keys[f]],
+ color: MapColors.getColorOgrajiceHighToLow(
+ feature["properties"],
keys[f],
- this.maxKeyValues[`maxValue_${keys[f]}`],
- ratiosBetweenGrades,
- parseInt(feature["properties"]["capacity"]) == 9999
- ? true
- : false
+ ograjice,
+ false
),
opacity: this.geoJsonStyleOpacity,
}),
@@ -636,7 +518,7 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({
mouseover: (e) =>
this.highlightFeature(e, feature.properties),
- mouseout: (e) => this.resetFeature(e, feature.properties),
+ mouseout: (e) => this.resetFeature(e),
}),
});
} else {
@@ -646,11 +528,8 @@ export class ResultsMapComponent implements OnInit, OnChanges {
color: MapColors.getColor(
feature["properties"],
keys[f],
- this.maxKeyValues[`maxValue_${keys[f]}`],
- ratiosBetweenGrades,
- parseInt(feature["properties"]["capacity"]) == 9999
- ? true
- : false
+ ograjice,
+ false
),
opacity: this.geoJsonStyleOpacity,
}),
@@ -658,7 +537,7 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({
mouseover: (e) =>
this.highlightFeature(e, feature.properties),
- mouseout: (e) => this.resetFeature(e, feature.properties),
+ mouseout: (e) => this.resetFeature(e),
}),
});
}
@@ -780,6 +659,114 @@ export class ResultsMapComponent implements OnInit, OnChanges {
}
}
+ public roundMyNumbers(n: number): number {
+ if (n > 1000) {
+ return Math.floor(n / 1000) * 1000;
+ } else if (n > 100) {
+ return Math.floor(n / 100) * 100;
+ } else if (n > 10) {
+ return Math.floor(n / 10) * 10;
+ } else if (n > 1) {
+ return Math.floor(n / 1) * 1;
+ } else if (n > 0.1) {
+ return Math.floor(n * 10) / 10;
+ } else if (n > 0.01) {
+ return Math.floor(n * 100) / 100;
+ } else if (n > 0.001) {
+ return Math.floor(n * 1000) / 1000;
+ } else if (n > 0.0001) {
+ return Math.floor(n * 10000) / 10000;
+ } else if (n > 0.00001) {
+ return Math.floor(n * 100000) / 100000;
+ } else {
+ return n;
+ }
+ }
+
+ 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) {
+ direction = "lowToHigh";
+ } else {
+ direction = "highToLow";
+ }
+
+ if (
+ this.maxKeyValues["maxValue_" + legendType] == undefined ||
+ this.maxKeyValues["maxValue_" + legendType] == 0
+ ) {
+ this.toastrService.info(
+ "Geojson not displayed because all values are undefined or zero!",
+ "Geojson not displayed"
+ );
+ let div = L.DomUtil.create("div");
+ div.innerHTML += `<p style='background:white; display: inline; font-size:17px; padding: 0 7px; background: #ff3d71'>Values for ${legendType} kpi are undefined or zero!</p>`;
+ return div;
+ }
+
+ var div = L.DomUtil.create("div");
+
+ this.setInputsLegendContainerColors(direction);
+
+ if (direction == "lowToHigh") {
+ div.innerHTML +=
+ "<p style='background:white; display: inline; font-size:17px'> <span style='color:" +
+ MapColors.getColorForLegend(0) +
+ "'>■</span> <" +
+ this.ograjiceValues[legendType][0] +
+ "</p>";
+ for (let i = 1; i < 6; i++) {
+ div.innerHTML +=
+ "<p style='background:white; display: inline; font-size:17px'> <span style='color:" +
+ MapColors.getColorForLegend(i) +
+ "'>■</span> " +
+ this.ograjiceValues[legendType][i - 1] +
+ (this.ograjiceValues[legendType][i]
+ ? "–" + this.ograjiceValues[legendType][i] + "</p>"
+ : "+</p>");
+
+ this.newBrinkValuesForm
+ .get(`legend_${i - 1}`)
+ .setValue(`${this.ograjiceValues[legendType][i - 1]}`);
+ }
+ } else {
+ div.innerHTML +=
+ "<p style='background:white; display: inline; font-size:17px'> <span style='color:" +
+ MapColors.getColorForLegendHighToLow(0) +
+ "'>■</span> <" +
+ this.ograjiceValues[legendType][0] +
+ "</p>";
+
+ for (let i = 0; i < 5; i++) {
+ div.innerHTML +=
+ "<p style='background:white; display: inline; font-size:17px'> <span style='color:" +
+ MapColors.getColorForLegendHighToLow(i + 1) +
+ "'>■</span> " +
+ this.ograjiceValues[legendType][i] +
+ (this.ograjiceValues[legendType][i + 1]
+ ? "–" + this.ograjiceValues[legendType][i + 1] + "</p>"
+ : "+</p>");
+
+ this.newBrinkValuesForm
+ .get(`legend_${i}`)
+ .setValue(`${this.ograjiceValues[legendType][i]}`);
+ }
+ }
+
+ return div;
+ };
+ this.mapLegend.addTo(this.map);
+ }
+
grayscaleChange() {
const el = <HTMLElement>(
document.querySelectorAll(".leaflet-pane.leaflet-tile-pane")[0]