Oleksandr Matsibora. Implementing a SpatioTemporal Asset Catalog (STAC) with Cloud Optimized GeoTIFFs (COG) in a Web Application Using Vue.js and OpenLayers.js

Author
Oleksandr Matsibora
Published

DOI

The SpatioTemporal Asset Catalog (STAC) is gaining popularity as a powerful tool for representing spatial data. I would like to share my experience implementing STAC, which includes visualizing Cloud Optimized GeoTIFFs (COGs) and enabling basic client-side interactions.

Implementing a SpatioTemporal Asset Catalog (STAC) with Cloud Optimized GeoTIFFs (COG) in a Web Application Using Vue.js and OpenLayers.js

Libraries. Some of the most popular mapping libraries for handling STAC Cloud Optimized GeoTIFFs (COGs) are Leaflet.js and OpenLayers.js. While I have a strong appreciation for Leaflet, it’s worth noting that its latest stable version (1.9) was released on September 21, 2022. In contrast, I chose OpenLayers, which is actively developed and recently released version 10.6 on June 16, 2025. This makes OpenLayers potentially more suitable for new projects.

Additionally, there is an extra package “ol-stac,” which recently released its stable version (v1.0) just a few days ago. This package enhances OpenLayers’ functionality by providing specific methods and parameters for handling STAC items.

Datasets. For this demonstration of STAC, two distinct datasets were used: 1) the Capella Space Open Data SAR dataset and 2) Wyvern’s Open Data hyperspectral dataset. The primary goal was to showcase the flexibility of rendering two types of assets on the same map: the Cloud Optimized GeoTIFF (COG) from Capella Space (geoTIFF) and the satellite image previews from Wyvern (PNG).

In OpenLayers.js, the STAC layer supports most popular layer methods, such as “getExtent()”, “addLayer()”, or “removeLayer()”. But it includes specific methods like “getStacObjectsForEvent(event)”, which can be applied to the “singleclick” event.

Capella Space STAC. The size of the GeoTIFF files in the catalog ranges from 500 MB to 2 GB, which can lead to performance issues during client-side rendering. However, a key feature of Cloud Optimized GeoTIFFs is their ability to be partially loaded based on the scale level and HTTP requests from the client application. Therefore, large GeoTIFF files can be rendered as tile layers. To achieve this, an additional parameter, “buildTileUrlTemplate,” should be defined when creating a new STAC layer using “new STAC({})”.

Capella Space Open Data SAR dataset

Wyvern STAC. When it is necessary to select a specific asset for the “new STAC({})” layer, it is possible to define the “asset” parameter directly. For Wyvern, two options are available: “Overview image” and “Thumbnail image”. The “Overview image” asset includes a full-resolution, approximate true color image (PNG file, near 8-10 MB), which can also be rendered on the map.

Wyvern’s Open Data hyperspectral dataset

Issues: The “zIndex” parameter for the “new STAC({})” layer functions somewhat differently compared to other layer types. As a result, to ensure that the STAC COG remains on top, additional JavaScript logic was implemented.

Complete list of used frameworks and libraries:

  • Quasar Framework (Vue.js based)

  • OpenLayers.js

  • ol-stac

  • proj4

Useful links: