Visualizing GeoZarr: The EOPF-Explorer Frontend Stack

For years, working with high-resolution datasets like Copernicus Sentinel-2 L2A required navigating a traditional, download-first pipeline. Users had to download massive, monolithic SAFE format archives (opens new window), wrestling with complex folder hierarchies and distributed metadata just to extract and visualize a specific area of interest.

We are proud to launch the EOPF Sentinel Zarr Explorer. As co-leads in its development for the European Space Agency (opens new window) alongside Development Seed (opens new window), EOX is thrilled to demonstrate the immense potential of transitioning Sentinel data into a truly cloud-native environment.

At the core of this transition is GeoZarr (also referred to as Web-Optimized Zarr). GeoZarr takes the high-throughput, chunked array structure of the open Zarr container format and embeds crucial community-driven geospatial conventions. By defining multiscales for progressive multi-resolution pyramids and establishing clear spatial georeferencing, GeoZarr treats satellite data as a streamable API rather than a file to be downloaded.

Leveraging EOX's expertise in Earth observation web tooling, the EOPF-Explorer proves that the frontend ecosystem is ready for this shift. In this post, we will look at how our open-source visualization stack can seamlessly parse and render Sentinel-2 GeoZarr data dynamically in the browser, computing visuals on the fly without ever moving the underlying product archive.

# An Ecosystem Ready to Visualize

Transitioning from monolithic SAFE archives to cloud-native GeoZarr is only half the battle. If the format is to succeed, the EO ecosystem must be equipped to render it seamlessly.

The EOPF-Explorer project relies on a modular, open-source stack that fully implements the GeoZarr specification. This stack supports both server-side and client-side rendering from which you can choose depending on the architecture of your application:

  • TiTiler-EOPF (opens new window) (Server-Side Rendering): A web API that computes visualizations on the fly directly from Zarr products in cloud object storage. It handles complex band math and processing server-side, passing lightweight imagery to the frontend.
  • OpenLayers (opens new window) (Client-Side Engine): For rendering natively in the browser, OpenLayers provides the foundational map engine. Using WebGL and a dedicated GeoZarr source implementation, it directly parses the conventions of the Zarr container to render multidimensional arrays client-side.
  • EOxElements (opens new window) (UI Components): EOxElements wraps OpenLayers capabilities into framework-agnostic, drop-in Web Components. Developers can use standard HTML tags (like <eox-map>) to easily configure map viewers and integrate complex, complementary logic without writing extensive JavaScript.
  • eodash (opens new window) (Dashboard Framework): eodash provides the overarching framework to structure these individual UI components into interactive web applications and data dashboards.

Further technical details and documentation for each of these tools are available on the EOPF-Explorer Software & Services page (opens new window).

# Hands-On: Visualizing Sentinel-2 L2A

To understand the practical advantage of Web-Optimized Zarr, let's look at a minimal client-side implementation. Using EOxElements and OpenLayers, we can visualize a Sentinel-2 L2A scene directly from cloud storage without downloading the product or setting up a dedicated rendering server.

Below is the configuration of a layer for the EOxMap element. It defines a WebGL tile layer that reads directly from a remote GeoZarr source:

{
  type: "WebGLTile",
  properties: { id: "geozarr", title: "Sentinel-2 GeoZarr" },
  source: {
    type: "GeoZarr",
    url: "https://s3.explorer.eopf.copernicus.eu/esa-zarr-sentinel-explorer-fra/tests-output/sentinel-2-l2a-staging/S2A_MSIL2A_20251227T100441_N0511_R122_T33TVF_20251227T121715.zarr",
    group: "measurements/reflectance",
    bands: ["b04", "b03", "b02"],
  },
  style: {
    gamma: 1.5,
    color: [
      "color",
      ["interpolate", ["linear"], ["band", 1], 0, 0, 0.5, 255],
      ["interpolate", ["linear"], ["band", 2], 0, 0, 0.5, 255],
      ["interpolate", ["linear"], ["band", 3], 0, 0, 0.5, 255],
      [
        "case",
        ["==", ["+", ["band", 1], ["band", 2], ["band", 3]], 0],
        0,
        1,
      ],
    ],
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

This compact configuration is doing a lot of heavy lifting behind the scenes:

  • The GeoZarr Source Type: This instructs OpenLayers to parse the Zarr store's metadata, interpreting the multiscales (for progressive zooming) and spatial conventions automatically.

  • Targeting the Data: The url points directly to the Zarr store. Because Zarr is a hierarchical format, the group property navigates directly to the measurements/reflectance path, where we explicitly request the arrays for bands b04, b03, and b02 (Sentinel-2's Red, Green, and Blue channels), where only the specific data chunks required for the user's current map extent and zoom level are fetched over the network.

  • Client-Side Styling: The style block uses WebGL to interpolate the band data on the fly, applying a gamma correction and handling no-data values (setting opacity to 0 where the sum of the bands is 0) to render a true-color image directly in the browser.


Client Side rendered GeoZarr on EOxMap, and EOxLayercontrol providing band selection, gamma correction, and brightness adjustment, checkout the tutorial here (opens new window)

# Creating GeoZarr-Powered Narratives

While EOxMap provides the core visualization, sharing insights from Earth observation data often requires guided context. To bridge the gap between raw data and audience understanding, the EOxElements suite includes EOxStorytelling.

Designed for interactive scrollytelling, this component allows domain experts to build narratives using standard Markdown. Authors can map specific text blocks to precise map states—such as defining bounding boxes, zoom levels, or swapping active layers. As the user scrolls, the component simply updates the map's state to match the current section of text, utilizing the same underlying GeoZarr source for different views.

NDVI Story from the EOPF-Explorer website, try it out on the website (opens new window)

# Scaling Up to a Dashboard

Moving beyond the map component itself, we use eodash (opens new window) to structure these visualizations into full interactive web applications and dashboards.

eodash is an open-source framework conceptualized around SpatioTemporal Asset Catalogs (STAC) to build federated Earth Observation dashboards. By instanciating eodash and passing specific configurations, developers can define exactly how the underlying map connects to interactive UI elements like timeline sliders, dynamic charts, and STAC search interfaces.

EOPF-Explorer Sentinel Browser, powered by eodash, displaying server side rendered GeoZarr using TiTiler-EOPF

# Explore It Yourself

The EOPF-Explorer visualization stack builds on EOX's track record of delivering open-source Earth observation tooling, continuing our mission to make complex EO data seamlessly accessible.

The best way to understand this capability is to see it in action. We invite you to visit explorer.eopf.copernicus.eu (opens new window) to try the Sentinel Browser, experiment with openEO Studio, and explore the interactive showcases.

If you want to integrate these components into your own applications, the documentation for EOxElements (opens new window), eodash (opens new window), and the rest of our visualization stack is available on our Software & Services page (opens new window).

# Introductory Webinar

We are hosting a series of community webinars to help you get started. The first introductory session takes place on 9 March 2026, we invite you to register here (opens new window). Follow the project, explore the tools, and join us in shaping the future of cloud-native Earth observation!

# Acknowledgments

This project is funded by the European Space Agency through the Copernicus Space Component programme, and developed by a consortium led by Development Seed (opens new window) and EOX (opens new window), with community outreach led by thriveGEO (opens new window).

We're grateful to the many contributors who helped shape both the tools and the standards, including maintainers across GDAL, OpenLayers, TiTiler, xarray, and the Zarr community.