31:T1a00,{ 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()); }32:T555,COUNCIL_MAP = ({ "1": "Daniel La Spata", "2": "Brian Hopkins", "3": "Pat Dowell", "4": "Sophia King", "5": "Leslie Hairston", "6": "Roderick Sawyer", "7": "Gregory Mitchell", "8": "Michelle Harris", "9": "Anthony Beale", "10": "Susan Sadlowski Garza", "11": "Patrick Daley Thompson", "12": "George Cardenas", "13": "Marty Quinn", "14": "Ed Burke", "15": "Raymond Lopez", "16": "Stephanie Coleman", "17": "David Moore", "18": "Derrick Curtis", "19": "Matthew O'Shea", "20": "Jeanette Taylor", "21": "Howard Brookins, Jr", "22": "Michael Rodriguez", "23": "Silvana Tabares", "24": "Michael Scott, Jr", "25": "Byron Sigcho-Lopez", "26": "Roberto Maldonado", "27": "Walter Burnett, Jr", "28": "Jason Ervin", "29": "Chris Taliaferro", "30": "Ariel Reboyras", "31": "Felix Cardona, Jr", "32": "Scott Waguespack", "33": "Rossana Rodriguez Sanchez", "34": "Carrie Austin", "35": "Carlos Ramirez-Rosa", "36": "Gilbert Villegas", "37": "Emma Mitts", "38": "Nicholas Sposato", "39": "Samantha Nugent", "40": "Andres Vasquez, Jr", "41": "Anthony Napolitano", "42": "Brendan Reilly", "43": "Michele Smith", "44": "Thomas Tunney", "45": "James Gardiner", "46": "James Cappleman", "47": "Matthew Martin", "48": "Harry Osterman", "49": "Maria Hadden", "50": "Debra Silverstein", })33:Tc6c,html``34:[] 2f:{"title":"Chicago Wards and Community Areas","cells":[{"id":0,"value":"md`# Chicago Wards and Community Areas`","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"MOBILE_BREAKPOINT = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"wards = fetch(\"https://gist.githubusercontent.com/pjsier/7cd67fde156f7a1f0c977e105e081a1d/raw/24b7b4bf85471da0be8af870e9886fa131a21801/chi-wards-building-violations.geojson\").then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"communityAreas = fetch(\"https://gist.githubusercontent.com/swingley/390b394f8b449d83f255/raw/2a4f104b934aa472ecd8fc4688d978384b19d007/chicago-community-areas.geojson\").then(res => res.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"mapboxgl = require(\"mapbox-gl@0.49\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}