{"id":13738723,"url":"https://github.com/radiantearth/stac-browser","last_synced_at":"2025-03-05T00:17:50.295Z","repository":{"id":37075961,"uuid":"132832921","full_name":"radiantearth/stac-browser","owner":"radiantearth","description":"A full-fledged UI in Vue for browsing and searching static STAC catalogs and STAC APIs","archived":false,"fork":false,"pushed_at":"2025-02-25T17:42:56.000Z","size":296221,"stargazers_count":304,"open_issues_count":78,"forks_count":154,"subscribers_count":21,"default_branch":"main","last_synced_at":"2025-03-03T18:03:38.025Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://radiantearth.github.io/stac-browser","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/radiantearth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-10T01:39:58.000Z","updated_at":"2025-03-01T08:52:57.000Z","dependencies_parsed_at":"2022-07-14T10:22:08.433Z","dependency_job_id":"4fbfc587-67dc-4f7a-bb53-23a8fde6b074","html_url":"https://github.com/radiantearth/stac-browser","commit_stats":{"total_commits":914,"total_committers":33,"mean_commits":"27.696969696969695","dds":0.3282275711159738,"last_synced_commit":"15b31120f7d3b9f53384f41d963a195b4432134f"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radiantearth%2Fstac-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radiantearth%2Fstac-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radiantearth%2Fstac-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radiantearth%2Fstac-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/radiantearth","download_url":"https://codeload.github.com/radiantearth/stac-browser/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241940576,"owners_count":20045883,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T03:02:34.996Z","updated_at":"2025-03-05T00:17:50.287Z","avatar_url":"https://github.com/radiantearth.png","language":"Vue","funding_links":[],"categories":["Vue","Languages other than `Python` and `R`"],"sub_categories":["Testing your code"],"readme":"# STAC Browser\n\nThis is a [Spatio-Temporal Asset Catalog (STAC)](https://github.com/radiantearth/stac-spec) browser for static catalogs.\nMinimal support for APIs is implemented, but it not the focus of the Browser and may lead to issues.\nIt attempts to surface all included data in a user-centric way (an approach\nwhich can inform how data is represented in the evolving spec). It is\nimplemented as a single page application (SPA) for ease of development and to\nlimit the overall number of catalog reads necessary when browsing (as catalogs\nmay be nested and do not necessarily contain references to their parents).\n\nVersion: **3.3.4** (supports all STAC versions between 0.6.0 and 1.1.0)\n\nThis package has also been published to npm as [`@radiantearth/stac-browser`](https://www.npmjs.com/package/@radiantearth/stac-browser).\n\nIt's not officially supported, but you may also be able to use it for\ncertain _OGC API - Records_ and _OGC API - Features_ compliant servers.\n\n**Please note that STAC Browser is currently with limited funding for both maintenance, bug fixes and improvements. This means issues and PRs may be addressed very slowly.\nIf you care about STAC Browser and have some funds to support the future of STAC Browser, please contact matthias@mohr.ws**\n\n**Table of Contents:**\n\n- [STAC Browser](#stac-browser)\n  - [Examples](#examples)\n  - [Get Started](#get-started)\n    - [Private query parameters](#private-query-parameters)\n    - [Migrate from old versions](#migrate-from-old-versions)\n  - [Customize](#customize)\n    - [Options](#options)\n    - [Languages](#languages)\n      - [Custom phrases](#custom-phrases)\n    - [Themes](#themes)\n    - [Basemaps](#basemaps)\n    - [Actions](#actions)\n    - [Additional metadata fields](#additional-metadata-fields)\n      - [Example](#example)\n      - [Translation](#translation)\n    - [Customize through root catalog](#customize-through-root-catalog)\n    - [Custom extensions](#custom-extensions)\n  - [Docker](#docker)\n  - [Contributing](#contributing)\n    - [Adding a new language](#adding-a-new-language)\n  - [Sponsors](#sponsors)\n\n## Examples\n\nA demo instance is running at \u003chttps://radiantearth.github.io/stac-browser/\u003e.\n\nThe catalog section of [STAC Index](https://stacindex.org) is also built on top of STAC Browser (currently v2).\n\n## Get Started\n\nFirst, you need to clone or download this repository.\n\nThen switch into the newly created folder and install all dependencies:\n\n```bash\nnpm install\n```\n\nBy default, STAC Browser will let you browse all catalogs on STAC Index.\n\nTo browse only your own static STAC catalog or STAC API, set the `catalogUrl` CLI parameter when running the dev server.\nIn this example we point to EarthSearch (`https://earth-search.aws.element84.com/v1/`):\n\n```bash\nnpm start -- --open --catalogUrl=\"https://earth-search.aws.element84.com/v1/\"\n```\n\nTo open a local file on your system, see the chapter [Using Local Files](docs/local_files.md).\n\nIf you'd like to publish the STAC Browser instance use the following command:\n\n```bash\nnpm run build -- --catalogUrl=\"https://earth-search.aws.element84.com/v1/\"\n```\n\nThis will only work on the root path of your domain though. If you'd like to publish in a sub-folder,\nyou can use the [`pathPrefix`](docs/options.md#pathprefix) option.\n\n\u003e [!NOTE]  \n\u003e If you are using a recent version of node/npm on Windows, you may need to use `npm run build -- -- ...` instead of `npm run build -- ...`, see \u003chttps://github.com/npm/cli/issues/7375\u003e for details.\n\nAfter building, `dist/` will contain all assets necessary\nhost the browser. These can be manually copied to your web host of choice.\n**Important:** If `historyMode` is set to `history` (which is the default value), you'll need to add\nan additional configuration file for URL rewriting.\nPlease see the [`historyMode`](docs/options.md#historymode) option for details.\n\nYou can customize STAC Browser, too. See the options and theming details below.\nIf not stated otherwise, all options can either be specified via CLI, ENV variables or in the [config file](config.js).\nYou can also provide configuration options \"at runtime\" (after the build).\n\n### Private query parameters\n\n**_experimental_**\n\nSTAC Browser supports \"private query parameters\", e.g. for passing an API key through. Any query parameter that is starting with a `~` will be stored internally, removed from the URL and be appended to STAC requests. This is useful for token-based authentication via query parameters.\n\nSo for example if your API requires to pass a token via the `API_KEY` query parameter, you can request STAC Browser as such:\n`https://examples.com/stac-browser/?~API_KEY=123` which will change the URL to `https://examples.com/stac-browser/` and store the token `123` internally. The request then will have the query parameter attached and the Browser will request e.g. `https://examples.com/stac-api/?API_KEY=123`.\n\nPlease note: If the server hosting STAC Browser should not get aware of private query parameters and you are having `historyMode` set to `\"history\"`, you can also append the private query parameters to the hash so that it doesn't get transmitted to the server hosting STAC Browser.\nIn this case use for example `https://examples.com/stac-browser/#?~API_KEY=123` instead of `https://examples.com/stac-browser/?~API_KEY=123`.\n\n### Migrate from old versions\n\nPlease read the [migration documentation](docs/migrate.md) for details.\n\n## Customize\n\n### Options\n\nSTAC Browser supports customization through a long list of options that can be set in various ways.\n\nPlease read the **[documentation for the options](docs/options.md)**.\n\n### Languages\n\nSTAC Browser can be translated into other languages and can localize number formats, date formats etc.\n\nYou need to change the [`locale`](docs/options.md#locale) and [`supportedLocales`](docs/options.md#supportedlocales) settings to select the default language and the languages available to users.\n\nThe following languages are currently supported:\n\n- Arabic `ar`\n- German `de` (Germany `de`, Switzerland `de-CH`)\n- Spanish `es`\n- English `en` (International `en`, US `en-US`, UK `en-GB`)\n- French `fr` (Canada `fr-CA`, France `fr`, Switzerland `fr-CH`)\n- Italian `it` (Italy `it`, Switzerland `it-CH`)\n- Romanian `ro`\n- Japanese `ja`\n- Portuguese `pt` (Brazil `pt-BR`, Portugal `pt`)\n\nWe manage the translations in Crowdin, please see \u003chttps://crowdin.com/project/stac-browser/\u003e for details.\n\nTo add your own language, please follow the guide below: [Adding a new language](#adding-a-new-language)\n\nThe following contributors kindly provide the translations:\n\n- [@jfbourgon](https://github.com/jfbourgon): `fr`, `fr-CA`\n- [@mneagul](https://github.com/mneagul): `ro`\n- [@m-mohr](https://github.com/m-mohr): `de`, `en`, `en-GB`, `en-US`\n- [@p1d1d1](https://github.com/p1d1d1): `de-CH`, `fr-CH`, `it`, `it-CH`\n- [@psacra](https://github.com/psacra): `pt`\n- [@randa-11295](https://github.com/randa-11295): `ar`\n- [@rnanclares](https://github.com/rnanclares): `es`\n- [@uba](https://github.com/uba): `pt-BR`\n\n#### Custom phrases\n\nYou can define custom phrases in the `custom.json`.\nThis is especially useful for phrases that are coming from non-standadized metadata fields (see the chapter \"[Additional metadata fields](#additional-metadata-fields)\").\nIf you've found metadata labels (e.g. \"Price\" and \"Generation Time\") that are not translated,\nyou can add it to the `custom.json`. For metadata fields you need to add it to a the object `fields`\nas it is the group for the metadata-related phrases.\nThere you can add as many phrases as you like. For example:\n\n```json\n{\n  \"fields\": {\n    \"Price\": \"Preis\",\n    \"Generation Time\": \"Generierungszeit\"\n  }\n}\n```\n\n### Themes\n\nYou can customize STAC Browser in the `src/theme` folder. It contains Sass files (a CSS preprocessor), which you can change to suit your needs.\n\nThe easiest solution is to start with the `variables.scss` file and customize the options given there.\nFor simplicity we just provide some common options as default, but you can also add and customize any Bootstrap variable,\nsee \u003chttps://getbootstrap.com/docs/4.0/getting-started/theming/\u003e for details.\n\nThe file `page.scss` contains some Sass declarations for the main sections of STAC Browser and you can adopt those to suit your needs.\n\nIf you need even more flexibility, you need to dig into the Vue files and their dependencies though.\n\n### Basemaps\n\nThe file `basemaps.config.js` contains the configuration for the basemaps.\nYou can update either just the `BASEMAPS` object or you can write a custom function `configureBasemap` that returns the desired options for [vue2-leaflet](https://vue2-leaflet.netlify.app/).\n[XYZ](https://vue2-leaflet.netlify.app/components/LTileLayer.html#props) and [WMS](https://vue2-leaflet.netlify.app/components/LWMSTileLayer.html#props) basemaps are supported and have different options that you can set.\n\n### Actions\n\nSTAC Browser has a pluggable interface to share or open assets and links with other services, which we call \"actions\".\n\nMore information about how to add or implement actions can be found in the **[documentation](docs/actions.md)**.\n\n### Additional metadata fields\n\nThe metadata that STAC Browser renders is rendered primarily through the library [`stac-fields`](https://www.npmjs.com/package/@radiantearth/stac-fields).\nIt contains a lot of rules for rendering [many existing STAC extensions](https://github.com/stac-utils/stac-fields/blob/main/fields.json) nicely.\nNevertheless, if you use custom extensions to the STAC specification you may want to register your own rendering rules for the new fields.\nThis can be accomplished by customizing the file [`fields.config.js`](./fields.config.js).\nIt uses the [Registry](https://github.com/stac-utils/stac-fields/blob/main/README.md#registry) defined in stac-fields to add more extensions and fields to stac-fields and STAC Browser.\n\nTo add your own fields, please consult the documentation for the [Registry](https://github.com/stac-utils/stac-fields/blob/main/README.md#registry).\n\n#### Example\n\nIf you have a custom extension with the title \"Radiant Earth\" that uses the prefix `radiant:` you can add the extension as such:\n\n```js\nRegistry.addExtension(\"radiant\", \"Radiant Earth\");\n```\n\nIf this extension has a boolean field `radiant:public_access` that describes whether an entity can be accessed publicly or not, this could be described as follows:\n\n```js\nRegistry.addMetadataField(\"radiant:public_access\", {\n  label: \"Data Access\",\n  formatter: (value) =\u003e (value ? \"Public\" : \"Private\"),\n});\n```\n\nThis displays the field (with a value of `true`) in STAC Browser as follows: `Data Access: Public`.\n\nThe first parameter is the field name, the second parameter describes the field using a [\"field specification\"](https://github.com/stac-utils/stac-fields/blob/main/README.md#fieldsjson).\nPlease check the field specification for available options.\n\n#### Translation\n\nSTAC Browser supports [multiple languages](#languages).\nIf you use more than one language, you likely want to also translate the phrases that you've added above (in the example `Data Access`, `Public` and `Private`, assuming that `Radiant Earth` is a name and doesn't need to be translated).\nAll new phrases should be added to the [active languages](docs/options.md#supportedlocales).\nTo add the phrases mentioned above you need to go through the folders in `src/locales` and in the folders of the active languages update the file `custom.json` as described in the section that describes [adding custom phrases](#custom-phrases).\nAll new phrases must be added to the property `fields`.\n\nBelow you can find an example of an updated `custom.json` for the German language (folder `de`). It also includes the `authConfig`, which is contained in the file by default for [other purposes](docs/options.md#authconfig).\n\n```json\n{\n  \"authConfig\": {\n    \"description\": \"\"\n  },\n  \"fields\": {\n    \"Data Access\": \"Zugriff auf die Daten\",\n    \"Public\": \"Öffentlich\",\n    \"Private\": \"Privat\"\n  }\n}\n```\n\n### Customize through root catalog\n\nYou can also provide a couple of the config options through the root catalog.\nYou need to provide a field `stac_browser` and then you can set any of the following options:\n\n- `apiCatalogPriority`\n- `authConfig` (except for the `formatter` as function)\n- `cardViewMode`\n- `cardViewSort`\n- `crossOriginMedia`\n- `defaultThumbnailSize`\n- `displayGeoTiffByDefault`\n- `showThumbnailsAsAssets`\n\n### Custom extensions\n\nSTAC Browser supports some non-standardized extensions to the STAC specification that you can use to improve the user-experience.\n\n1. [Provider Object](https://github.com/radiantearth/stac-spec/blob/master/collection-spec/collection-spec.md#provider-object):\n   Add an `email` (or `mail`) field with an e-mail address and the mail will be shown in the Browser.\n2. [Alternative Assets Object](https://github.com/stac-extensions/alternate-assets?tab=readme-ov-file#alternate-asset-object):\n   Add a `name` field and it will be used as title in the tab header, the same applies for the core Asset Object.\n3. A link with relation type `icon` and a Browser-supported media type in any STAC entity will show an icon in the header and the lists of Catalogs, Collections and Items.\n\n## Docker\n\nYou can use the Docker to work with STAC Browser. Please read [Docker documentation](docs/docker.md) for more details.\n\n## Contributing\n\nWe are happy to review and accept Pull Requests.\nSTAC Browser is following the [STAC code of conduct](https://github.com/radiantearth/stac-spec/blob/master/CODE_OF_CONDUCT.md).\n\nSTAC Browser uses [Vue](https://vuejs.org/) and [vue-cli](https://cli.vuejs.org/), so you need a recent version of [NodeJS and npm](https://nodejs.org/en/) installed.\n\nYou can run the following commands (see also \"[Get started](#get-started)\" above):\n\n- `npm run install`: Install the dependencies, this is required once at the beginning.\n- `npm start`: Start the development server\n- `npm run lint`: Lint the source code files\n- `npm run build`: Compile the source code into deployable files for the web. The resulting files can be found in the folder `dist` and you can then deploy STAC Browser on a web host. There are two other variants:\n  - `npm run build:report`: Same as above, but also generates a bundle size report (see `dist/report.html`), which should not be deployed.\n  - `npm run build:minimal`: Same as above, but tries to generate a minimal version without bundle size report and without source maps.\n- `npm run i18n:fields`: Generates an updated version of the locales from the stac-fields package.\n\nThe [release process is documented separately](docs/release.md).\n\n### Adding a new language\n\nYou can translate STAC Browser into other languages.\nYou can also use one of the existing languages and provide an alternate version for a specifc country, e.g. a Australian English (en-AU) version of the US-English language pack (en).\n\n**Please follow this guide:**\n\n- Copy the `en` folder (or any other language without a country code that you want to base the translation on).\n  - Note: If you start with the `en` folder, you have to remove the leading `//` from the line `// { fields: require('./fields.json') }` in the file `default.js`.\n- Name the new folder according to [RFC5646](https://www.rfc-editor.org/rfc/rfc5646).\n- Add the language to the list of supported locales ([`supportedLocales`](docs/options.md#supportedlocales)) in the `config.js` file.\n- Add the language to the [list of languages in this README file](#languages).\n- Add yourself to the list of code owners (`.github/CODEOWNERS`) for this language (we'll invite you to this repository after you've opened a PR). **Persons contributing languages are expected to maintain them long-term! If you are not able to maintain the language pack, please indicate so in the PR and we'll release it separately.**\n- Translate the `.json` files, most importantly `config.json`, `fields.json` and `texts.json`.\n  - Please note that you never need to translate any object keys!\n  - If you base your language on another existing language (e.g. create `en-IN` based on `en`) you can delete individual files and import existing files from other languages in `default.js`.\n- Adapt the `datepicker.js`, `duration.js` and `validation.js` files to import the existing definitions from their corresponding external packages, but you could also define the specifics yourself.\n- Check that your translation works by running the development server (`npm start`) and navigating to the STAC Browser instance in your browser (usually `http://localhost:8080`).\n- Once completed, please open a pull request and we'll get back to you as soon as possible.\n- After merging the PR for the first time, we'll add you to our translation management tool Crowdin: \u003chttps://crowdin.com/project/stac-browser/\u003e. Please get in touch to get your invite!\n\n## Sponsors\n\nThe following sponsors have provided a substantial amount of funding for STAC Browser in the past:\n\n- [Radiant Earth](https://radiant.earth) (base funding for versions 1, 2 and 3)\n- [swisstopo](https://www.swisstopo.admin.ch/) (maintenance, base funding for version 3 and 4)\n- [National Resources Canada](https://natural-resources.canada.ca/home) (multi-language support, maintenance)\n- [Matthias Mohr - Softwareentwicklung](https://mohr.ws) (maintenance)\n- [Spacebel](https://spacebel.com) (collection search, mapping)\n- [Planet](https://planet.com) (authentication, maintenance)\n- [CloudFerro](https://cloudferro.com) (authentication, alternate asset and storage extension)\n- [Geobeyond](http://www.geobeyond.it/) (mapping)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradiantearth%2Fstac-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fradiantearth%2Fstac-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradiantearth%2Fstac-browser/lists"}