2b:null 2c:["$","title",null,{"children":"Bridgeport Environmental Map | Patrick Sier | Observable"}] 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:{"id":"885907f8c4214183","slug":"bridgeport-environmental-map","title":"Bridgeport Environmental Map","thumbnail":"fa452cb84096bdfebf0093e0fd1bccbb65dee336b5e8597ecf61b1315a57c306","access_level":"public","create_time":"$D2022-02-04T18:32:29.952Z","update_time":"$D2022-07-29T00:53:08.021Z","view_time":null,"first_public_time":"$D2022-02-09T21:33:48.986Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"131ebbed378efb4e","login":"pjsier","name":"Patrick Sier","avatar_url":"https://avatars-next.observableusercontent.com/1b88cd4161cba2dad3bf87cbb75ae3bed18489a962e046eb6b5c3d920631b97f","tier":"starter_2024"},"version":179,"publish_version":179,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b8fd2b6e2488e83","login":"pjsier","name":"Patrick Sier","avatar_url":"https://avatars-next.observableusercontent.com/1b88cd4161cba2dad3bf87cbb75ae3bed18489a962e046eb6b5c3d920631b97f","tier":null}],"members":[{"type":"individual","id":"9b8fd2b6e2488e83","login":"pjsier","name":"Patrick Sier","avatar_url":"https://avatars-next.observableusercontent.com/1b88cd4161cba2dad3bf87cbb75ae3bed18489a962e046eb6b5c3d920631b97f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bridgeport Environmental Map","cells":[{"id":0,"value":"# Bridgeport Environmental Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":45,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"viewof parkColor = Inputs.color({ label: \"Parks\", value: \"#33a02c\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"viewof schoolsColor = Inputs.color({label: \"Schools\", value: \"#a6cee3\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"viewof tdlColor = Inputs.color({label: \"TDLs\", value: \"#b15928\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"viewof triColor = Inputs.color({ label: \"TRIs\", value: \"#ff7f00\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"viewof crashColor = Inputs.color({ label: \"Traffic crashes\", value: \"#ffff99\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":76,"value":"HOVER_LAYERS = [\"tdl\", \"tri\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"LAYERS = [\"traffic-crashes\", \"schools\", \"parks\", \"tdl\", \"tri\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":42,"value":"mapboxgl = require(\"mapbox-gl@1.13.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"d3 = require(\"d3-dsv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"