viewof mapData = { let container = html`

${mapStyles}

`; let mapContainer = html`

`; let legend = html`

2020 Election, Chicago Results

${ELECTIONS[primaryElection].label}

${ELECTIONS[primaryElection].races[primaryRace]}

0% ${dataDomain[1].toFixed(0)}%

${getDataCols(csvData[0]) .filter(c => !LEGEND_HIDE.includes(c)) .map(c => c.replace(" Percent", "")) .map( (candidate, idx) => html`

${ candidate in DISPLAY_OVERRIDE ? DISPLAY_OVERRIDE[candidate] : candidate }

` )}

`; 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 => { const featData = csvDataMap[feat.properties.id]; const dataCols = getDataCols(featData); const candidateData = dataCols.map(c => ({ label: c.replace(" Percent", ""), value: featData[c] })); const sortedData = candidateData.sort((a, b) => d3.descending(a.value, b.value) ); return `

Ward ${featData.ward}, Precinct ${featData.precinct}

${sortedData .map( ({ label, value }) => `

${ label in DISPLAY_OVERRIDE ? DISPLAY_OVERRIDE[label] : label }: ${value}%, ${featData[label].toLocaleString()}

` ) .join(``)} `; }; map.once('styledata', () => { map.addControl(new mapboxgl.NavigationControl({ showCompass: false })); map.addControl(new mapboxgl.FullscreenControl({ container })); map.removeLayer("precincts"); map.removeSource("precincts"); map.addSource("precincts", { type: "vector", maxzoom: 11, tiles: [ "https://city-bureau-projects.s3.amazonaws.com/chicago-2020-primary-election/tiles/precincts/{z}/{x}/{y}.pbf" ], attribution: "Chicago Board of Election Commissioners" }); map.addLayer( { id: "precincts", source: "precincts", "source-layer": "precincts", type: "fill", filter: filterExpression, paint: { "fill-outline-color": [ "case", ["boolean", ["feature-state", "hover"], false], "rgba(0,0,0,0.7)", "rgba(150,150,150,0.4)" ], "fill-color": dataJoinExpression } }, "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", sourceLayer: "precincts", id: mapData.activeFeat.id }, { hover: false } ); mapData.activeFeat = {}; } if (features.length > 0) { map.setFeatureState( { source: "precincts", sourceLayer: "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()); }