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:T4ae,md`## About Lobelia Air **[Lobelia Air](https://aire-barcelona.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.`33:T97a,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" ], tileSize: 256, attribution: '© Lobelia Earth & KNMI 2020' }, paint: { "raster-saturation": -1 }, minzoom: 0, maxzoom: 22 }); resolve(map); }); }); }34:[] 2f:{"title":"Zoom in: air quality in Sofia (Dec. 2019)","cells":[{"id":0,"value":"md`# Zoom in: air quality in Sofia (Dec. 2019)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"md`Shown below is the NO₂ concentration in Sofia during December 2019. The data is produced by a prototype service, which combines model simulations and real observations from the official air pollution monitoring network in Sofia. Meteorology is taken from the European Centre for Medium-Range Weather Forecasts (ECMWF). Better use of traffic data will further improve the quality of the data in future releases.\n\nWe 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. If 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: 900, 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 (2019).`","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