diff --git a/web/components/visualization/results-map.js b/web/components/visualization/results-map.js
index c23c3e81c7f622db5a63dcadeefee16a30264c50..87c847bab48f11093e457e79ed60c087000641a6 100644
--- a/web/components/visualization/results-map.js
+++ b/web/components/visualization/results-map.js
@@ -15,10 +15,12 @@ class MapComponent {
   }
 
   async displayMapAreas() {
+    console.log("mount area map")
     await this.initMap("/assets/maps/area.json", this.colorAreas);
   }
 
   async displayMapSections() {
+    console.log("mount section map")
     await this.initMap("/assets/maps/section.json", this.colorSections);
   }
 
@@ -29,8 +31,8 @@ class MapComponent {
     request.send(null);
     let dataSource = JSON.parse(request.responseText);
 
-    //   // Add parties and colors to datasource
-    //   dataSource = await colorationFunction(dataSource);
+      // Add parties and colors to datasource
+      dataSource = await colorationFunction(dataSource);
 
     document.getElementById("map-component").innerHTML = "";
     // Create a popup, but don't add it to the map yet.
@@ -40,7 +42,7 @@ class MapComponent {
 
     const map = new mapboxgl.Map({
       container: "map-component", // container id
-      style: "../../assets/mapbox/vector.json", // stylesheet location
+      style: "/assets/mapbox/vector.json", // stylesheet location
       center: [4.9, 45.75], // starting position [lng, lat]
       zoom: 9.7, // starting zoom
     });
@@ -79,7 +81,7 @@ class MapComponent {
     // });
   }
 
-  async colorAreas() {}
+  async colorAreas(dataSource) {}
 
-  async colorSections() {}
+  async colorSections(dataSource) {}
 }
diff --git a/web/components/visualization/results-zone.js b/web/components/visualization/results-zone.js
index 64e1b3194702446463b537cc73beb0d9ec729ff5..c4fd371706d7ec8543f865d2c7f4f3bfa933edab 100644
--- a/web/components/visualization/results-zone.js
+++ b/web/components/visualization/results-zone.js
@@ -225,11 +225,10 @@ class ResultZoneComponent {
     if (this.parent.zone === "areas") {
       await this.ResultsFlow.displayFlowAreas();
       this.ResultsDetaileds.displayAreasResults();
-      await this.ResultsMap.displayMapAreas();
+      
     } else if (this.parent.zone === "sections") {
       await this.ResultsFlow.displayFlowSections();
       this.ResultsDetaileds.displaySectionsResults();
-      await this.ResultsMap.displayMapSections();
     }
   }
 
diff --git a/web/components/visualization/visualization-section.js b/web/components/visualization/visualization-section.js
index 0c3d7fa6c07c9489b32832ee82685886081d7ee4..a58d6db7dce717739dc3f32d397299842e1d6640 100644
--- a/web/components/visualization/visualization-section.js
+++ b/web/components/visualization/visualization-section.js
@@ -104,12 +104,14 @@ class ResultComponent {
       await this.hideGeneralSection();
       document.getElementById("sections").setAttribute("class", "");
       document.getElementById("areas").setAttribute("class", "is-active");
+      this.resultsZone.ResultsMap.displayMapAreas();
     });
     document.getElementById("sections").addEventListener("click", async () => {
       resultHandler.zone = "sections";
       await this.hideGeneralSection();
       document.getElementById("areas").setAttribute("class", "");
       document.getElementById("sections").setAttribute("class", "is-active");
+      this.resultsZone.ResultsMap.displayMapSections();
     });
 
     let radioButtons = document.getElementsByName("filter");
diff --git a/web/style.css b/web/style.css
index c93bc12853cebcdec51813966c312d2ff37f6965..449b49759f67645f193e595441a1729b5e8fed26 100644
--- a/web/style.css
+++ b/web/style.css
@@ -215,4 +215,8 @@ select {
 
 #map-section {
   height: 70vh;
-}
\ No newline at end of file
+}
+
+#map-component {
+  height: 100%;
+}