EO Browser setup step by step guide

Tim1 · June 27, 2022, 5:18pm

Can someone please provide a walkthough document on how to setup the react app, including website links of providers and their exact configurations. Thank you.

**REACT_APP_MAPTILER_KEY=
REACT_APP_MAPTILER_MAP_ID_BORDERS=
REACT_APP_MAPTILER_MAP_ID_ROADS=
REACT_APP_MAPBOX_KEY=
REACT_APP_CARTO_KEY=

REACT_APP_AUTH_BASEURL=
REACT_APP_CLIENTID=
REACT_APP_ROOT_URL=

anonymous maps from Sentinel Hub:

REACT_APP_ANONYMOUS_AUTH_CLIENT_ID=
REACT_APP_CAPTCHA_SITE_KEY=

used by location search functionality:

REACT_APP_GOOGLE_TOKEN=

REACT_APP_EOB_BACKEND=
REACT_APP_FIREBASE_API_KEY=**

z.cern · June 29, 2022, 10:50am

Hey,

You are correct that EO Browser’s readme doesn’t include the information about the variables in .env.example and how to get them. Sorry for the inconvenience, we will add the section in the future.

Base maps

The variables that contain word MAPTILER are needed for the base maps and overlays (borders, roads).

As the name suggests, we use MapTiler for those in EO Browser.

You need an account that you create at Street and satellite base mapsfor developers, geodata hosting, and geocoding via API | MapTiler Cloud.

Then you create an API key (saved as REACT_APP_MAPTILER_KEY) that is added to the requests to the maptiler server.

And finally, create the maps.

Maps REACT_APP_MAPTILER_MAP_ID_VOYAGER and REACT_APP_MAPTILER_MAP_ID_LIGHT are the standard maps with no changes (with “voyager” and “light” / “bright” in the names on MapTiler)

Maps for REACT_APP_MAPTILER_MAP_ID_BORDERS, REACT_APP_MAPTILER_MAP_ID_ROADS and REACT_APP_MAPTILER_MAP_ID_LABELS can be created by customizing any standard map and removing everything except “administrative” / “roads” / “placenames”.

REACT_APP_CARTO_KEY is not in use anymore.

When users are logged in, they get another option for a basemap - Google Maps. REACT_APP_GOOGLE_MAP_KEY is the API key for google maps.

Location search

For location search (top right), Google Places API (REACT_APP_GOOGLE_TOKEN) or Mapbox Search API (REACT_APP_MAPBOX_KEY) can be used.

By default, Google Places API is used. To use Mapbox, the code needs to be changed, so that the REACT_APP_MAPBOX_KEY is used instead of REACT_APP_GOOGLE_TOKEN (e.g. replacing googleAPI with process.env.REACT_APP_MAPBOX_KEY)

Authentication

Requests, that EO Browser makes to the Sentinel Hub to get the satellite data, need to authenticated.

When a user uses EO Browser without logging in, EO Browser uses anonymous authentication with the help of Google Recaptcha.

Documentation for this authentication method is here.

Variables needed for this method are REACT_APP_ANONYMOUS_AUTH_CLIENT_ID (client created in the Dashboard) and REACT_APP_CAPTCHA_SITE_KEY (created in the Google Recaptcha console).

When a user logs in to EO Browser, it uses another method with the help of ClientOAuth2 library, see src/Auth/authHelpers.js.

Variable needed for this method is REACT_APP_AUTH_BASEURL (client created in the Dashboard).

Clients for the two methods must not be the same. Both must be created with IMPLICIT grant type in the Dashboard.

They also must different for every deployment (e.g. separate clients for development, testing, staging, production deployments).

REACT_APP_AUTH_BASEURL is needed to direct the authentication requests to the correct endpoint and should have a value https://services.sentinel-hub.com/.

Deployments

REACT_APP_ROOT_URL is the URL at which the EO Browser is accessible and depends on the deployment (e.g. different URLs for development, testing, staging, production deployments).

It is needed so that the authentication tokens are created for the correct URL.

For example, https://apps.sentinel-hub.com/eo-browser is a base URL for our production deployment of EO Browser.

Pins

When a user is logged into EO Browser, pins are saved on the backend.

The backend URL is set with the REACT_APP_EOB_BACKEND.

If the user is not logged in, the pins are only saved in the local storage and are lost once the user closes EO Browser.

The backend is unfortunatelly not opensourced yet, so you can’t really deploy your own.

We will make it opensource at some point in the future.

I will have to ask if our backend could be used for this, if you would want that.

Currently, the app crashes if REACT_APP_EOB_BACKEND is not set, so the code for pins should be changed so that only local storage is used to avoid that.

Sharing

A user can share the shortened URL with the sharing functionality.

EO Browser uses Firebase Dynamic Links for this, and REACT_APP_FIREBASE_API_KEY is the API key for this.

Hope this helps.

Cheers

z.cern · June 29, 2022, 1:35pm

