add 2 examples with evalscriptUrl to stories

sentinel-hub · Apr 8, 2020 · adfa70e · adfa70e
1 parent 265b5ed
commit adfa70e
Show file tree

Hide file tree

Showing 2 changed files with 135 additions and 0 deletions.
diff --git a/stories/s1grdiw.stories.js b/stories/s1grdiw.stories.js
@@ -254,6 +254,52 @@ export const getMapProcessingFromLayer = () => {
   return wrapperEl;
 };
 
+export const GetMapProcessingEvalscripturl = () => {
+  if (!process.env.CLIENT_ID || !process.env.CLIENT_SECRET) {
+    return "<div>Please set OAuth Client's id and secret for Processing API (CLIENT_ID, CLIENT_SECRET env vars)</div>";
+  }
+
+  const img = document.createElement('img');
+  img.width = '512';
+  img.height = '512';
+
+  const wrapperEl = document.createElement('div');
+  wrapperEl.innerHTML = '<h2>GetMap with Processing setting evalscriptUrl with v2 script</h2>';
+  wrapperEl.insertAdjacentElement('beforeend', img);
+
+  // getMap is async:
+  const perform = async () => {
+    await setAuthTokenWithOAuthCredentials();
+
+    const layer = new S1GRDAWSEULayer({
+      instanceId,
+      layerId,
+      evalscriptUrl:
+        'https://raw.githubusercontent.com/sentinel-hub/custom-scripts/cf4930ae0dd6d155f80ff311d6d862ca28de412b/sentinel-1/sar_for_deforestation/script.js',
+    });
+
+    const getMapParams = {
+      bbox: new BBox(
+        CRS_EPSG4326,
+        12.089080810546877,
+        44.625908121970454,
+        12.250614166259767,
+        44.74210015957899,
+      ),
+      fromTime: new Date(Date.UTC(2018, 8 - 1, 28, 0, 0, 0)),
+      toTime: new Date(Date.UTC(2018, 8 - 1, 28, 23, 59, 59)),
+      width: 512,
+      height: 512,
+      format: MimeTypes.JPEG,
+    };
+    const imageBlob = await layer.getMap(getMapParams, ApiType.PROCESSING);
+    img.src = URL.createObjectURL(imageBlob);
+  };
+  perform().then(() => {});
+
+  return wrapperEl;
+};
+
 export const findTilesEPSG3857 = () => {
   const layer = new S1GRDAWSEULayer({ instanceId, layerId });
 

diff --git a/stories/s2l2a.stories.js b/stories/s2l2a.stories.js
@@ -231,6 +231,95 @@ export const GetMapProcessingWithGeometryPolygon = () => {
   return wrapperEl;
 };
 
+export const GetMapProcessingEvalscripturl = () => {
+  if (!process.env.CLIENT_ID || !process.env.CLIENT_SECRET) {
+    return "<div>Please set OAuth Client's id and secret for Processing API (CLIENT_ID, CLIENT_SECRET env vars)</div>";
+  }
+
+  const img = document.createElement('img');
+  img.width = '512';
+  img.height = '512';
+
+  const wrapperEl = document.createElement('div');
+  wrapperEl.innerHTML = '<h2>GetMap with Processing for Sentinel-2 L2A by setting evalscriptUrl</h2>';
+  wrapperEl.insertAdjacentElement('beforeend', img);
+
+  // getMap is async:
+  const perform = async () => {
+    await setAuthTokenWithOAuthCredentials();
+
+    const layerS2L2A = new S2L2ALayer({
+      evalscriptUrl:
+        'https://raw.githubusercontent.com/sentinel-hub/custom-scripts/master/sentinel-2/ulyssys_water_quality_viewer/src/script.js',
+    });
+
+    const getMapParams = {
+      bbox: new BBox(
+        CRS_EPSG4326,
+        17.416763305664066,
+        46.6560347296143,
+        18.06289672851563,
+        47.102849101370325,
+      ),
+      fromTime: new Date(Date.UTC(2019, 9 - 1, 5, 0, 0, 0)),
+      toTime: new Date(Date.UTC(2019, 9 - 1, 5, 23, 59, 59)),
+      width: 512,
+      height: 512,
+      format: MimeTypes.JPEG,
+    };
+    const imageBlob = await layerS2L2A.getMap(getMapParams, ApiType.PROCESSING);
+    img.src = URL.createObjectURL(imageBlob);
+  };
+  perform().then(() => {});
+
+  return wrapperEl;
+};
+
+export const GetMapProcessingEvalscripturlVersion2 = () => {
+  if (!process.env.CLIENT_ID || !process.env.CLIENT_SECRET) {
+    return "<div>Please set OAuth Client's id and secret for Processing API (CLIENT_ID, CLIENT_SECRET env vars)</div>";
+  }
+
+  const img = document.createElement('img');
+  img.width = '512';
+  img.height = '512';
+
+  const wrapperEl = document.createElement('div');
+  wrapperEl.innerHTML =
+    '<h2>GetMap with Processing for Sentinel-2 L2A by setting evalscriptUrl with version2 script for ndwi</h2>';
+  wrapperEl.insertAdjacentElement('beforeend', img);
+
+  // getMap is async:
+  const perform = async () => {
+    await setAuthTokenWithOAuthCredentials();
+
+    const layerS2L2A = new S2L2ALayer({
+      evalscriptUrl:
+        'https://gist.githubusercontent.com/dgostencnik/49a8620816d47d75a2bb8433eea03984/raw/6a478bc7d6e898f2720385738fb38889424f4483/s2-ndwi-v2',
+    });
+
+    const getMapParams = {
+      bbox: new BBox(
+        CRS_EPSG4326,
+        17.416763305664066,
+        46.6560347296143,
+        18.06289672851563,
+        47.102849101370325,
+      ),
+      fromTime: new Date(Date.UTC(2019, 9 - 1, 5, 0, 0, 0)),
+      toTime: new Date(Date.UTC(2019, 9 - 1, 5, 23, 59, 59)),
+      width: 512,
+      height: 512,
+      format: MimeTypes.JPEG,
+    };
+    const imageBlob = await layerS2L2A.getMap(getMapParams, ApiType.PROCESSING);
+    img.src = URL.createObjectURL(imageBlob);
+  };
+  perform().then(() => {});
+
+  return wrapperEl;
+};
+
 export const GetMapWMSMaxCC20vs60 = () => {
   const layerS2L2A20 = new S2L2ALayer({ instanceId, layerId, maxCloudCoverPercent: 20 });
   const layerS2L2A60 = new S2L2ALayer({ instanceId, layerId, maxCloudCoverPercent: 60 });