1 of 20

Get most out of�STAC Browser

Matthias Mohr�Ind. Consultant�matthias@mohr.ws

Slides: mohr.ws/foss4g

2 of 20

Introduction

  • Web user interface for STAC
  • Static STAC catalogs & STAC APIs
  • Version 3 rewritten from scratch

​

Repository: github.com/radiantearth/stac-browser �Demo: radiantearth.github.io/stac-browser

3 of 20

v2 / v3 main differences

  • New customizable User Interface
  • API support
  • Search (Items + Collections)
  • Some authentication support
  • Multi-language support (DE, EN, ES, FR, IT, RO)
  • “clean” URLs
  • Metadata for assets
  • …

4 of 20

Multi-Language

​

English

French

German�Italien�Romanian

Spanish��and your language?�

5 of 20

Authentication

​

OpenID Connect�API Tokens

authConfig: {

type: 'header',

key: 'Authorization',

formatter: 'Bearer',

tokenGenerator: 'oidc',

generatorOptions: {

issuer: 'https://account.example.co/oidc',

clientId: 'client-id-123',

scopes: ['openid'],

redirectUri: 'https://example.com/auth',

postLogoutRedirectUri: 'https://example.com/auth/logout'

}

}

6 of 20

Tree Browser�

7 of 20

Metadata��many extensions pre-configured�and

extensible for custom extensions

Registry.addExtension('foss4g', 'FOSS4G Prizren');�

Registry.addMetadataField('foss4g:is_cool', {

label: "Is FOSS4G cool?",

formatter: value => value ? "Sure!" : "Meh!"

});

​

8 of 20

Label Extension

​

GeoJSON + COG

9 of 20

Charts

​

Stats Extension�and�Histograms

10 of 20

Charts

​

Stats Extension�and�Histograms

11 of 20

COGs

​

​

  • GeoZarr?
  • GeoParquet?
  • COPC?�

​

12 of 20

Map-based�Item Preview

and Selection��available for�Catalogs / Collections�and�Item Search

13 of 20

Collection Search

​

incl. CQL & Queryables�

14 of 20

Free-text search

​

for Items�and Collections

15 of 20

Actions

import CopcViewer from './src/actions/assets/CopcViewer.js';

import CoGeoXyz from './src/actions/assets/CoGeoXyz.js';

import GeoJsonIo from './src/actions/assets/GeoJsonIo.js';

import Felt from './src/actions/assets/Felt.js';

​

export default {

CopcViewer,

CoGeoXyz,

GeoJsonIo,

Felt

};

export default class CopcViewer extends AssetActionPlugin {

get show() {

return this.asset.type === 'application/vnd.laszip+copc';

}

get uri() {

let uri = new URI("https://viewer.copc.io");

uri.addQuery('copc', this.component.href);

return uri;

}

get text() {

return i18n.t('actions.openIn', {service: 'copc.io'});

}

}

16 of 20

How to improve your API / catalog

  • Always provide meaningful link titles
    • … and make them match the title (or Item ID) of the resource
  • Always provide root, parent and self links
  • Provide consistent thumbnails
    • … and add thumbnail sizes (e.g. via proj:shape)
  • Customize STAC Browser through the root catalog
  • Provide band statistics, nodata value and projection for COGs
  • Validate!

17 of 20

STAC Browser “extensions” (1)

  • email in Provider Object
  • icon relation type�

18 of 20

STAC Browser “extensions” (2)

  • stac_browser field for custom configuration
    • apiCatalogPriority
    • authConfig
    • cardViewMode
    • cardViewSort
    • crossOriginMedia
    • defaultThumbnailSize
    • displayGeoTiffByDefault
    • showThumbnailsAsAssets
    • stacLint

19 of 20

Sponsors

  • Radiant Earth (base funding for versions 1, 2 and 3)
  • National Resources Canada (multi-language support)
  • Spacebel (Collection search)
  • Planet (OpenID Connect, Action plugins)
  • myself
    • contact me if you want to fund STAC Browser!

20 of 20

Q&A

Thanks for your attention!��Contact me:�matthias@mohr.ws��Slides:�mohr.ws/foss4g