Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ 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).

Version: **3.3.3** (supports all STAC versions between 0.6.0 and 1.1.0)
Version: **3.3.4** (supports all STAC versions between 0.6.0 and 1.1.0)

This package has also been published to npm as [`@radiantearth/stac-browser`](https://www.npmjs.com/package/@radiantearth/stac-browser).

Expand Down Expand Up @@ -123,6 +123,7 @@ You need to change the [`locale`](docs/options.md#locale) and [`supportedLocales

The following languages are currently supported:

- Arabic `ar`
- German `de` (Germany `de`, Switzerland `de-CH`)
- Spanish `es`
- English `en` (International `en`, US `en-US`, UK `en-GB`)
Expand All @@ -143,6 +144,7 @@ The following contributors kindly provide the translations:
- [@m-mohr](https://github.com/m-mohr): `de`, `en`, `en-GB`, `en-US`
- [@p1d1d1](https://github.com/p1d1d1): `de-CH`, `fr-CH`, `it`, `it-CH`
- [@psacra](https://github.com/psacra): `pt`
- [@randa-11295](https://github.com/randa-11295): `ar`
- [@rnanclares](https://github.com/rnanclares): `es`
- [@uba](https://github.com/uba): `pt-BR`

Expand Down
4 changes: 1 addition & 3 deletions assetActions.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import CopcViewer from './src/actions/assets/CopcViewer.js';
import F3D from './src/actions/assets/F3D.js';
import GeoJsonIo from './src/actions/assets/GeoJsonIo.js';
// import Geofox from './src/actions/assets/Geofox.js';
// import Geoparquet from './src/actions/assets/Geoparquet.js';
// import Potree from './src/actions/assets/Potree.js';
import Protomaps from './src/actions/assets/Protomaps.js';

Expand All @@ -14,7 +13,6 @@ export default {
CopcViewer,
F3D,
GeoJsonIo,
// Geoparquet, // not ready yet
// Potree,
Protomaps,
};
};
7 changes: 4 additions & 3 deletions basemaps.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const WMS = 'TileWMS';
const XYZ = 'XYZ';

// All options (except for 'is') follow the OpenLayers options for the respective source class.
// Projections (except for EPSG:3857 and EPSG:4326) must be listed in the `crs` array in the config.js.
const BASEMAPS = {
earth: [
{
Expand All @@ -22,7 +23,7 @@ const BASEMAPS = {
is: WMS,
title: 'USGS Europa',
attributions: USGS_ATTRIBUTION,
projection: "EPSG:4326",
projection: 'EPSG:4326',
params: {
FORMAT: 'image/png',
LAYERS: 'GALILEO_VOYAGER'
Expand All @@ -35,7 +36,7 @@ const BASEMAPS = {
is: WMS,
title: 'USGS Mars',
attributions: USGS_ATTRIBUTION,
projection: "EPSG:4326",
projection: 'EPSG:4326',
params: {
FORMAT: 'image/png',
LAYERS: 'MDIM21'
Expand All @@ -48,7 +49,7 @@ const BASEMAPS = {
is: WMS,
title: 'USGS Moon',
attributions: USGS_ATTRIBUTION,
projection: "EPSG:4326",
projection: 'EPSG:4326',
params: {
FORMAT: 'image/png',
LAYERS: 'LROC_WAC'
Expand Down
6 changes: 5 additions & 1 deletion config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ module.exports = {
fallbackLocale: "en",
supportedLocales: [
"de",
"ar",
// "de-CH",
"es",
"en",
Expand Down Expand Up @@ -45,5 +46,8 @@ module.exports = {
requestQueryParameters: {},
socialSharing: ['email', 'bsky', 'mastodon', 'x'],
preprocessSTAC: null,
authConfig: null
authConfig: null,
// defaultSearchExtent e.g. [12.227593034455793, 41.78656913683952, 12.652310726657447, 42.02970865107619]
defaultSearchExtent: null,
crs: {}
};
5 changes: 5 additions & 0 deletions config.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,11 @@
"$ref": "https://stac-extensions.github.io/authentication/v1.1.0/schema.json"
}
]
},
"crs": {
"type": [
"object"
]
}
}
}
154 changes: 79 additions & 75 deletions docs/actions.md
Original file line number Diff line number Diff line change
@@ -1,120 +1,124 @@
# Actions
# Actions <!-- omit in toc -->

STAC Browser has a pluggable interface to share or open assets and links with other services, which we call "actions".

An action adds a button to an asset or link if certain requirements are met, which can then be executed by users.
For example, you could open COPC files in a dedicated COPC Viewer, which otherwise you could only download.

## Assets
- [User Guide](#user-guide)
- [Assets](#assets)
- [Links](#links)
- [Developer Guide](#developer-guide)

All actions for assets are stored in the folder [`src/actions/assets`](../src/actions/assets).
They all implement the [`AssetActionPlugin` interface](../src/actions/AssetActionPlugin.js).
The actions can be enabled by adding them to the [`assetActions.config.js`](../assetActions.config.js) file.

### cogeo.xyz
## User Guide

Adds an `Open in cogeo.xyz` button that allows to open Cloud-Optimized GeoTiff (COG) files on <https://cogeo.xyz>.
### Assets

```js
import CoGeoXyz from './src/actions/assets/CoGeoXyz.js';
export default { CoGeoXyz };
```
The following actions are available:

### copc.io
- `Cesium`: Allows to open OGC 3D Tiles (media type `application/3dtiles+json`) files through the Cesium Sandcastle at <https://sandcastle.cesium.com>.
- `CopcViewer`: Allows to open Cloud-Optimized Point Cloud (COPC, media type `application/vnd.laszip+copc`) files through the Hobu COPC Viewer at <https://viewer.copc.io>.
- `F3D`: Allows to open 3D models (media types `model/gltf-binary`, `model/gltf+json`, and `application/fbx`) files through the F3D Web App at <https://f3d.app/web>.
- `Felt`: Allows to open GeoTIFF, GeoJON and KML/KMZ files through Felt at <https://felt.com/map/>.
- `Geofox`: Allows to open OGC 3D Tiles (media type `application/3dtiles+json`) files through the 3D Assets Viewer at <https://viewer.geofox.ai>.
- `GeoJsonIo`: Allows to open GeoJON files through [geojson.io](https://geojson.io).
- `Potree`: Allows to open Cloud-Optimized Point Cloud (COPC, media type `application/vnd.laszip+copc`) and Potree files (file names `cloud.js`, `metadata.json`, `ept.json`) files through the Potree Viewer at <https://3d.iconem.com/apps/load_potree_project_from_urlparam/>.
- `Protomaps`: Allows to open PMTiles (media type `application/vnd.pmtiles`) files through PMTiles Viewer at <https://pmtiles.io>.

Adds an `Open in copc.io` button that allows to open Cloud-Optimized Point Cloud (COPC) files on <https://viewer.copc.io>.

```js
import CopcViewer from './src/actions/assets/CopcViewer.js';
export default { CopcViewer };
```
All actions for assets are stored in the folder [`src/actions/assets`](../src/actions/assets) if you want to inspect them.

### Felt (Assets)

Adds an `Open in Felt` button that allows to import KML, KMZ, GeoTiff and GeoJSON assets to <https://felt.com>.
The actions can be enabled by adding them to the [`assetActions.config.js`](../assetActions.config.js) file.
Open the file and you'll see a number of imports and exports.
Import the file for the action that you want to enable, e.g. for Felt:

```js
import Felt from './src/actions/assets/Felt.js';
export default { Felt };
```

### geojson.io
The path is fixed to `./src/actions/assets/`, the file extension is always `.js`.
In-between add the file name from the list above.
The import name should be the file name without extension (i.e. `Felt` again).

Adds an `Open in geojson.io` button that allows to open GeoJSON files on <https://geojson.io>.
Lastly, add the import name to the list of exports, e.g.

```js
import GeoJsonIo from './src/actions/assets/GeoJsonIo.js';
export default { GeoJsonIo };
export default {
OtherAction,
Felt
};
```

### OGC3dTiles

Adds an `Open in Geofox.ai` button that allows to open OGC 3D Tiles files on <https://viewer.geofox.ai> or Cesium Sandcastle.

```js
import OGC3dTiles from './src/actions/assets/OGC3dTiles.js';
export default { OGC3dTiles };
```
Save the file and restart / rebuild STAC Browser.

### geoparquet.info
### Links

Adds an `Open in geoparquet.info` button that allows to open GeoParquet files on <https://geoparquet.info>.
The following actions are available:

```js
import Geoparquet from './src/actions/assets/Geoparquet.js';
export default { Geoparquet };
```
- `Cesium`: Allows to open OGC 3D Tiles (relation type `3d-tiles`, see [web-map-links extension](https://github.com/stac-extensions/web-map-links/blob/v1.2.0/README.md#3d-tiles)) files through the Cesium Sandcastle at <https://sandcastle.cesium.com>.
- `Felt`: Allows to open XYZ tile services (relation type `xyz`, see [web-map-links extension](https://github.com/stac-extensions/web-map-links/blob/v1.2.0/README.md#xyz)) files through Felt at <https://felt.com/map/>.
- `Geofox`: Allows to open OGC 3D Tiles (relation type `3d-tiles`, see [web-map-links extension](https://github.com/stac-extensions/web-map-links/blob/v1.2.0/README.md#3d-tiles)) files through the 3D Assets Viewer at <https://viewer.geofox.ai>.
- `Protomaps`: Allows to open PMTiles (relation type `pmtiles`, see [web-map-links extension](https://github.com/stac-extensions/web-map-links/blob/v1.2.0/README.md#pmtiles)) files through PMTiles Viewer at <https://pmtiles.io>.

### potree.org
All actions for assets are stored in the folder [`src/actions/links`](../src/actions/links) if you want to inspect them.

Adds an `Open in potree.org` button that allows to open COPC and Potree files on <https://potree.org> (via [Darren Wiens](https://mpc-copc-viewer.netlify.app) or [Iconem](https://3d.iconem.com/apps/load_potree_project_from_urlparam) apps)
The actions can be enabled by adding them to the [`linkActions.config.js`](../linkActions.config.js) file.
Open the file and you'll see a number of imports and exports.
Import the file for the action that you want to enable, e.g. for PMTiles / Protomaps:

```js
import Potree from './src/actions/assets/Potree.js';
export default { Potree };
import Protomaps from './src/actions/links/Protomaps.js';
```

### pmtiles.io
The path is fixed to `./src/actions/links/`, the file extension is always `.js`.
In-between add the file name from the list above.
The import name should be the file name without extension (i.e. `Protomaps` again).

Adds an `Open in pmtiles.io` button that allows to open Protomaps PMTiles files on <https://pmtiles.io>.
Lastly, add the import name to the list of exports, e.g.

```js
import Protomaps from './src/actions/assets/Protomaps.js';
export default { Protomaps };
export default {
OtherAction,
Protomaps
};
```

Save the file and rebuild / restart STAC Browser.

## Developer Guide

## Links
Implementing actions for assets and links follows a very similar pattern.
The main difference is that assets implement the [`AssetActionPlugin` interface](../src/actions/AssetActionPlugin.js) while links implement the [`LinkActionPlugin` interface](../src/actions/LinkActionPlugin.js).
Similarly, actions for assets are stored in the folder links are stored in the folder [`src/actions/assets`](../src/actions/assets) while links are stored in the folder [`src/actions/links`](../src/actions/links).

All actions for links are stored in the folder [`src/actions/links`](../src/actions/links).
They all implement the [`LinkActionPlugin` interface](../src/actions/LinkActionPlugin.js).
The actions can be enabled by adding them to the [`linkActions.config.js`](../linkActions.config.js) file.
The interfaces for both look as follows:

### Felt (Links)
- `constructor(data: object, component: Vue, id: string)`
- `data`: The asset or link object, it is available in the class throuh `this.asset` (for assets) and `this.link` (for links).
- `component`: The parent Asset/Link Vue component (available in the class through `this.component`)
- `id`: Internal ID of the asset or link, not meant to be used.
- `get btnOptions() : object`
- This should return an object of button options, see [VueBootstrap b-button](https://bootstrap-vue.org/docs/components/button/#component-reference) for details. Returns `href`, `rel` (only for links) and `target` (set to `_blank`) by default.
- `get onClick() : function(event: MouseEvent)`
- Returns a function that accepts a [MouseEvent](https://developer.mozilla.org/de/docs/Web/API/MouseEvent). This is the action to execute in case no `href` is set.
- `get uri() : string`
- Reurns the URL to use as `href` for the button/link. This should a valid URL that a browser can navigate to, including the asset or link URL as a query parameter or so.
- `get show() : boolean`
- Return `true` if the action should be shown for the given asset or link. Return `false` otherwise, default to `false`.
- `get text() : string`
- Returns the text that is displayed for the button, defaults to "Open". Should be using the [i18n methods](https://kazupon.github.io/vue-i18n/api/#methods) to localize the text.
- `get icon() : Vue`
- Returns a Vue component that should be the icon for the button. Defaults to `BIconBoxArrowUpRight`, see <https://bootstrap-vue.org/docs/icons#icons-1> and search for `arrow-up-right`.

Adds an `Open in Felt` button that allows to show XYZ tile services on <https://felt.com>.
The link to the XYZ has to follow the [web-map-links extension](https://github.com/stac-extensions/web-map-links/blob/v1.0.0/README.md#xyz).
Each action should at least implement custom behaviour for `uri`, `show` and `text`.

```js
import Felt from './src/actions/links/Felt.js';
export default { Felt };
```
It is recommended to inspect the existing actions to get an impression of what is possible and how it is implemented.

### pmtiles.io
Some notes:

Adds an `Open in pmtiles.io` button that allows to open Protomaps PMTiles files on <https://pmtiles.io>.
- It is recommended to use [urijs](https://www.npmjs.com/package/urijs) for URL manipulations, it comes packages with STAC Browser anyway.
- It can be helpful to use the Vue component that is available through `this.component`, for example:
- `this.component.href` is the absolute asset URL (while `this.asset.href` could be relative or absolute)
- `this.component.isBrowserProtocol` returns whether it's a http/https URL
- `this.asset.type` / `this.link.type` contains the media type of the asset/link

```js
import Protomaps from './src/actions/assets/Protomaps.js';
export default { Protomaps };
```

### OGC3dTiles

Adds an `Open in Geofox.ai` button that allows to open OGC 3D Tiles files on <https://viewer.geofox.ai> or Cesium Sandcastle.

```js
import OGC3dTiles from './src/actions/assets/OGC3dTiles.js';
export default { OGC3dTiles };
```
To enable a newly implemented action in STAC Browser, please follow the [User Guide](#user-guide).
18 changes: 18 additions & 0 deletions docs/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ The following ways to set config options are possible:
- [buildTileUrlTemplate](#buildtileurltemplate)
- [useTileLayerAsFallback](#usetilelayerasfallback)
- [displayGeoTiffByDefault](#displaygeotiffbydefault)
- [crs](#crs)
- [User Interface](#user-interface)
- [itemsPerPage](#itemsperpage)
- [maxItemsPerPage](#maxitemsperpage)
Expand Down Expand Up @@ -373,6 +374,23 @@ To clarify the behavior, please have a look at the following table:
If set to `true`, the map also shows non-cloud-optimized GeoTiff files by default. Otherwise (`false`, default), it only shows COGs and you can only enforce showing GeoTiffs to be loaded with the "Show on map" button but they are never loaded automatically.
Loading non-cloud-optimized GeoTiffs only works reliably for smaller files (< 1MB). It may also work for larger files, but it is depending a lot on the underlying client hardware and software.

### crs

An object of coordinate reference systems that the system needs to know.
The key is the code for the CRS, the value is the CRS definition as OGC WKT string (WKT2 is not supported).
`EPSG:3857` (Web Mercator) and `EPSG:4326` (WGS 84) don't need to be registered, they are included by default.

This is primarily useful for CRS that are used for the basemaps (see `basemaps.config.js`).
All CRS not listed here will be requested from an external service over HTTP, which is slower.

Example for EPSG:2056:

```js
{
'EPSG:2056': 'PROJCS["CH1903+ / LV95",GEOGCS["CH1903+",DATUM["CH1903+",SPHEROID["Bessel 1841",6377397.155,299.1528128,AUTHORITY["EPSG","7004"]],AUTHORITY["EPSG","6150"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4150"]],PROJECTION["Hotine_Oblique_Mercator_Azimuth_Center"],PARAMETER["latitude_of_center",46.9524055555556],PARAMETER["longitude_of_center",7.43958333333333],PARAMETER["azimuth",90],PARAMETER["rectified_grid_angle",90],PARAMETER["scale_factor",1],PARAMETER["false_easting",2600000],PARAMETER["false_northing",1200000],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AXIS["Easting",EAST],AXIS["Northing",NORTH],AUTHORITY["EPSG","2056"]]'
}
```

## User Interface

### itemsPerPage
Expand Down
Loading