diff --git a/web/components/visualization/results-map.js b/web/components/visualization/results-map.js
index 87c847bab48f11093e457e79ed60c087000641a6..28e7276cee7b710164332eadf77d7e6c629552f4 100644
--- a/web/components/visualization/results-map.js
+++ b/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;
+ }
}
diff --git a/web/components/visualization/results-zone.js b/web/components/visualization/results-zone.js
index 05be9f432691ce8b4760ea12ff060ec5713b3f62..c4fc0b30c97c05516e7ffb9eae8be6586b823f5b 100644
--- a/web/components/visualization/results-zone.js
+++ b/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);
+ }
}
}
diff --git a/web/components/visualization/visualization-section.js b/web/components/visualization/visualization-section.js
index a58d6db7dce717739dc3f32d397299842e1d6640..47beaf59da6fbdd4e4777711024a91abfac30bc0 100644
--- a/web/components/visualization/visualization-section.js
+++ b/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();
}