The settings for satellite data providers are a bit more complicated.

EO Browser displays satellite data collections in groups called themes.
There are 2 files (src/assets/default_themes.js, src/assets/education_themes.js) with the themes.
Each theme is an array of object that contain name, service, url for the instance (created in the dashboard), optional filter for the layers and an array of pins (that are displayed under the Highlights).
These themes are available for all users (logged in or not).
To provide the collections to users that are not logged in, you would need to create your own instances and layers in the dashboard for the Sentinel Hub collections. It’s quite a large number of them though, so it’s unfortunately not really practical. The collections from GIBS and Proba-V are not configurable because they are not maintained by Sentinel Hub but only consumed by EO Browser. They can only be filtered out in the files mentioned above or the datasource handlers (src/Tools/SearchPanel/dataSourceHandlers/ProbaVDataSourceHandler.js, src/Tools/SearchPanel/dataSourceHandlers/GibsDataSourceHandler.js)

EO Browser also automatically lists user instances as themes in the theme dropdown when the user is logged in.

z.cern · June 29, 2022, 2:04pm

In general, if you would like to create an app, it’s easier to start from scratch

or from the Playground’s code. Playground is simpler than EO Browser and thus has less code.

The general idea is to utilize the Sentinel Hub APIs for getting the data and to have a dedicated configuration with the collections that are available in the app.

Sentinel Hub APIs:

Processing API for getting images
Catalog API for getting metadata such as acquisition dates etc
Statistical API for statistics

A good location for the “configuration” - which collections (S2 L2A, S2 L1C, S1 GRD, …) and visualizations for them are available in the app - is in the app or a separate source and the best format is probably JSON.

You can also use the instances that you create in the Dashboard (mentioned in the previous reply), but you would need to have the ids / URLs listed and then request the data from the Sentinel Hub (documentation).

Tim1 · June 30, 2022, 4:24pm

Thank you. Commerical and Terrain Analysis have functionality in Leaflet or Playground?, or REACT_APP environment only?

z.cern · July 1, 2022, 8:22am

Commercial data part is only included in EO Browser. In the code, it’s in a folder src/Tools/CommercialDataPanel.

It’s also in Requests Builder (app, code). In the app under 3rd Party Data Import, in the code in a folder src/components/tpdi.

In both apps, it’s a GUI with the form, so that users can easily set the parameters that are needed to create an order and with a list for user’s quotas and existing orders that are retrieved from the backend.

The documentation for how to use commercial data / third party data import is here, and the API reference for it is here.

The terrain (3D) functionality is unfortunately only available in EO Browser for now.
The code that handles the 3D terrain viewer is in the folder src/TerainViewer.
The code for the actual 3D terrain viewer is in the folder public/eob3d - it’s a separate project that is imported to the EO Browser code, the styling of it is in this case tailored for EO Browser and can be a bit hard to change.

Tim1 · July 1, 2022, 7:52pm

Thank you, so it is EO Browser (REACT_APP) for all of sentinel-hub api data service and funtionality?.

z.cern · July 4, 2022, 3:40pm

Yes, that’s correct.

Tim1 · September 13, 2022, 1:36pm

Hello
Which selection(s) for default EOB React App, thanks

z.cern · September 17, 2022, 8:37pm

Hey,
I think this just serves as statistics for MapTiler (what their users use MapTiler services for) and what you select is not that important. In general, the usage in EO Browser falls under Use ready-made maps, Design custom maps and Utilize static maps API.

Tim1 · September 27, 2022, 2:27pm

Hello,
How are these maps configured in Maptiler account?, like this Customize - MapTiler Cloud?

Maps REACT_APP_MAPTILER_MAP_ID_VOYAGER and REACT_APP_MAPTILER_MAP_ID_LIGHT are the standard maps with no changes (with “voyager” and “light” / “bright” in the names on MapTiler)

Maps for REACT_APP_MAPTILER_MAP_ID_BORDERS, REACT_APP_MAPTILER_MAP_ID_ROADS and REACT_APP_MAPTILER_MAP_ID_LABELS can be created by customizing any standard map and removing everything except “administrative” / “roads” / “placenames”.

Tim1 · September 27, 2022, 7:43pm

Does one map id creation facilitate borders/roads/labels ?
which format type, Embeddable viewer/ vector style/ Raster tiles/ Web map tile/ Static map ?

Tim1 · October 13, 2022, 5:49am

Hello
What is the REACT_APP_CLIENTID"?
The base url is correct?

REACT_APP_AUTH_BASEURL=“https://services.sentinel-hub.com/”
REACT_APP_CLIENTID=

“Currently, the app crashes if REACT_APP_EOB_BACKEND is not set, so the code for pins should be changed so that only local storage is used to avoid that.” How to do configure that?

Thanks

mousumidey · October 14, 2022, 3:06pm

I am getting one error during implementation in EO browser. Error screenshot has been attached with this reply.