diff --git a/site/assets/js/map.js b/site/assets/js/map.js index c4e01a1..943e4c3 100644 --- a/site/assets/js/map.js +++ b/site/assets/js/map.js @@ -104,8 +104,19 @@ function addMapLayers(map) { "source-layer": "tracts", filter: ["==", ["geometry-type"], "Polygon"], paint: { - "line-opacity": 0.2, + "line-opacity": [ + "case", + ["boolean", ["feature-state", "hover"], false], + 0.5, + 0.2 + ], "line-color": "#333", + "line-width": [ + "case", + ["boolean", ["feature-state", "hover"], false], + 5, + 1 + ] }, }); } @@ -189,6 +200,7 @@ const colorScale = (duration) => { const tractIdDisplay = createTractIdDisplay(); addColorScale(map); + let hoveredPolygonId = null; map.on("mousemove", (e) => { const features = map.queryRenderedFeatures(e.point, { layers: ["tracts_fill"] }); const feature = features[0]; @@ -196,6 +208,17 @@ const colorScale = (duration) => { map.getCanvas().style.cursor = "pointer"; tractIdDisplay.style.display = "block"; tractIdDisplay.textContent = `Tract ID: ${feature.properties.id}`; + if (hoveredPolygonId !== null) { + map.setFeatureState( + { source: "protomap", sourceLayer: "tracts", id: hoveredPolygonId }, + { hover: false } + ); + } + hoveredPolygonId = feature.properties.id; + map.setFeatureState( + { source: "protomap", sourceLayer: "tracts", id: hoveredPolygonId }, + { hover: true } + ); } else { map.getCanvas().style.cursor = ""; tractIdDisplay.style.display = "none"; @@ -203,6 +226,17 @@ const colorScale = (duration) => { } }); + // Clear hover + map.on("mouseleave", (e) => { + if (hoveredPolygonId !== null) { + map.setFeatureState( + { source: "protomap", sourceLayer: "tracts", id: hoveredPolygonId }, + { hover: false } + ); + } + hoveredPolygonId = null; + }); + let previousStates = []; map.on("click", async (e) => { const features = map.queryRenderedFeatures(e.point, { layers: ["tracts_fill"] });