diff --git a/web/components/visualization/results-map.js b/web/components/visualization/results-map.js index f3909862130822e9ca8c6beea75a844a85562e4d..ca14847cd5504a27b733a2c4e897aa5e3f3dd54b 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; } }