Sentinel Hub Development Configuration

Apps / Services
1

Good day,

I am trying to install Sentinel Hub Playground downloaded from Git (Opensource). I need guidance to configure the datasets inside src/store/config.js. For example, in the below Landsat 8 entry, I am getting
REACT_APP_L8L1C_INSTANCE_ID from the configuration tool on the portal. Where should I go to get the REACT_APP_EVAL3_L8L1C_INSTANCE_ID for the urlProcessingApi entry?

Secondly, how do I configure the initial starting up map that is shown by default when opening Sentinel Hub Playground on the web browser? Thank you

{
url: https://services-uswest2.sentinel-hub.com/ogc/wms/${process.env.REACT_APP_L8L1C_INSTANCE_ID},
urlProcessingApi: https://services-uswest2.sentinel-hub.com/ogc/wms/${process.env.REACT_APP_EVAL3_L8L1C_INSTANCE_ID},
index: ‘https://services-uswest2.sentinel-hub.com/index/v3/collections/L8L1C/searchIndex’,
minDate: ‘2013-01-01’,
id: ‘L8’,
datasourceID: ‘L8L1C’,
name: ‘Landsat 8’,
min: 10,
typeNames: ‘DSS6’
}

2

In your case, the two instances can most likely be the same. The difference is that EVAL3 instances use version 3 evalscripts and request the data via Processing API.

Secondly, how do I configure the initial starting up map that is shown by default when opening Sentinel Hub Playground on the web browser

I’m not exactly sure what the issue is here. The first layer should be automatically selected.

3

Hi Jan,

Thank you, two problems I am getting now, I am now getting the following error when I search for a place on the top seach bar – (Go to Place):

image
image1450×938 103 KB

Secondly, the application shows the following error when I perform: npm start

image
image1450×935 96.4 KB

4

The second error most likely occurs because you probably don’t have the S2L2A instances set in .env, and that is the collection, which is selected by default.

Regarding the first error, it think it’s an issue with authentication. You can fix it by using http://localhost:3000/ instead of http://10.0.0.9:3000/.

5

Hi @jan.jezersek - Thank you - much appreciated. I have applied the suggested corrections and it seems we are improving.
I am now getting a ‘no dates found’ error and no map is shown. See the below screen:

image
image1423×725 117 KB

6

I noticed that the Playground version on Github was severely outdated (from october 2019). The latest version is now published. I urge you to download that one and try again.

May I ask, where did you obtain the Sentinel Hub client id from?

7

Great, I will give it a try this afteroon - thank you Jan.

The client-id: I created an OAuth client under User Settings on the dashboard, I copied the ID underneath the OAuth client and used that as client-id value.

8

Sadly I believe this is not the client id that is used in that case, the one you need should be generated manually by our backend team. Therefore, I assume it still won’t fully work after you upgrade to the latest version.

How are you planning to use the app? If it’s just for personal use, then you can replace the anonymous authentication with client id/client secret approach.

Specifically, generate the client id and client secret as you did before, and add them to .env.

REACT_APP_CLIENT_ID=
REACT_APP_CLIENT_SECRET=

And then replace the code in src/components/AuthWindow.js with:

import React from 'react';
import { requestAuthToken } from '@sentinel-hub/sentinelhub-js';


export default class AuthWindow extends React.Component {
  async componentDidMount() {
    const clientId = process.env.REACT_APP_CLIENT_ID;
    const clientSecret = process.env.REACT_APP_CLIENT_SECRET
    const authToken = await requestAuthToken(clientId, clientSecret);
    this.props.setToken(authToken)
  }

  render() {
    return null;
  }
}

However, I do believe the app should work even without this step.

9

Cool - thank you, let me work on this and will give you feedback. We are currently evaluating the capability of Sentinel Hub Playground with the idea of using it as a front-end to our ODC (Open Data Cube)'s OGC compliant datasets/products. This is to provide open access to our satellite data.

10

Great! I could not believe my eyes, is working. I have to apply the code changes to AuthWindow.js and it worked. See the below image:

image
image1453×943 515 KB

Thank you so much - how can we get the client-id created by the backend team so that I do not have to apply the above code changes? This is not for personal use, we are using this as part of a project for my employer - SANSA (SOuth African National Space Agency) and we have an Enterprise subscription with you.

2 Likes
11

I talked to the team and we realised there’s an addition problem, related to the fact that for authentication a recaptcha key has to be specified as well, and the verification is currently hardcoded and tied to our accounts.

Therefore, having your own client_id will work when running locally, but it won’t work if you will try to deploy it to some endpoint. Is that what you had planned? In that case, the mentioned issue will have to be fixed first.

12

Ok, I understand, our plan is to deploy to an endpoint - we are planning to containerize it and deploy into a Kubernetes cluster in a docker container.So, addressing the issue will definitely help us. Thank you

13

This issue is now fixed.

First thing you’ll have to do is to register your own recaptcha keys here: reCAPTCHA v3  |  Google Developers.

You will be given a recaptcha token, and a secret.

Replace the token in SentinelPlayground/tokenAssisted.html at 26d5b064e02d5ca01a29cd49769a5634a3cf8718 · sentinel-hub/SentinelPlayground · GitHub with your own.

Then, please write to info@sentinel-hub.com requesting a client_id, and send your recaptcha secret with it. The secret is required, so that the backend can verify the captcha.

After a token will be generated for you, set it here: SentinelPlayground/tokenAssisted.html at 26d5b064e02d5ca01a29cd49769a5634a3cf8718 · sentinel-hub/SentinelPlayground · GitHub.

14

Great! Thank you - I am working on this and will let you know how it goes. Thanks for the hard work