Feat : on tiles hover display a box with results

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;
       }
     }