31:T643,{ const form = html` `; // Obtain form inputs const dateInput = form.date; const timeInput = form.time; // Bind form inputs --> views const updateExternal = () => { const date = dateInput.value; const time = timeInput.value; if (!date || !time) return; const t = moment(`${date}T${time}`).valueOf(); viewof tView.value = t; }; dateInput.oninput = updateExternal; timeInput.oninput = updateExternal; // Bind views --> form inputs const updateInternal = () => { const t = viewof tView.value; const mom = moment(t); dateInput.value = mom.format('YYYY-MM-DD'); timeInput.value = mom.format('HH:mm'); }; 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:T575,md`## About Lobelia Air **[Lobelia Air](https://aire-madrid.lobelia.earth)** is an operational service which produces hourly, high-resolution maps of urban air pollution, including a recent-past reanalysis and a 48-hour forecast. The system is based on open data, which guarantees a versatile implementation for cities anywhere in the world. Currently operational are [Barcelona](https://aire-barcelona.lobelia.earth), [Madrid](https://aire-madrid.lobelia.earth) and [Amsterdam](https://amsterdam-lucht.lobelia.earth). ![Lobelia Air in multiple cities](https://files.isardsat.co.uk/aq-retina-datasets/lobelia-air.jpg) Lobelia Air makes optimum use of accurate official measurements, traffic and population data, and meteorological observations, as well as state-of-the-art assimilation algorithms developed and validated by the [Royal Netherlands Meteorological Institute (KNMI)](https://knmi.nl/over-het-knmi/about) in the context of the [AirQast project](http://airqast.com). Analysis-ready data products are generated 24/7 for enrolled cities by [Lobelia Earth](https://lobelia.earth), and made available via an [API](http://airqast.com/#/api), as well as for citizens in the above cities. Based on the same algorithms and techniques, KNMI and Lobelia Earth have generated the **${datasetName}** dataset for 2018. This notebook highlights some of the insights made possible by this dataset.`33:Ta2b,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/streets-v10" // style: "mapbox://styles/mapbox/streets-v10" 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; console.log({ lon, lat, 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://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibW9yZ2FuaGVybG9ja2VyIiwiYSI6Ii1zLU4xOWMifQ.FubD68OEerk74AYCLduMZQ" // "https://b.tiles.mapbox.com/v4/mapbox.high-contrast/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoibW9yZ2FuaGVybG9ja2VyIiwiYSI6Ii1zLU4xOWMifQ.FubD68OEerk74AYCLduMZQ" ], tileSize: 256, attribution: '© Lobelia Earth & KNMI 2019' }, paint: { "raster-saturation": -1 }, minzoom: 0, maxzoom: 22 }); resolve(map); }); }); }34:[] 2f:{"title":"Zoom in: air quality in Madrid (2018)","cells":[{"id":0,"value":"md`# Zoom in: air quality in Madrid (2018)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"md`Shown below is the NO₂ concentration in Madrid during October-November 2018 (interested in the whole 2018 dataset? [Contact us](mailto:info@lobelia.earth)). We can see the increased concentrations coming from traffic around the city's big arteries, and how pollution is blown away by wind in different directions, as time passes.\n\nIf you watch long enough, you can clearly distinguish the daily and weekly patterns, modified by the meteorological variance.\n\nFeel free to pan and zoom around!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"map1 = createMap({ height: 600, invalidation, maxBounds: cityBounds })","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"{\n const form = html`\n \n `;\n bind(form.speed, viewof speedView);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1120,"value":"map0 = createMap({ height: 200, invalidation, maxBounds: cityBounds })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1069,"value":"md`## Acknowledgements\n\nContains modified Copernicus Service information (2018).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"md`## Contact us\n\nFor questions, suggestions, commercial enquiries, etc. please contact us at: [info@lobelia.earth](mailto:info@lobelia.earth).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"html`\n

\n
\n
\n
\n

\n Made with 💚 in Barcelona.
\n November 2019.\n