Create a Google Earth Engine widget to compare air pollution over different time periods

Use the JavaScript API to quickly create a widget in the Google Earth Engine

I ran a Google Earth Engine workshop last week for undergraduate students. I structured the workshop to be suitable for those without any programming experience. To end the workshop, we create a very simple, easy to use widget that compared nitrogen dioxide concentrations in May 2019 and May 2020 (when the COVID-19 lockdowns were in full force).

Here is a short summary of how we went about creating the widget. If you just want to run the code and take a look, you can find it here. Note that this will only work if you’ve registered (and been approved) for a Google Earth Engine account.

First, we want to import the TROPOMI nitrogen dioxide dataset.

var s5p = ee.ImageCollection("COPERNICUS/S5P/NRTI/L3_NO2");

Then, we want to select a product, and filter it for two different time periods. I limited both time periods to two months (May through June) so that it would run fast during my workshop. You’re welcome to extend it to a longer time period.

var no2_2019 = s5p.select("NO2_column_number_density")
  .filterDate('2019-05-01', '2019-06-29');

var no2_2020 = s5p.select("NO2_column_number_density")
  .filterDate('2020-05-01', '2020-06-29');

If we try to plot either of these datasets, it will likely look like a black blob or a dark screen. We want to see the gradient in colours for different tropospheric nitrogen dioxide concentrations, so we need to create “band visualization parameters.”

var band_viz = {
  bands:"NO2_column_number_density",
  min: 0,
  max: 0.0003,
  palette: ['black','blue', 'purple','cyan', 'green', 'yellow', 'red']
};

We can then use the ui. functions to create the widget. We need to create two maps.

var map1 = ui.Map();

map1.add(ui.Panel({
  widgets:[ui.Label('NO2 in 2019')],
  style: {position: 'bottom-left'}
}));


map1.addLayer(no2_2019.mean(), band_viz, 'no2_2019',true,0.7);

var map2 = ui.Map();

map2.add(ui.Panel({
  widgets:[ui.Label('NO2 in 2020')],
  style: {position: 'bottom-right'}
}));


map2.addLayer(no2_2020.mean(), band_viz, 'no2_2020',true,0.7);

Okay, so now all we have to do is link the two maps and complete the widget using the ui.Map.Linker() function and set the map centre.

var linker = ui.Map.Linker([map1,map2]);

var splitMap = ui.SplitPanel({
  firstPanel: map1,
  secondPanel: map2,
  wipe: true,
});

ui.root.widgets().reset([splitMap]);

map1.setCenter(-79.3832,43.6532,5);

That’s it! Play around with the middle bar and compare the changes in air quality during the two time periods - the drastic reduction is fascinating.

These are the nitrogen dioxide columns from May to June 2019.

These are the nitrogen dioxide column for the same time period in 2020.

The differences in Chicago, Toronto, Detroit, and New York are stark. I’ll soon be posting articles on how to graph the temporal changes over different cities for multiple years.

Try it out and let me know what you think!