False color composite

In the previous step, we used the ol/source/GeoTIFF source to render a true color image from a single, multi-band source (with red, green, blue, and alpha bands). In this example, we'll pull in data from outside the visible spectrum and use it to render a false color composite.

We want to render a false color composite that highlights vegetation over bare soil areas. Chlorophyll-rich vegetation is bright in the near-infrared (Sentinel-2 B08) portion of the spectrum compared with its reflectance in visible wavelengths. By contrast, bare soil is not as bright in near-infrared compared with its reflectance in visible wavelengths. See the plot below for the reflectance spectra of green vegetation and bare soil shown with the Sentinel-2 bands.

To highlight vegetation in multi-spectral imagery, it is common to show the near-infrared (B08) reflectance in the red channel, red reflectance (B04) in the green channel, and green reflectance (B03) in the blue channel. We can use the ol/source/GeoTIFF source to do this by loading three separate single-band GeoTIFF images in RGB order.

Update your main.js so the source looks like the following:

const source = new GeoTIFF({
  sources: [
    {
      // near-infrared reflectance
      url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/B08.tif',
      max: 5000,
    },
    {
      // red reflectance
      url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/B04.tif',
      max: 5000,
    },
    {
      // green reflectance
      url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/B03.tif',
      max: 5000,
    },
  ],
});

Reload http://localhost:5173/ to see your false color composite.