31:T4f1,function bindPopup(map) { const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on('mouseenter', POLLUTION_LAYER_ID, (e) => { map.getCanvas().style.cursor = 'pointer'; const pretty = v => typeof v === 'string' ? v.endsWith('Z') ? new Date(v).toLocaleString() : v : v const coordinates = e.features[0].geometry.coordinates.slice(); const hidden = new Set(["timestamp", "skip"]); const description = Object.entries(e.features[0].properties).reduce((acc, [k,v]) => [ acc, hidden.has(k) ? "" : `${k}${pretty(v)}` ].join(""), "

Point Stat

") + "

"; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(coordinates).setHTML(description).addTo(map); }); map.on('mouseleave', POLLUTION_LAYER_ID, () => { map.getCanvas().style.cursor = ''; popup.remove(); }); }32:[] 2f:{"title":"WIP - PCA Plotter","cells":[{"id":0,"value":"# WIP - PCA Plotter","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"viewof observation = Inputs.select(deviceObservations, {\n format: o => `${o.date.toLocaleDateString()} - ${o.device}${o.description ? (\" - \" + o.description) : \"\"}`, label: \"Select a device observation\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"Plot.plot({\n margin: 50,\n inset: 10,\n marks: xyFields.map(xy =>\n Plot.line(data, xy)\n ),\n caption: `${observation.device} - ${observation.description}`,\n x: {\n label: \"Date\",\n },\n y: {\n label: xyFields[0].y,\n labelOffset: 50,\n },\n color: {\n type: \"linear\",\n scheme: \"turbo\",\n legend: true\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"viewof map = {\n const center_portland = [-122.66155, 45.54846]\n let container = html`

`;\n yield container;\n let map = new mapboxgl.Map({\n container,\n center: center_portland,\n zoom: 12,\n style: \"mapbox://styles/pdxcleanair/ckpx7yno443sa17p6iy65qn95\"\n }); \n map.on(\"load\", () => {\n container.value = map;\n container.dispatchEvent(new CustomEvent(\"input\"));\n map.addSource(\"pollution\", {\n type: \"geojson\",\n data: geojson\n });\n map.addLayer({\n 'id': POLLUTION_LAYER_ID,\n 'type': 'circle',\n 'source': 'pollution',\n 'paint': {\n 'circle-radius': 5,\n 'circle-color': [\"case\", ...levels.circleCases, \"black\"] \n }\n });\n map.on('click', POLLUTION_LAYER_ID, (e) => {\n map.flyTo({\n center: e.features[0].geometry.coordinates\n });\n });\n bindPopup(map)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":208,"value":"### Airmap Source Module Support","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"airmapSha = \"00b2cb7\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"### Plottable Observations","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"deviceObservations = await import(`https://esmserver.cdaringe.com?moduleUrl=https://raw.githubusercontent.com/cdaringe/airmap/${airmapSha}/packages/cleanair-fetch-plottable/mod.ts`).then(mod => mod.fetchObservations()).then(obs => obs.sort((a, b) => a.date > b.date ? 1 : -1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"### Observation Data","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"observation","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"deviceModule = {\n switch (observation.device) {\n case \"pocket_labs\":\n return await import(`https://esmserver.cdaringe.com?moduleUrl=https://raw.githubusercontent.com/cdaringe/airmap/${airmapSha}/packages/cleanair-sensor-pocketlabs/mod.ts`);\n case \"flow\":\n return await import(`https://esmserver.cdaringe.com?moduleUrl=https://raw.githubusercontent.com/cdaringe/airmap/${airmapSha}/packages/cleanair-sensor-flow/mod.ts`)\n default:\n throw new Error(\"unknown device: \" + observation.device);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"data = await deviceModule.download(observation.urls)","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"geojson = deviceModule.toGeoJSON(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"### Mapping Support","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"POLLUTION_LAYER_ID = 'pollution-layer'","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2.7.0\");\n if (!gl.accessToken) {\n gl.accessToken = \"pk.eyJ1IjoicGR4Y2xlYW5haXIiLCJhIjoiY2t6dXB0NGFwMXEzeDJ3cngwOGthN3NqdCJ9.6x1IBZCKr2TwzoKJ9sJGfQ\";\n const href = await require.resolve(\"mapbox-gl@2.7.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"levels = deviceModule.mapbox.getLevels({ isMinMaxDynamicRange: true, geojson })","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"### Charting Support","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"xyFields = observation.device === 'flow' \n ? [{ x: 'date', y: 'voc_ppb', curve: \"catmull-rom\", stroke: \"darkred\"}]\n : observation.device === 'pocket_labs' \n ? [\n { x: 'date', y:'pm_2_5', curve: \"catmull-rom\", stroke: \"darkred\" }, \n // { x: 'date', y: 'pm_1_0'},\n ] \n : []","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}