Resolve "Color the map"

web/components/visualization/results-map.js

@@ -15,12 +15,10 @@ 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,10 +27,10 @@ class MapComponent {
     const request = new XMLHttpRequest();
     request.open("GET", mapFile, false);
     request.send(null);
-    let dataSource = JSON.parse(request.responseText);
+    this.dataSource = JSON.parse(request.responseText);
 
-      // Add parties and colors to datasource
-      dataSource = await colorationFunction(dataSource);
+    // Add parties and colors to datasource
+    this.dataSource = await colorationFunction(this, this.dataSource);
 
     document.getElementById("map-component").innerHTML = "";
     // Create a popup, but don't add it to the map yet.
@@ -40,48 +38,126 @@ class MapComponent {
       closeButton: false,
     });
 
-    const map = new mapboxgl.Map({
+    this.map = new mapboxgl.Map({
       container: "map-component", // container id
       style: "/assets/mapbox/vector.json", // stylesheet location
       center: [4.9, 45.75], // starting position [lng, lat]
       zoom: 9.7, // starting zoom
     });
 
-    // map.on("load", function () {
-    //   map.addSource("data-source", {
-    //     type: "geojson",
-    //     data: dataSource,
-    //   });
-
-    //   map.addLayer(
-    //     {
-    //       id: "winners-fills",
-    //       type: "fill",
-    //       source: "data-source",
-    //       layout: {},
-    //       paint: {
-    //         "fill-color": { type: "identity", property: "color" },
-    //         "fill-opacity": 0.5,
-    //         "fill-outline-color": "black",
-    //       },
-    //     },
-    //     "place_label_city"
-    //   );
-
-    //   map.addLayer({
-    //     id: "winners-names",
-    //     type: "symbol",
-    //     source: "data-source",
-    //     filter: ["all"],
-    //     layout: {
-    //       "text-field": "{partyName}",
-    //       "text-font": ["titiliumweb-regular"],
-    //     },
-    //   });
-    // });
+    this.map.on("load", () => {
+      this.map.addSource("data-source", {
+        type: "geojson",
+        data: this.dataSource,
+      });
+
+      this.map.addLayer(
+        {
+          id: "winners-fills",
+          type: "fill",
+          source: "data-source",
+          layout: {},
+          paint: {
+            "fill-color": { type: "identity", property: "color" },
+            "fill-opacity": 0.5,
+            "fill-outline-color": "black",
+          },
+        },
+        "place_label_city"
+      );
+
+      this.map.addLayer({
+        id: "winners-names",
+        type: "symbol",
+        source: "data-source",
+        filter: ["all"],
+        layout: {
+          "text-field": "{partyName}",
+          "text-font": ["titiliumweb-regular"],
+        },
+      });
+    });
+
+    this.map.on("mousemove", "winners-fills", (e) => {
+      // Change the cursor style as a UI indicator.
+      this.map.getCanvas().style.cursor = "pointer";
+
+      // Single out the first found feature.
+      const feature = e.features[0];
+
+      if (e.features.length > 0) {
+        // Display a popup with the name of the county
+        popup
+          .setLngLat(e.lngLat)
+          .setText(
+            `${feature.properties.Name} : ${
+              feature.properties.partyName == undefined
+                ? "aucun"
+                : feature.properties.partyName
+            }`
+          )
+          .addTo(this.map);
+      }
+    });
+
+    this.map.on("mouseleave", "winners-fills", () => {
+      this.map.getCanvas().style.cursor = "";
+      popup.remove();
+    });
   }
 
-  async colorAreas(dataSource) {}
+  async colorAreas(mapHandler, dataSource) {
+    for (let area of mapHandler.parent.parent.results.areasResults) {
+      if (area.status == mapHandler.parent.parent.filter) {
+        let party = await mapHandler.PartyModel.getParty(
+          area.candidateLists[0].PartyID
+        );
+        dataSource = mapHandler.colorTiles(
+          dataSource,
+          parseInt(area.MapID),
+          party.Name,
+          party.Color
+        );
+      } else {
+        dataSource = mapHandler.colorTiles(dataSource, area.MapID, "", "");
+      }
+    }
+    return dataSource;
+  }
 
-  async colorSections(dataSource) {}
+  async colorSections(mapHandler, dataSource) {
+    mapHandler.parent.parent.results.areasResults.forEach(async (area) => {
+      for (let section of area.Sections) {
+        if (section.status == mapHandler.parent.parent.filter) {
+          let party = await mapHandler.PartyModel.getParty(
+            section.candidateLists[0].PartyID
+          );
+          dataSource = mapHandler.colorTiles(
+            dataSource,
+            parseInt(section.MapID),
+            party.Name,
+            party.Color
+          );
+        } else {
+          dataSource = mapHandler.colorTiles(dataSource, section.MapID, "", "");
+        }
+      }
+    });
+    return dataSource;
+  }
+
+  colorTiles(dataSource, gid, partyName, color) {
+    for (let f of dataSource.features) {
+      if (f.properties.nomcircons) f.properties.Name = f.properties.nomcircons;
+      if (f.properties["Nom réduit"])
+        f.properties.Name = f.properties["Nom réduit"];
+      if (f.properties.gid === gid) {
+        f.properties.partyName = partyName;
+        f.properties.color = color;
+
+        break;
+      }
+    }
+    return dataSource;
+  }
 }

web/components/visualization/results-zone.js

@@ -231,9 +231,23 @@ class ResultZoneComponent {
     if (this.parent.zone === "areas") {
       await this.ResultsFlow.displayFlowAreas();
       this.ResultsDetaileds.displayAreasResults();
+      if (this.ResultsMap.map.getSource("data-source") !== undefined) {
+        let dataSource = await this.ResultsMap.colorAreas(
+          this.ResultsMap,
+          this.ResultsMap.dataSource
+        );
+        this.ResultsMap.map.getSource("data-source").setData(dataSource);
+      }
     } else if (this.parent.zone === "sections") {
       await this.ResultsFlow.displayFlowSections();
       this.ResultsDetaileds.displaySectionsResults();
+      if (this.ResultsMap.map.getSource("data-source") !== undefined) {
+        let dataSource = await this.ResultsMap.colorSections(
+          this.ResultsMap,
+          this.ResultsMap.dataSource
+        );
+        this.ResultsMap.map.getSource("data-source").setData(dataSource);
+      }
     }
   }
 

web/components/visualization/visualization-section.js

@@ -104,14 +104,12 @@ 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");
@@ -136,6 +134,9 @@ class ResultComponent {
     document.getElementById("results-zone").style.display = "flex";
     document.getElementById("results-general").style.display = "none";
     await resultHandler.calculateResults();
+    if (resultHandler.zone == "areas")
+      await this.resultsZone.ResultsMap.displayMapAreas();
+    else await this.resultsZone.ResultsMap.displayMapSections();
     await resultHandler.resultsZone.displayResults();
   }