{ let container = html`

`; let content = html`

${container}

Ward Unavailable

Alderperson Unavailable

Community Unavailable

`; // Give the container dimensions. yield content; // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: [-87.6597, 41.8369], minZoom: 9, maxZoom: 17, zoom: 10, style: 'https://raw.githubusercontent.com/City-Bureau/chi-2019-runoff-maps/master/maps/style.json', }); map.on('load', () => { map.addControl(new mapboxgl.NavigationControl({ showCompass: false })); map.removeSource("wards"); map.addSource("ward-data", { type: "geojson", data: wards, generateId: true, }); map.addSource('community-areas', { type: "geojson", data: communityAreas, generateId: true, }); map.addLayer({ id: "community-areas", source: "community-areas", type: "fill", paint: { "fill-outline-color": "rgba(0,0,0,0)", "fill-color": "#e41a1c", "fill-opacity": ["case", ["boolean", ["feature-state", "hover"], false], 0.6, 0.1], } }, "wards"); map.addLayer({ id: "ward-data", source: "ward-data", type: "fill", paint: { "fill-outline-color": "rgba(0,0,0,0)", "fill-color": "#377eb8", "fill-opacity": ["case", ["boolean", ["feature-state", "hover"], false], 0.6, 0.1], } }, "wards"); map.addLayer({ id: "community-areas-stroke", source: "community-areas", type: "line", paint: { "line-color": "#e41a1c", "line-opacity": 0.5, "line-width": ["case", ["boolean", ["feature-state", "hover"], false], 2.5, 0.75], } }, "wards"); map.addLayer({ id: "wards-stroke", source: "ward-data", type: "line", paint: { "line-color": "#377eb8", "line-opacity": 0.5, "line-width": ["case", ["boolean", ["feature-state", "hover"], false], 2.5, 0.75], } }, "wards"); map.addLayer({ id: "wards-labels", source: "ward-data", type: "symbol", layout: { "text-field": "{ward}", "text-size": 10, "text-transform": "uppercase", "text-font": [ "Metropolis+Regular" ], "text-justify": "center", "visibility": "visible", "text-offset": [ 0.5, 0 ], "text-anchor": "center" }, "paint": { "text-color": "rgba(102, 102, 102, 1)", "text-halo-color": "rgba(255, 255, 255, 1)", "text-halo-width": { "stops": [ [ 6, 1 ], [ 10, 2 ] ] }, "text-halo-blur": 1, "icon-opacity": 0, "text-opacity": 1 } }) let wardHoverId = null; let communityAreaHoverId = null; const handleFeaturesHover = (features) => { let featObj = { ward: null, community: null }; if (wardHoverId) { map.setFeatureState({ source: "ward-data", id: wardHoverId }, { hover: false }); wardHoverId = null; } if (communityAreaHoverId) { map.setFeatureState({ source: "community-areas", id: communityAreaHoverId }, { hover: false }); communityAreaHoverId = null; } features.forEach((f) => { if (f.properties.ward) { featObj.ward = f.properties.ward; wardHoverId = f.id; } if (f.properties.community) { featObj.community = f.properties.community; communityAreaHoverId = f.id; } }); if (wardHoverId) { map.setFeatureState({ source: "ward-data", id: wardHoverId }, { hover: true }); } if (communityAreaHoverId) { map.setFeatureState({ source: "community-areas", id: communityAreaHoverId }, { hover: true }); } return featObj; } function updateLegend({ ward, community }) { const wardEl = document.getElementById("ward"); wardEl.innerHTML = ward || "Unavailable"; wardEl.style.fontStyle = ward ? "" : "italic"; const alderEl = document.getElementById("alderperson"); alderEl.innerHTML = COUNCIL_MAP[ward] || "Unavailable"; alderEl.style.fontStyle = ward ? "" : "italic"; const commEl = document.getElementById("community"); commEl.innerHTML = community || "Unavailable"; commEl.style.fontStyle = community ? "" : "italic"; } function onMouseMove(e) { const features = map.queryRenderedFeatures(e.point, { layers: ['ward-data', 'community-areas'] }); const { ward, community } = handleFeaturesHover(features); updateLegend({ ward, community }); if (features.length > 0) { map.getCanvas().style.cursor = "pointer"; } else { map.getCanvas().style.cursor = null; } } function onMouseOut(e) { const { ward, community } = handleFeaturesHover([]); updateLegend({ ward, community }); map.getCanvas().style.cursor = null; } function onMapClick(e) { const features = map.queryRenderedFeatures(e.point, { layers: ['ward-data', 'community-areas'] }); const { ward, community } = handleFeaturesHover(features); updateLegend({ ward, community }); if (features.length > 0) { map.getCanvas().style.cursor = "pointer"; } else { map.getCanvas().style.cursor = null; } } map.on("mousemove", "ward-data", onMouseMove); map.on("mouseout", "ward-data", onMouseOut); map.on("click", "ward-data", onMapClick); map.on("mousemove", "community-areas", onMouseMove); map.on("mouseout", "community-areas", onMouseOut); map.on("click", "community-areas", onMapClick); }); // // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }

Purpose-built for displays of data