31:Tffb,viewof activeFeat = { let container = html`

`; yield container; let activeFeature = {}; let map = new mapboxgl.Map({ container, center: [-87.6597, 41.77], maxBounds: [ [-91.513052, 36.970131], [-87.201058, 42.508243] ], dragRotate: false, minZoom: 9, maxZoom: 17, zoom: 10.35, style: "https://il-openmaptiles.us-southeast-1.linodeobjects.com/positron/style.json" }); const largePointConf = { "circle-opacity": 0.6, "circle-radius": { base: 4, stops: [ [9, 4], [15, 80] ] } }; map.on("load", () => { map.addControl(new mapboxgl.NavigationControl({ showCompass: false })); map.addSource("traffic-crashes", { type: "geojson", data: trafficCrashes, generateId: true }); map.addSource("schools", { type: "geojson", data: schools, generateId: true }); map.addSource("parks", { type: "geojson", data: parks, generateId: true }); map.addSource("tdl", { type: "geojson", data: tdl, generateId: true }); map.addSource("tri", { type: "geojson", data: tri, generateId: true }); map.addLayer( { id: "traffic-crashes", source: "traffic-crashes", type: "circle", paint: { "circle-opacity": 0.5, "circle-radius": { base: 1.75, stops: [ [9, 1.5], [15, 5] ] }, "circle-color": crashColor } }, "place_other" ); map.addLayer( { id: "schools", source: "schools", type: "circle", paint: { ...largePointConf, "circle-color": schoolsColor } }, "place_other" ); map.addLayer( { id: "parks", source: "parks", type: "fill", paint: { "fill-opacity": 0.5, "fill-color": parkColor } }, "place_other" ); map.addLayer( { id: "tri", source: "tri", type: "circle", paint: { ...largePointConf, "circle-color": triColor } }, "place_other" ); map.addLayer( { id: "tdl", source: "tdl", type: "circle", paint: { ...largePointConf, "circle-color": tdlColor } }, "place_other" ); const handleFeaturesHover = (features) => { if (activeFeature.tri || activeFeature.tdl) { activeFeature = {}; } if (features.length > 0) { const triFeat = features.find(({ source }) => source === "tri"); const tdlFeat = features.find(({ source }) => source === "tdl"); activeFeature = { tri: triFeat?.properties, tdl: tdlFeat?.properties }; } container.value = activeFeature; container.dispatchEvent(new CustomEvent("input")); }; handleFeaturesHover([]); function onMouseMove(e) { const features = map.queryRenderedFeatures(e.point, { layers: HOVER_LAYERS }); handleFeaturesHover(features); if (features.length > 0) { map.getCanvas().style.cursor = "pointer"; } else { map.getCanvas().style.cursor = null; } } function onMouseOut(e) { handleFeaturesHover([]); map.getCanvas().style.cursor = null; } function onMapClick(e) { const features = map.queryRenderedFeatures(e.point, { layers: HOVER_LAYERS }); handleFeaturesHover(features); if (features.length > 0) { map.getCanvas().style.cursor = "pointer"; } else { map.getCanvas().style.cursor = null; } } HOVER_LAYERS.forEach((layer) => { map.on("mousemove", layer, onMouseMove); map.on("mouseout", layer, onMouseOut); map.on("click", layer, onMapClick); }); }); invalidation.then(() => map.remove()); }32:[] 2f:{"title":"Bridgeport Environmental Map","cells":[{"id":0,"value":"# Bridgeport Environmental Map","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"html`

\n TDL: ${activeFeat.tdl?.Prop_NA || \"None selected\"}\n

\n TRI: ${activeFeat.tri?.facility_name || \"None selected\"}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"viewof parkColor = Inputs.color({ label: \"Parks\", value: \"#33a02c\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"viewof schoolsColor = Inputs.color({label: \"Schools\", value: \"#a6cee3\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"viewof tdlColor = Inputs.color({label: \"TDLs\", value: \"#b15928\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"viewof triColor = Inputs.color({ label: \"TRIs\", value: \"#ff7f00\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"viewof crashColor = Inputs.color({ label: \"Traffic crashes\", value: \"#ffff99\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":76,"value":"HOVER_LAYERS = [\"tdl\", \"tri\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"LAYERS = [\"traffic-crashes\", \"schools\", \"parks\", \"tdl\", \"tri\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"trafficCrashes = fetch(\n `https://data.cityofchicago.org/resource/85ca-t3if.json?$limit=10000&$where=CRASH_DATE >= '2021-01-01' AND within_polygon(LOCATION, 'POLYGON((-87.67425451202973 41.854502326376775,-87.61571798248872 41.854502326376775,-87.61571798248872 41.81088702231619,-87.67425451202973 41.81088702231619,-87.67425451202973 41.854502326376775))')`\n)\n .then((data) => data.json())\n .then((data) => ({\n type: \"FeatureCollection\",\n features: data.map(({ location: geometry, ...properties }) => ({\n type: \"Feature\",\n properties,\n geometry\n }))\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"schools = fetch(\n `https://data.cityofchicago.org/api/geospatial/vfmh-nkyk?method=export&format=GeoJSON`\n).then((data) => data.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"parks = fetch(\n `https://data.cityofchicago.org/api/geospatial/ej32-qgdr?method=export&format=GeoJSON`\n).then((data) => data.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"tdl = fetch(\n `https://docs.google.com/spreadsheets/d/e/2PACX-1vSlauu1Zl7Bx-Pkds9gLIRP_AZo1li4_Kn9or9cULxW99xX4NhEcLAdw19WbZscGwstXLSoWryZ-tay/pub?output=csv`\n)\n .then((data) => data.text())\n .then((tdlCsv) => ({\n type: \"FeatureCollection\",\n features: d3.csvParse(tdlCsv).map((properties) => ({\n type: \"Feature\",\n geometry: { type: \"Point\", coordinates: [+properties.X, +properties.Y] },\n properties\n }))\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"tri = fetch(\n `https://gist.githubusercontent.com/pjsier/90719728d6224a9b6f8946d05e2e9266/raw/a5eb90d8e68493ed1e30c3c6ffccee1dc48383c9/chicago-tri.csv`\n)\n .then((data) => data.text())\n .then((data) => ({\n type: \"FeatureCollection\",\n features: d3\n .csvParse(data)\n .map((properties) => ({\n type: \"Feature\",\n geometry: {\n type: \"Point\",\n coordinates: [+properties.longitude, +properties.latitude]\n },\n properties\n }))\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"mapboxgl = require(\"mapbox-gl@1.13.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"d3 = require(\"d3-dsv\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}