Displaying rasters with Cesium

[banesullivan]

@marySalvi and @annehaley, I thought I'd share how to use the RGD endpoints to display a raster in the Cesium viewer here. Figured a Discussion is more appropriate than an issue.

---

Access Raster Metadata

You'll want to use the /rgd_imagery/raster/{spatial_id} endpoint which serializes a RasterMeta model. Here is an example response from that endpoint: https://www.resonantgeodata.com/api/rgd_imagery/raster/9

Details

{
  "spatial_id": 9,
  "parent_raster": {
    "id": 9,
    "image_set": {
      "id": 9,
      "images": [
        {
          "id": 11,
          "file": {
            "id": 11,
            "failure_reason": null,
            "status": "created",
            "created": "2021-08-10T15:58:46.192307Z",
            "modified": "2021-08-10T15:58:46.253518Z",
            "name": "Elevation.tif",
            "description": null,
            "checksum": "",
            "validate_checksum": false,
            "last_validation": true,
            "type": 1,
            "file": "https://rd-opengeo-storage.s3.amazonaws.com/55071799-5928-444e-b06a-838c529356fd/Elevation.tif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVR2HH7YUZHKLGOJV%2F20211217%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211217T214118Z&X-Amz-Expires=21600&X-Amz-SignedHeaders=host&X-Amz-Signature=5f9c1716429e8547240d5b4521d317aa592294c2da94b0885f894f76a7f525d3",
            "url": null,
            "collection": null,
            "created_by": null,
            "file_set": null,
            "download_url": "https://rd-opengeo-storage.s3.amazonaws.com/55071799-5928-444e-b06a-838c529356fd/Elevation.tif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVR2HH7YUZHKLGOJV%2F20211217%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20211217T214118Z&X-Amz-Expires=21600&X-Amz-SignedHeaders=host&X-Amz-Signature=5f9c1716429e8547240d5b4521d317aa592294c2da94b0885f894f76a7f525d3"
          },
          "failure_reason": "",
          "status": "success",
          "created": "2021-08-10T15:58:46.377519Z",
          "modified": "2021-08-10T15:58:46.377565Z"
        }
      ],
      "created": "2021-08-10T15:58:54.258061Z",
      "modified": "2021-08-10T15:58:54.867514Z",
      "name": "Elevation.tif",
      "description": null,
      "processed_images": []
    },
    "ancillary_files": [],
    "failure_reason": "",
    "status": "success",
    "created": "2021-08-10T15:58:54.990959Z",
    "modified": "2021-08-10T15:58:54.991020Z",
    "name": "Elevation.tif",
    "description": null,
    "extra_fields": null
  },
  "acquisition_date": null,
  "instrumentation": null,
  "created": "2021-08-10T15:59:05.054040Z",
  "modified": "2021-08-10T15:59:05.054096Z",
  "crs": "+init=epsg:4269",
  "origin": [
    -107.172592592828,
    38.861111110776996
  ],
  "extent": [
    -107.172592592828,
    38.861111110776996,
    -106.846759258061,
    39.0750925932
  ],
  "resolution": [
    0.0000925925929999993,
    0.00009259259300000066
  ],
  "transform": [
    -107.172592592828,
    0.0000925925929999993,
    0,
    39.0750925932,
    0,
    -0.00009259259300000066
  ],
  "cloud_cover": null,
  "outline": {
    "type": "Polygon",
    "coordinates": [
      [
        [
          -107.172592592828,
          39.0750925932
        ],
        [
          -106.846759258061,
          39.0750925932
        ],
        [
          -106.846759258061,
          38.861111110776996
        ],
        [
          -107.172592592828,
          38.861111110776996
        ],
        [
          -107.172592592828,
          39.0750925932
        ]
      ]
    ]
  },
  "subentry_type": "RasterMeta",
  "subentry_name": "Elevation.tif"
}

That's the information to display in a table view.

Displaying image tiles in the Cesium Viewer

In order to display the raster in the cesium viewer, the user will need to select a single image from the list of images in parent_raster->image_set->images. Once you have an image ID, you will use that ID to fetch a bit of metadata about the image with the endpoint /image_process/imagery/{id}/tiles and also generate a template for the /image_process/imagery/{id}/tiles/{z}/{x}/{y}.png endpoint. The formatting of this 2nd endpoint is a special case -- we only need to fill in the ID field and pass this URL template on to Cesium's UrlTemplateImageryProvider class. We'll do this in the following manner:

fetch(`${host}/api/image_process/imagery/${image_id}/tiles`)
  .then(response => response.json())
  .then(data => {
    var extents = data["bounds"];

    var rectangle = Cesium.Rectangle.fromDegrees(extents.xmin, extents.ymin, extents.xmax, extents.ymax)
    var band = 0; // Drop down menu of band choices (default is 0 / no choice)

    var layers = viewer.scene.imageryLayers; // From main Cesium Viewer instance
    var tileProvider = new Cesium.UrlTemplateImageryProvider({
      url: `${host}/api/image_process/imagery/${image_id}/tiles/{z}/{x}/{y}.png?projection=EPSG:3857&band=${band}`,
      subdomains: null, // We do not need or provide this in RGD
      rectangle: rectangle, // To prevent fetching tiles outside bounds of image
    });
    tileLayer = layers.addImageryProvider(tileProvider);

  });

That should be all you need to display an image from a raster in the CesiumViewer.