documentation for fetching geospatial / geodata

[morandd]

Offering a new content item for the Documentation:

Loading geospatial / geodata which began life as a Xarray or NetCDF and converted to Zarr is not totally straightforward. While a naive user (like yours truly) might expect latitude and longitude to be metadata associated with the array, in fact latitude and longitude are separate arrays - siblings - in the same Group as the main data item(s).

Xarray discusses their strategy for saving to Zarr format here, including how Xarray writes a nonstandard .zmetadata file. That metadata file can be useful because it is not clear whether 'latitude' and 'longitude' are standardized names or whether you might encounter variants like 'lat' and 'lon'.

Below is a snippet that shows the steps needed to load geospatial zarr data. In this example the data is a 100 x 200 pixel map over 5 months, and shape [5, 100, 200] so I used a .get(TIMESTEP) call to get the 100x200 pixel map for the first timestep.

// Import Zarr.js
import * as zarr from "https://cdn.skypack.dev/zarr";

async function loadZarrGeodata(url, key) {
    const store = new zarr.HTTPStore(url);

    const TIMESTEP = 0;

    const lats_promise = zarr.openArray({store, path:'latitude', mode:'r'}); // This is an HTTP HEAD call
    const lons_promise = zarr.openArray({store, path:'longitude', mode:'r'});
    const data_promise = zarr.openArray({store, path:key, mode:'r'});

    const [latsArrayItem, lonsArrayItem, dataArrayItem] = await Promise.all([lats_promise, lons_promise, data_promise]); // Waiting for these to resolve initiates and waits for the HTTP GET requests to resolve

    const [latsRawArray, lonsRawArray, dataRawArray] = await Promise.all([latsArrayItem.getRaw(), lonsArrayItem.getRaw(), dataArrayItem.get(TIMESTEP)]);

    return {
        west: lonsRawArray.data[0],
        east: lonsRawArray.data[lonsRawArray.data.length-1],
        south: latsRawArray.data[0],
        north: latsRawArray.data[latsRawArray.data.length-1],
        data: dataRawArray.data
    }

}