From 4e9bf10e7206412ec92f3d8f4e54a3eb1feebbb6 Mon Sep 17 00:00:00 2001
From: apoyen <apoyen@grandlyon.com>
Date: Wed, 29 Jul 2020 11:19:56 +0200
Subject: [PATCH] Feat : on tiles hover display a box with results

---
 web/components/visualization/results-map.js | 35 ++++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/web/components/visualization/results-map.js b/web/components/visualization/results-map.js
index f390986..ca14847 100644
--- a/web/components/visualization/results-map.js
+++ b/web/components/visualization/results-map.js
@@ -77,6 +77,33 @@ class MapComponent {
         },
       });
     });
+
+    map.on("mousemove", "winners-fills", function (e) {
+      // Change the cursor style as a UI indicator.
+      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(map);
+      }
+    });
+
+    map.on("mouseleave", "winners-fills", function () {
+      map.getCanvas().style.cursor = "";
+      popup.remove();
+    });
   }
 
   async colorAreas(mapHandler, dataSource) {
@@ -122,13 +149,13 @@ class MapComponent {
 
   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;
-        if (f.properties.nomcircons)
-          f.properties.Name = f.properties.nomcircons;
-        if (f.properties["Nom réduit"])
-          f.properties.Name = f.properties["Nom réduit"];
+
         break;
       }
     }
-- 
GitLab