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) +
-          "'>&#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) {
     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) +
+          "'>&#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() {
     const el = <HTMLElement>(
       document.querySelectorAll(".leaflet-pane.leaflet-tile-pane")[0]