From f5d4fc6975859d0d7a62f3c3946f8c300f2b6001 Mon Sep 17 00:00:00 2001
From: Alexis POYEN <apoyen@grandlyon.com>
Date: Tue, 28 Jul 2020 17:01:11 +0200
Subject: [PATCH] Feat : change map when changing tab (area - section)
---
web/components/visualization/results-map.js | 12 +++++++-----
web/components/visualization/results-zone.js | 3 +--
.../visualization/visualization-section.js | 2 ++
web/style.css | 6 +++++-
4 files changed, 15 insertions(+), 8 deletions(-)
diff --git a/web/components/visualization/results-map.js b/web/components/visualization/results-map.js
index c23c3e8..87c847b 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 64e1b31..c4fd371 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 0c3d7fa..a58d6db 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 c93bc12..449b497 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%;
+}
--
GitLab