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

This is a combination of 6 commits. 

looks to be working

 deleted getColorHighToLow

 made some cleanup, more too follow

 now passing one argument less to reset

also removed getNewColor

done some furhter cleanup
parent fe8e2569
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/app/pages/simulation-wizard/results-map/map-colors-local.ts
+ 23
− 55
View file @ 42fbbeca
...@@ -15,47 +15,10 @@ const color_5 = "#35b499"; ...@@ -15,47 +15,10 @@ const color_5 = "#35b499";
const color_capacity_equal_9999 = "#ffffff00"; const color_capacity_equal_9999 = "#ffffff00";
const color_value_undefined = "#9efcff33"; 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( export function getColor(
properties: any, properties: any,
pro: any, pro: any,
max: number, ograjice: number[],
ratiosBetweenGrades: number[],
isCapacityEqual9999: boolean isCapacityEqual9999: boolean
): string { ): string {
if (isCapacityEqual9999 == true) { if (isCapacityEqual9999 == true) {
...@@ -63,7 +26,11 @@ export function getColor( ...@@ -63,7 +26,11 @@ export function getColor(
} }
let value = undefined; let value = undefined;
if (pro == "pedestrianTravelTime") { if (
pro == "pedestrianTravelTime" ||
pro == "dailyInternalBikeTravels" ||
pro == "capacity"
) {
value = properties; value = properties;
} else { } else {
for (let key in properties) { for (let key in properties) {
...@@ -75,24 +42,23 @@ export function getColor( ...@@ -75,24 +42,23 @@ export function getColor(
if (value == undefined) return color_value_undefined; if (value == undefined) return color_value_undefined;
return value > max / ratiosBetweenGrades[4] return value > ograjice[4]
? color_0 ? color_0
: value > max / ratiosBetweenGrades[3] : value > ograjice[3]
? color_1 ? color_1
: value > max / ratiosBetweenGrades[2] : value > ograjice[2]
? color_2 ? color_2
: value > max / ratiosBetweenGrades[1] : value > ograjice[1]
? color_3 ? color_3
: value > max / ratiosBetweenGrades[0] : value > ograjice[0]
? color_4 ? color_4
: color_5; : color_5;
} }
export function getColorHighToLow( export function getColorOgrajiceHighToLow(
properties: any, properties: any,
pro: any, pro: any,
max: number, ograjice: number[],
ratiosBetweenGrades: number[],
isCapacityEqual9999: boolean isCapacityEqual9999: boolean
): string { ): string {
if (isCapacityEqual9999 == true) { if (isCapacityEqual9999 == true) {
...@@ -100,9 +66,11 @@ export function getColorHighToLow( ...@@ -100,9 +66,11 @@ export function getColorHighToLow(
} }
let value = undefined; let value = undefined;
if (pro == "dailyInternalBikeTravels") { if (
value = properties; pro == "pedestrianTravelTime" ||
} else if (pro == "capacity") { pro == "dailyInternalBikeTravels" ||
pro == "capacity"
) {
value = properties; value = properties;
} else { } else {
for (let key in properties) { for (let key in properties) {
...@@ -114,15 +82,15 @@ export function getColorHighToLow( ...@@ -114,15 +82,15 @@ export function getColorHighToLow(
if (value == undefined) return color_value_undefined; if (value == undefined) return color_value_undefined;
return value > max / ratiosBetweenGrades[4] return value > ograjice[4]
? color_5 ? color_5
: value > max / ratiosBetweenGrades[3] : value > ograjice[3]
? color_4 ? color_4
: value > max / ratiosBetweenGrades[2] : value > ograjice[2]
? color_3 ? color_3
: value > max / ratiosBetweenGrades[1] : value > ograjice[1]
? color_2 ? color_2
: value > max / ratiosBetweenGrades[0] : value > ograjice[0]
? color_1 ? color_1
: color_0; : color_0;
} }
......
src/app/pages/simulation-wizard/results-map/results-map.component.ts
+ 184
− 197
View file @ 42fbbeca
...@@ -41,6 +41,7 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -41,6 +41,7 @@ export class ResultsMapComponent implements OnInit, OnChanges {
grayscale: number = 50; grayscale: number = 50;
loadGeojsons: Object[] = []; loadGeojsons: Object[] = [];
maxKeyValues: Object = {}; maxKeyValues: Object = {};
ograjiceValues: Object = {};
newBrinkValuesForm = new FormGroup({ newBrinkValuesForm = new FormGroup({
legend_0: new FormControl(undefined), legend_0: new FormControl(undefined),
legend_1: new FormControl(undefined), legend_1: new FormControl(undefined),
...@@ -73,34 +74,34 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -73,34 +74,34 @@ export class ResultsMapComponent implements OnInit, OnChanges {
this.setMapPositionAndZoom(res); this.setMapPositionAndZoom(res);
}); });
}, 50); }, 50);
// setTimeout(() => { setTimeout(() => {
// console.log( console.log(
// "%cTemporary", "%cTemporary",
// "background: peru; font-weight: bold; color: black; font-family: serif; padding: 0 10px;" "background: peru; font-weight: bold; color: black; font-family: serif; padding: 0 10px;"
// ); );
// const celkomplet: HTMLElement = document.querySelectorAll( const celkomplet: HTMLElement = document.querySelectorAll(
// ".buttons" ".buttons"
// )[0] as HTMLElement; )[0] as HTMLElement;
// celkomplet.style.display = "none"; celkomplet.style.display = "none";
// }, 825); }, 825);
// setTimeout(() => { setTimeout(() => {
// const celkomplet1: HTMLElement = document.querySelectorAll( const celkomplet1: HTMLElement = document.querySelectorAll(
// ".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; )[1] as HTMLElement;
// celkomplet1.click(); celkomplet1.click();
// }, 1000); }, 1000);
// setTimeout(() => { setTimeout(() => {
// const celkomplet2: HTMLElement = document.querySelectorAll( const celkomplet2: HTMLElement = document.querySelectorAll(
// "#loadGeojsonButtonsContainer button" "#loadGeojsonButtonsContainer button"
// )[1] as HTMLElement; )[1] as HTMLElement;
// celkomplet2.click(); celkomplet2.click();
// }, 1050); }, 1050);
// setTimeout(() => { setTimeout(() => {
// const celkomplet3: HTMLElement = document.querySelectorAll( const celkomplet3: HTMLElement = document.querySelectorAll(
// ".leaflet-control-layers-selector" ".leaflet-control-layers-selector"
// )[2] as HTMLElement; )[8] as HTMLElement;
// celkomplet3.click(); celkomplet3.click();
// }, 2228); }, 2228);
} }
onLoadClick(selectedKpi: string) { onLoadClick(selectedKpi: string) {
...@@ -223,116 +224,6 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -223,116 +224,6 @@ export class ResultsMapComponent implements OnInit, OnChanges {
this.newBrinkValuesApplied = true; 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) +
"'>&#9632</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) +
"'>&#9632</span> " +
grades[i] +
(grades[i + 1] ? "&ndash;" + 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) +
"'>&#9632</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) +
"'>&#9632</span> " +
grades[i] +
(grades[i + 1] ? "&ndash;" + 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) { private highlightFeature(e, feature) {
const layer = e.target; const layer = e.target;
let text = ""; let text = "";
...@@ -391,7 +282,7 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -391,7 +282,7 @@ export class ResultsMapComponent implements OnInit, OnChanges {
}); });
} }
private resetFeature(e, feature) { private resetFeature(e) {
const layer = e.target; const layer = e.target;
layer.setStyle({ layer.setStyle({
...@@ -466,19 +357,22 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -466,19 +357,22 @@ export class ResultsMapComponent implements OnInit, OnChanges {
}); });
} else { } else {
if (this.newBrinkValuesApplied) { 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") { 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, { tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({ style: (feature) => ({
weight: this.geoJsonStyleWeight, weight: this.geoJsonStyleWeight,
color: MapColors.getColorHighToLow( color: MapColors.getColorOgrajiceHighToLow(
feature["properties"]["capacity"], feature["properties"]["capacity"],
keys[f], keys[f],
this.maxKeyValues[`maxValue_${keys[f]}`], ograjice,
ratiosBetweenGrades,
parseInt(feature["properties"]["capacity"]) == 9999 parseInt(feature["properties"]["capacity"]) == 9999
? true ? true
: false : false
...@@ -489,29 +383,22 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -489,29 +383,22 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({ layer.on({
mouseover: (e) => mouseover: (e) =>
this.highlightFeature(e, feature.properties), this.highlightFeature(e, feature.properties),
mouseout: (e) => this.resetFeature(e, feature.properties), mouseout: (e) => this.resetFeature(e),
}), }),
}); });
} else if ( } else if (
keys[f] == "dailyInternalBikeTravels" || keys[f] == "dailyInternalBikeTravels" ||
keys[f] == "pedestrianTravelTime" 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, { tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({ style: (feature) => ({
weight: this.geoJsonStyleWeight, weight: this.geoJsonStyleWeight,
color: MapColors.getColorHighToLow( color: MapColors.getColor(
feature["properties"]["cityWide"]["traffic"][keys[f]] || feature["properties"]["cityWide"]["traffic"][keys[f]] ||
feature["properties"][keys[f]], feature["properties"][keys[f]],
keys[f], keys[f],
this.maxKeyValues[`maxValue_${keys[f]}`], ograjice,
ratiosBetweenGrades, false
parseInt(feature["properties"]["capacity"]) == 9999
? true
: false
), ),
opacity: this.geoJsonStyleOpacity, opacity: this.geoJsonStyleOpacity,
}), }),
...@@ -519,21 +406,18 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -519,21 +406,18 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({ layer.on({
mouseover: (e) => mouseover: (e) =>
this.highlightFeature(e, feature.properties), this.highlightFeature(e, feature.properties),
mouseout: (e) => this.resetFeature(e, feature.properties), mouseout: (e) => this.resetFeature(e),
}), }),
}); });
} else if (legendInverted.indexOf(keys[f]) > -1) { } else if (legendInverted.indexOf(keys[f]) > -1) {
console.log(" inverted and after new values");
tmp = L.geoJSON(<any>jsonFile, { tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({ style: (feature) => ({
weight: this.geoJsonStyleWeight, weight: this.geoJsonStyleWeight,
color: MapColors.getNewColor( color: MapColors.getColorOgrajiceHighToLow(
this.newBrinkValuesForm,
feature["properties"], feature["properties"],
keys[f], keys[f],
parseInt(feature["properties"]["capacity"]) == 9999 ograjice,
? true false
: false
), ),
opacity: this.geoJsonStyleOpacity, opacity: this.geoJsonStyleOpacity,
}), }),
...@@ -541,20 +425,18 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -541,20 +425,18 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({ layer.on({
mouseover: (e) => mouseover: (e) =>
this.highlightFeature(e, feature.properties), this.highlightFeature(e, feature.properties),
mouseout: (e) => this.resetFeature(e, feature.properties), mouseout: (e) => this.resetFeature(e),
}), }),
}); });
} else { } else {
tmp = L.geoJSON(<any>jsonFile, { tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({ style: (feature) => ({
weight: this.geoJsonStyleWeight, weight: this.geoJsonStyleWeight,
color: MapColors.getNewColor( color: MapColors.getColor(
this.newBrinkValuesForm,
feature["properties"], feature["properties"],
keys[f], keys[f],
parseInt(feature["properties"]["capacity"]) == 9999 ograjice,
? true false
: false
), ),
opacity: this.geoJsonStyleOpacity, opacity: this.geoJsonStyleOpacity,
}), }),
...@@ -562,21 +444,28 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -562,21 +444,28 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({ layer.on({
mouseover: (e) => mouseover: (e) =>
this.highlightFeature(e, feature.properties), this.highlightFeature(e, feature.properties),
mouseout: (e) => this.resetFeature(e, feature.properties), mouseout: (e) => this.resetFeature(e),
}), }),
}); });
} }
} else { } else {
// default, newBrinkValuesForm not applied // 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") { if (keys[f] == "capacity") {
tmp = L.geoJSON(<any>jsonFile, { tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({ style: (feature) => ({
weight: this.geoJsonStyleWeight, weight: this.geoJsonStyleWeight,
color: MapColors.getColorHighToLow( color: MapColors.getColorOgrajiceHighToLow(
feature["properties"]["capacity"], feature["properties"]["capacity"],
keys[f], keys[f],
this.maxKeyValues[`maxValue_${keys[f]}`], ograjice,
ratiosBetweenGrades,
parseInt(feature["properties"]["capacity"]) == 9999 parseInt(feature["properties"]["capacity"]) == 9999
? true ? true
: false : false
...@@ -587,7 +476,7 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -587,7 +476,7 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({ layer.on({
mouseover: (e) => mouseover: (e) =>
this.highlightFeature(e, feature.properties), this.highlightFeature(e, feature.properties),
mouseout: (e) => this.resetFeature(e, feature.properties), mouseout: (e) => this.resetFeature(e),
}), }),
}); });
} else if ( } else if (
...@@ -597,15 +486,12 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -597,15 +486,12 @@ export class ResultsMapComponent implements OnInit, OnChanges {
tmp = L.geoJSON(<any>jsonFile, { tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({ style: (feature) => ({
weight: this.geoJsonStyleWeight, weight: this.geoJsonStyleWeight,
color: MapColors.getColorHighToLow( color: MapColors.getColor(
feature["properties"]["cityWide"]["traffic"][keys[f]] || feature["properties"]["cityWide"]["traffic"][keys[f]] ||
feature["properties"][keys[f]], feature["properties"][keys[f]],
keys[f], keys[f],
this.maxKeyValues[`maxValue_${keys[f]}`], ograjice,
ratiosBetweenGrades, false
parseInt(feature["properties"]["capacity"]) == 9999
? true
: false
), ),
opacity: this.geoJsonStyleOpacity, opacity: this.geoJsonStyleOpacity,
}), }),
...@@ -613,22 +499,18 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -613,22 +499,18 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({ layer.on({
mouseover: (e) => mouseover: (e) =>
this.highlightFeature(e, feature.properties), this.highlightFeature(e, feature.properties),
mouseout: (e) => this.resetFeature(e, feature.properties), mouseout: (e) => this.resetFeature(e),
}), }),
}); });
} else if (legendInverted.indexOf(keys[f]) > -1) { } else if (legendInverted.indexOf(keys[f]) > -1) {
// default but inverted
tmp = L.geoJSON(<any>jsonFile, { tmp = L.geoJSON(<any>jsonFile, {
style: (feature) => ({ style: (feature) => ({
weight: this.geoJsonStyleWeight, weight: this.geoJsonStyleWeight,
color: MapColors.getColorHighToLow( color: MapColors.getColorOgrajiceHighToLow(
feature["properties"] || feature["properties"][keys[f]], feature["properties"],
keys[f], keys[f],
this.maxKeyValues[`maxValue_${keys[f]}`], ograjice,
ratiosBetweenGrades, false
parseInt(feature["properties"]["capacity"]) == 9999
? true
: false
), ),
opacity: this.geoJsonStyleOpacity, opacity: this.geoJsonStyleOpacity,
}), }),
...@@ -636,7 +518,7 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -636,7 +518,7 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({ layer.on({
mouseover: (e) => mouseover: (e) =>
this.highlightFeature(e, feature.properties), this.highlightFeature(e, feature.properties),
mouseout: (e) => this.resetFeature(e, feature.properties), mouseout: (e) => this.resetFeature(e),
}), }),
}); });
} else { } else {
...@@ -646,11 +528,8 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -646,11 +528,8 @@ export class ResultsMapComponent implements OnInit, OnChanges {
color: MapColors.getColor( color: MapColors.getColor(
feature["properties"], feature["properties"],
keys[f], keys[f],
this.maxKeyValues[`maxValue_${keys[f]}`], ograjice,
ratiosBetweenGrades, false
parseInt(feature["properties"]["capacity"]) == 9999
? true
: false
), ),
opacity: this.geoJsonStyleOpacity, opacity: this.geoJsonStyleOpacity,
}), }),
...@@ -658,7 +537,7 @@ export class ResultsMapComponent implements OnInit, OnChanges { ...@@ -658,7 +537,7 @@ export class ResultsMapComponent implements OnInit, OnChanges {
layer.on({ layer.on({
mouseover: (e) => mouseover: (e) =>
this.highlightFeature(e, feature.properties), 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 { ...@@ -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) +
"'>&#9632</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) +
"'>&#9632</span> " +
this.ograjiceValues[legendType][i - 1] +
(this.ograjiceValues[legendType][i]
? "&ndash;" + 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) +
"'>&#9632</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) +
"'>&#9632</span> " +
this.ograjiceValues[legendType][i] +
(this.ograjiceValues[legendType][i + 1]
? "&ndash;" + 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() { grayscaleChange() {
const el = <HTMLElement>( const el = <HTMLElement>(
document.querySelectorAll(".leaflet-pane.leaflet-tile-pane")[0] document.querySelectorAll(".leaflet-pane.leaflet-tile-pane")[0]
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment