31:T567,{ const form = html` `; // Obtain form inputs const dateInput = form.date; // Bind form inputs --> views const updateExternal = () => { const date = dateInput.value; if (!date) return; const t = moment(`${date}`).valueOf(); viewof tView.value = t; }; dateInput.oninput = updateExternal; // Bind views --> form inputs const updateInternal = () => { const t = viewof tView.value; const mom = moment(t); dateInput.value = mom.format('YYYY-MM-DD'); }; viewof tView.addEventListener('input', updateInternal); // Bidirectional bindings bind(form.slider, viewof tView); // Clean up on invalidation invalidation.then(() => { viewof tView.removeEventListener('input', updateInternal); }); // Initialise updateInternal(); return form; }32:T7e4,function* createMap({ height = 300, invalidation, maxBounds } = {}) { const container = html`

`; yield container; // give the container dimensions const center = viewof centerView.value; const zoom = viewof zoomView.value; const map = new mapboxgl.Map({ container, center, zoom, maxBounds, style: "mapbox://styles/mapbox/empty-v8" }); // Bidirectional linking (see https://beta.observablehq.com/@mbostock/inline-inputs) // 1. from map to View const onUserPanZoom = () => { const { lng: lon, lat } = map.getCenter(); const zoom = map.getZoom(); viewof centerView.value = [lon, lat]; viewof zoomView.value = zoom; }; map.on('drag', onUserPanZoom); map.on('zoom', onUserPanZoom); // 2. from View to map const updateCenter = () => map.setCenter(viewof centerView.value); const updateZoom = () => map.setZoom(viewof zoomView.value); viewof centerView.addEventListener('input', updateCenter); viewof zoomView.addEventListener('input', updateZoom); invalidation.then(() => { map.remove(); viewof centerView.removeEventListener('input', updateCenter); viewof zoomView.removeEventListener('input', updateZoom); }); // Store a promise of the map on the container's value. // When the map is loaded, add a the base layer and resolve to the map itself container.value = new Promise(resolve => { map.on('load', () => { map.addLayer({ id: 'base', type: 'raster', source: { type: 'raster', tiles: [ "https://b.tiles.mapbox.com/v4/mapbox.high-contrast/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoibW9yZ2FuaGVybG9ja2VyIiwiYSI6Ii1zLU4xOWMifQ.FubD68OEerk74AYCLduMZQ" ], tileSize: 256, attribution: '© Mapbox | © Descartes Labs' }, minzoom: 0, maxzoom: 22 }); resolve(map); }); }); }33:[] 2f:{"title":"NO2 concentrations 2019 vs 2020","cells":[{"id":0,"value":"md`# NO₂ concentrations 2019 vs 2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"map1 = createMap({ height: 800, invalidation })","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`## Notebook internals`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md `### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.5.0\");\n if (!gl.accessToken) {\n // This is @tmcw’s. https://www.mapbox.com/help/how-access-tokens-work/\n gl.accessToken =\n \"pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"compare = require('https://bundle.run/mapbox-gl-compare@0.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"stylesheet = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":829,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import { text, number, slider, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"import { View } from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"import { bind } from '@mbostock/synchronized-views' // '@mbostock/inline-inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"import { toc } from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"gtag = {\n const id = 'UA-108529568-4';\n try {\n await require(`https://www.googletagmanager.com/gtag/js?id=${id}`);\n } catch {}\n const dataLayer = (window.dataLayer = window.dataLayer || []);\n const gtag = function() {\n dataLayer.push(arguments);\n };\n gtag('js', new Date());\n gtag('config', id, {\n page_title: 'Hourly, street-level NO2 concentrations in Barcelona (2018)',\n page_location: html``.href,\n page_path: html``.pathname\n });\n gtag('config', id);\n return gtag;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`### Application`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"datasetName = \"NO₂ analysis\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"viewof centerView = new View([80, 20])","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"centerView","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"viewof zoomView = new View(5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"zoomView","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"plotTilesOnMap = async (container, tiles, coordinates) => {\n const map = await container.value; \n const style = map.getStyle();\n const no2Layer = map.getLayer('no2');\n const no2source = map.getSource('raster-tiles');\n const newStyle = {\n ...style,\n sources: {\n ...style.sources,\n 'raster-tiles': {\n type: 'raster',\n tiles,\n tileSize: 256,\n scheme: 'tms'\n }\n },\n layers: [\n ...style.layers.filter(layer => layer.id != 'no2'),\n {\n id: 'no2',\n type: 'raster',\n paint: {\n \"raster-opacity\": 0.8,\n \"raster-fade-duration\": 0\n },\n source: 'raster-tiles'\n }\n ]\n };\n map.setStyle(newStyle);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":752,"value":"viewof tView = new View(new Date('2018-04-27T10:00:00Z').getTime())","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"`${tView}, ${moment(tView).format('YYYY-MM-DD HH:mm')}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"viewof speedView = new View(maxSpeed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"speedView","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"bcnCoords = {\n const lonMin = 2.057799;\n const lonMax = 2.2591991;\n const latMin = 41.291256;\n const latMax = 41.472454;\n return [\n [lonMin, latMax],\n [lonMax, latMax],\n [lonMax, latMin],\n [lonMin, latMin]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"bcnBounds = [\n 2.0595578869404064,\n 41.292688295349635,\n 2.2575165634801655,\n 41.47161399220559\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"maxSpeed = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"{\n const out = md`Updating map1…`;\n const mom = moment.utc(tView);\n const dayLater = moment(mom).add(1, 'days').format('YYYY-MM-DD');\n \n const timestamp = mom.format('YYYY-MM-DD');\n const dateString = 'no2_' + timestamp + '_' + dayLater;\n\n const tiles = [`https://storage.googleapis.com/dl-corono2/asia_tiles_v2/${dateString}/{z}/{x}/{y}.png`];\n plotTilesOnMap(map1, tiles, bcnCoords);\n\n // Update label on map\n const mom2 = moment(tView); // non-UTC\n const mapLabel = mom2.format(\"dddd MMMM Do, YYYY, HH:mm\");\n map1.querySelector('.map-title').innerHTML = mapLabel;\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":852,"value":"md`Styles:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}