This is a Spatio-Temporal Asset Catalog (STAC) browser for static catalogs. It attempts to surface all included data in a user-centric way (an approach which can inform how data is represented in the evolving spec). It is implemented as a single page application (SPA) for ease of development and to limit the overall number of catalog reads necessary when browsing (as catalogs may be nested and do not necessarily contain references to their parents).
- planet.stac.cloud (catalog on GitHub)
- CBERS (catalog tools on GitHub)
- Google Earth Engine
- sat-api.stac.cloud (sat-api on GitHub)
For a longer list of examples, checkout out stac.cloud.
npm install CATALOG_URL=http://path/to/catalog.json npm start -- --open
STAC Browser defaults to using HTML5 History
Mode, which can
cause problems on certain web hosts. To use hash mode, set
HISTORY_MODE=hash when running or building. This will be compatible with
S3, stock Apache, etc.
CATALOG_URL=http://path/to/catalog.json npm run build
STAC Browser includes the ability to prerender catalog pages to HTML using Puppeteer to control a headless Chromium instance. This facilitates search engine indexing, as metadata and content will be present in the HTML prior to loading external catalogs.
To prerender, run:
bin/prerender.js -p <public URL> <catalog URL>
dist/ will contain all assets necessary to host the browser.
After publishing (see below), the generated sitemap can be submitted for crawling by Google:
After building or prerendering,
dist/ will contain all assets necessary to
host the browser. These can be manually copied to your web host of choice.
Alternately, you can publish to Netlify for free.
First, create a new site:
The generated site id will be used as
NETLIFY_SITE_ID in your environment.
To deploy without prerendering:
CATALOG_URL=... NETLIFY_SITE_ID=... npm run deploy
To deploy a prerendered version you'll also need the target URL:
CATALOG_URL=... NETLIFY_SITE_ID=... STAC_URL=... npm run deploy-prerendered
To facilitate prerendering, STAC Browser includes functionality for crawling
As-is, this will just output the type and URL for all entries in the catalog.
In real-world use, you'll probably want to use it as an example and write
STAC Browser uses Vue.
Catalogs and collections are rendered using the
Catalog component in
src/components/. Items are rendered using the
Item component. Common functionality across both
components exists in
Mappings between property keys (e.g.
eo:platform) are defined in
If you're interested in experimenting with a STAC browser built with different JS frameworks, check out: