31:T741,vancouver = { const container = html`

`; yield container; const map = L.map(container, { maxZoom: 17, minZoom: 12 }); // Add traffic camera locations as a cluster group var markers = L.markerClusterGroup(); trafficCams.records.forEach((r) => markers.addLayer( L.marker(r.fields.geom.coordinates.slice().reverse(), { icon: cameraIcon }).bindPopup( `${r.fields.name}` ) ) ); map.addLayer(markers); map.fitBounds(markers.getBounds()); // Add snow removal routes by route type snowRemoval.records .filter((record) => routesCheckbox.includes(record.fields.route_type)) .forEach((record) => { let route; // if (record.fields.geom.type === "MultiLineString") return; if (record.fields.geom.type === "MultiLineString") { route = new L.geoJSON(record.fields.geom, { color: colorScale(record.fields.route_type) }); } else if (record.fields.geom.type === "LineString") { route = new L.polyline( record.fields.geom.coordinates.map((coord) => coord.slice().reverse() ), { color: colorScale(record.fields.route_type) } ); } else { return; } route.bindPopup(record.fields.name); route.addTo(map); }); // Add basemap L.tileLayer( "https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}", { attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors', subdomains: "abcd", ext: "png" } ).addTo(map); }32:[{"id":"feb7d661fb9418b78cdf48604e249df962cdefdd1581643b71d29dcb88314360cdbb6ff96b651d8794d585ee1674a7d5256e597dc0adf05511a09ad3291146d1","href":"https://static.observableusercontent.com/files/feb7d661fb9418b78cdf48604e249df962cdefdd1581643b71d29dcb88314360cdbb6ff96b651d8794d585ee1674a7d5256e597dc0adf05511a09ad3291146d1","name":"noun-intelligent-traffic-2540332.png","type":"image/png","lastModified":1671643567134.842,"size":72095}] 2f:{"title":"Snowplow Progress","cells":[{"id":0,"value":"# Snowplow Progress\n## Or, overlaying Vancouver's snow removal route and traffic cam data","pinned":false,"hidden":false,"mode":"md"},{"id":489,"value":"The map below combines city snowplow routes with locations of live traffic camera. Click the link in the popups of each camera icon to see live images. Filter snow removal route types with the checkboxes below.\n\nData: [City of Vancouver](https://opendata.vancouver.ca/pages/home/), Canada","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"viewof routesCheckbox = Inputs.checkbox(routeTypes, {\n label: \"Snow removal route types\",\n format: (t) => html`${t}`,\n value: routeTypes\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"## Background\nYesterday, my kiddo had an immunization appointment across town and a massive snow storm dumped [more than a foot of snow in town](https://bc.ctvnews.ca/here-s-how-much-snow-fell-in-different-parts-of-the-lower-mainland-1.6202889). While trying to decide if I we could drive to the appointment, I was so frustrating going back and forth between the two datasets from the city below that I decided to just mash them together into the map above. \n\nIn the end, the plowed routes looked pretty good and it to the appointment and back with no problems!","pinned":false,"hidden":false,"mode":"md"},{"id":320,"value":"## Data\n\nThe City of Vancouver has a pretty sweet [open data portal](https://opendata.vancouver.ca/pages/home/), but what's really cool is that its CORS-accessible!\n\n* **`trafficCams`**: Traffic camera locations come via the [Web Cam (URL links)](https://opendata.vancouver.ca/explore/dataset/web-cam-url-links/information/) dataset.\n* **`snowRemoval`**: Snow removal routes come from the [Snow Removal Routes](https://opendata.vancouver.ca/explore/dataset/snow-removal-routes/information/) dataset.","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"trafficCams = d3.json(\n \"https://opendata.vancouver.ca/api/records/1.0/search/?dataset=web-cam-url-links&rows=200\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"snowRemoval = d3.json(\n \"https://opendata.vancouver.ca/api/records/1.0/search/?dataset=snow-removal-routes&q=&rows=300&facet=route_type\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"## Acknowledgements\n* Traffic Cam icon from [Tomas Knopp/Noun Project](https://thenounproject.com/icon/intelligent-traffic-2540332/)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n const clustermap =\n await require(\"leaflet.markercluster@1.5.3/dist/leaflet.markercluster-src.js\");\n Object.assign(L, clustermap);\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"colorScale = d3.scaleOrdinal(routeTypes, d3.schemePaired)","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"markerClusterColor = {\n const opacity = \"ee\";\n const scale = d3.scaleOrdinal([\"S\", \"M\", \"L\"], d3.schemeReds[3]);\n return (size) => scale(size) + opacity;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"routeTypes = Array.from(\n new Set(snowRemoval.records.map((d) => d.fields.route_type))\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"cameraIcon = L.icon({\n iconUrl: await FileAttachment(\"noun-intelligent-traffic-2540332.png\").url(),\n iconSize: [20, 20], // size of the icon\n iconAnchor: [0, 0], // point of the icon which will correspond to marker's location\n popupAnchor: [0, 0] // point from which the popup should open relative to the iconAnchor\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"\n\n\n","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}