viewof mapData = { let container = html`

${mapStyles}

`; let mapContainer = html`

`; let legend = html`

Chicago Democratic Primary Turnout

Change from 2016-2020

-30% +30%

`; container.appendChild(mapContainer); container.appendChild(legend); yield container; let mapData = {}; let map = new mapboxgl.Map({ container: mapContainer, center: [-87.6597, 41.83], minZoom: 9, maxZoom: 17, zoom: 9.25, style: 'https://raw.githubusercontent.com/City-Bureau/chi-2019-runoff-maps/master/maps/style.json' }); const popupContent = feat => { return `

Ward ${feat.properties.ward}, Precinct ${feat.properties.precinct}

Turnout change: ${( feat.properties.turnout_20 - feat.properties.turnout_16 ).toFixed(1)}%

2020 turnout: ${feat.properties.turnout_20.toFixed(1)}%

2016 turnout: ${feat.properties.turnout_16.toFixed(1)}%

`; }; map.on('load', () => { map.addControl(new mapboxgl.NavigationControl({ showCompass: false })); map.addControl(new mapboxgl.FullscreenControl({ container })); map.removeLayer("precincts"); map.removeSource("precincts"); map.addSource("precincts", { type: "geojson", maxzoom: 11, generateId: true, data: precinctData, attribution: "Chicago Board of Election Commissioners" }); const expr = [ "interpolate", ["linear"], ["-", ["get", "turnout_20"], ["get", "turnout_16"]], -30, "#7b3294", 0, "#f7f7f7", 30, "#008837" ]; map.addLayer( { id: "precincts", source: "precincts", type: "fill", paint: { "fill-outline-color": [ "case", ["boolean", ["feature-state", "hover"], false], "rgba(0,0,0,0.7)", "rgba(150,150,150,0.4)" ], "fill-color": expr } }, "wards" ); let hoverPopup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); let clickPopup = new mapboxgl.Popup({ closeButton: true, closeOnClick: true }); const removePopup = popup => { map.getCanvas().style.cursor = ""; popup.remove(); }; const handleFeaturesHover = features => { if (mapData.activeFeat && mapData.activeFeat.id) { map.setFeatureState( { source: "precincts", id: mapData.activeFeat.id }, { hover: false } ); mapData.activeFeat = {}; } if (features.length > 0) { map.setFeatureState( { source: "precincts", id: features[0].id }, { hover: true } ); mapData.activeFeat = features[0]; } container.value = mapData; container.dispatchEvent(new CustomEvent("input")); }; handleFeaturesHover([]); function onMouseMove(e) { const features = map.queryRenderedFeatures(e.point, { layers: ['precincts'] }); handleFeaturesHover(features); if (features.length > 0 && !clickPopup.isOpen()) { map.getCanvas().style.cursor = "pointer"; if (window.innerWidth >= 600) { hoverPopup .setLngLat(e.lngLat) .setHTML(popupContent(features[0])) .addTo(map); } } else { removePopup(hoverPopup); } } function onMouseOut(e) { handleFeaturesHover([]); removePopup(hoverPopup); } function onMapClick(e) { const features = map.queryRenderedFeatures(e.point, { layers: ['precincts'] }); handleFeaturesHover(features); if (features.length > 0) { map.getCanvas().style.cursor = "pointer"; clickPopup .setLngLat(e.lngLat) .setHTML(popupContent(features[0])) .addTo(map); } } map.on("mousemove", "precincts", onMouseMove); map.on("mouseout", "precincts", onMouseOut); map.on("click", "precincts", onMapClick); }); invalidation.then(() => map.remove()); }