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.
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.
REACT_APP_MAPTILER_MAP_ID_LIGHT are the standard maps with no changes (with “voyager” and “light” / “bright” in the names on MapTiler)
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.
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
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
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
REACT_APP_AUTH_BASEURL is needed to direct the authentication requests to the correct endpoint and should have a value
REACT_APP_ROOT_URL is the URL at which the EO Browser is accessible and depends on the deployment (e.g. different URLs for
It is needed so that the authentication tokens are created for the correct URL.
https://apps.sentinel-hub.com/eo-browser is a base URL for our production deployment of EO Browser.
When a user is logged into EO Browser, pins are saved on the backend.
The backend URL is set with the
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.
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.