Installation steps

1. Create your project based on GeoGirafe. To create a new GeoGirafe project, follow the instruction on https://gitlab.com/geogirafe/gg-viewer

2. Install this plugin using npm i gg-stac-explorer

3. In index.html add <stac-explorer slot="main"></stac-explorer> in the tag <girafe-lr-panel class="panel-right" dock="right">

4. Add a button to open the panel, with the following code in the buttonbar-grid

<button
  tip="stac-explorer-panel"
  slot="menu-content"
  class="gg-icon-button gg-big"
  onclick="
    document.geogirafe.state.extendedState.stacExplorer.panelVisible =
      !document.geogirafe.state.extendedState.stacExplorer.panelVisible
  ">
  <img alt="stac-explorer-icon" src="node_modules/gg-stac-explorer/dist/stac.svg" />
</button>

5. In main.ts, import and register the plugin :

• Add import StacExplorerComponent from 'gg-stac-explorer' in the list of imports
• Add customElements.define('stac-explorer', StacExplorerComponent); in the girafeApp.isReady() promise

6. Copy the translations files node_modules/gg-stac-explorer/public/i18n into your project, and register them in the configuration config.json file with lines like : "fr": ["i18n/fr.json", "i18n/stac-explorer-fr.json"]

7. (Optional) Set a default STAC catalog URL by adding a gg-stac-explorer section under extendedConfig in config.json :

"extendedConfig": {
  "gg-stac-explorer": {
    "catalogUrl": "https://sitn.ne.ch/services/stac/catalog.json"
  }
}

If this is not set, the STAC catalog URL field starts empty.

Usage

The panel has two tabs:

• Hierarchy browses the catalog by following its child links (sub-catalogs, collections, items and assets).
• Search is only available when the URL points to a STAC API landing page (with a rel: "search" link). It lists every collection of the API, and can filter items by date range, by the current map extent and by one of the attributes exposed by the API's queryables.