viewof IllinoisCovidMap = { // Initialize const outerContainer = html`

${style()}

`; const headingContainer = html `

`; const mapContainer = html `

`; const container = html`

`; const selectorWrapper = html`

`; const selectorText = html``; const statewideContextWrapper = html`

`; const demographicSection = html`

`; // Check for stored results const storedZip = window.localStorage.getItem(STORAGE_KEY); // Set a default value for our selector let defaultSelectorValue = storedZip ? storedZip : greatestPerCapita; // Wait for geoip and override default if set (@TODO check first for local storage) if (!storedZip) { const geolocation = await geoip(); if (geolocation.postal && geolocation.region === "Illinois") { defaultSelectorValue = geolocation.postal; } } // Now set container value outerContainer.value = { selected: defaultSelectorValue }; let activeZip = getActiveZip(defaultSelectorValue); let activeCounty = getActiveCounty(activeZip.properties.county); // Build selector const selector = html`ZIP code `; selectorWrapper.appendChild(selector); selectorWrapper.appendChild(selectorText); outerContainer.appendChild(headingContainer); headingContainer.appendChild(selectorWrapper); selectorWrapper.appendChild(clickMessage); mapContainer.appendChild(mapLegend()); mapContainer.appendChild(container); headingContainer.appendChild(mapContainer); // outerContainer.appendChild(selectorWrapper); // outerContainer.appendChild(statewideContextWrapper); // container.appendChild(clickMessage); outerContainer.appendChild(demographicSection); yield outerContainer; function redrawContent() { window.localStorage.setItem(STORAGE_KEY, activeZip.properties.ZCTA5CE10); selectorText.innerHTML = ''; selectorText.append(selectorFragment(activeZip, activeCounty)); demographicSection.innerHTML = ''; demographicSection.append(demographicContent(activeZip)); // statewideContextWrapper.innerHTML = ''; // statewideContextWrapper.append(statewideContext(activeZip, activeCounty)); } redrawContent(); const map = new mapboxgl.Map({ container, style: "mapbox://styles/chicagoreporter/ck8s5gpth1uhb1irwjnniolhy?fresh=true", scrollZoom: true }); function redrawMap() { const bbox = turf.bbox(activeZip); map.fitBounds(bbox, { padding: 30 }); map.setPaintProperty("zctaActiveStrokeLayer", 'line-width', [ "interpolate", ["linear"], ["zoom"], 5, ["match", ["get", "ZCTA5CE10"], [outerContainer.value.selected], 1, 0], 14, ["match", ["get", "ZCTA5CE10"], [outerContainer.value.selected], 7, 0] ]); } function redraw() { // @TODO should probably set active ZIP here, too activeCounty = getActiveCounty(activeZip); redrawMap(); redrawContent(); window.localStorage.setItem(STORAGE_KEY, activeZip.properties.ZCTA5CE10); } selector.addEventListener('input', e => { outerContainer.value.selected = e.target.value; activeZip = getActiveZip(e.target.value); redraw(); }); map.addControl(new mapboxgl.NavigationControl()); // This stuff should really be loaded into a helper/callback map.on("load", () => { map.fitBounds(IllinoisBoundingBox); // This is so bad! But there's not a great way to wait for fitBounds to end that I've found. setTimeout(redrawMap, 300); map.addSource("zcta", { type: "geojson", data: { type: "FeatureCollection", features: IllinoisZCTAGeoCovidCases } }); const choroplethStops = [...breaks.slice(1), maxMeasure] .map(d => [countColor(d - 1), d + 1]) .flat(); map.addLayer( { id: "zctaFillLayer", type: "fill", source: "zcta", layout: {}, paint: { 'fill-color': [ 'step', ['get', "confirmed_cases"], "rgba(255, 255, 255, 0.1)", 1, ...choroplethStops.slice(0, choroplethStops.length - 1) ] } }, layerBefore ); map.addLayer( { id: "zctaStrokeLayer", type: "line", source: "zcta", layout: {}, paint: { 'line-color': '#444444', 'line-width': ['interpolate', ['linear'], ['zoom'], 7, 0, 15, 2], 'line-opacity': ['interpolate', ['linear'], ['zoom'], 7, 0, 7.25, 1] } }, "road-label-simple" ); map.addLayer( { id: "zctaActiveStrokeLayer", type: "line", source: "zcta", layout: {}, paint: { 'line-color': '#222222', 'line-width': [ "interpolate", ["linear"], ["zoom"], 5, [ "match", ["get", "ZCTA5CE10"], [outerContainer.value.selected], 1, 0 ], 14, [ "match", ["get", "ZCTA5CE10"], [outerContainer.value.selected], 7, 0 ] ], 'line-opacity': ['interpolate', ['linear'], ['zoom'], 5, 0, 14, 1] } }, "road-label-simple" ); map.addLayer({ id: 'zctaLabels', type: 'symbol', source: 'zcta', layout: { "text-padding": ["interpolate", ["linear"], ["zoom"], 8.99, 60, 12, 15], "text-font": ["Open Sans Bold", "Arial Unicode MS Regular"], "text-size": [ "interpolate", ["linear"], ["zoom"], 8.99, 0, 9, 10, 12, 18 ], "text-letter-spacing": 0.17, "text-field": ["to-string", ["get", "ZCTA5CE10"]] }, paint: { "text-halo-color": "hsla(0, 0%, 100%, 0)", "text-halo-width": 1 } }); // Click on ZIPs to navigate map.on('click', 'zctaFillLayer', function(e) { outerContainer.value.selected = e.features[0].properties.ZCTA5CE10; selector.value = outerContainer.value.selected; activeZip = getActiveZip(e.features[0].properties.ZCTA5CE10); redraw(); }); }); // await triggerEmbedAnalytics("IL county map"); invalidation.then(() => map.remove()); return outerContainer; }