Add storybooks for requesting findTiles() in different CRSs

Author: sinergise-anze

stories/s1grdiw.eocloud.stories.js

@@ -1,6 +1,7 @@
 import {
   S1GRDEOCloudLayer,
   CRS_EPSG3857,
+  CRS_EPSG4326,
   BBox,
   MimeTypes,
   ApiType,
@@ -23,6 +24,7 @@ if (!process.env.EOC_S1GRDIW_LAYER_ID) {
 const instanceId = process.env.EOC_INSTANCE_ID;
 const layerId = process.env.EOC_S1GRDIW_LAYER_ID;
 const bbox = new BBox(CRS_EPSG3857, 1487158.82, 5322463.15, 1565430.34, 5400734.67);
+const bbox4326 = new BBox(CRS_EPSG4326, 13.359375, 43.0688878, 14.0625, 43.5803908);
 
 export default {
   title: 'Sentinel 1 GRD IW - EOCloud',
@@ -144,7 +146,7 @@ export const getMapWMSEvalscript = () => {
   return wrapperEl;
 };
 
-export const findTiles = () => {
+export const findTilesEPSG3857 = () => {
   const layer = new S1GRDEOCloudLayer(
     instanceId,
     layerId,
@@ -159,7 +161,7 @@ export const findTiles = () => {
   const containerEl = document.createElement('pre');
 
   const wrapperEl = document.createElement('div');
-  wrapperEl.innerHTML = "<h2>findTiles</h2>";
+  wrapperEl.innerHTML = "<h2>findTiles - BBox in EPSG:3857</h2>";
   wrapperEl.insertAdjacentElement("beforeend", containerEl);
 
   const perform = async () => {
@@ -178,6 +180,40 @@ export const findTiles = () => {
   return wrapperEl;
 };
 
+export const findTilesEPSG4326 = () => {
+  const layer = new S1GRDEOCloudLayer(
+    instanceId,
+    layerId,
+    null,
+    null,
+    null,
+    null,
+    AcquisitionMode.IW,
+    Polarization.DV,
+    OrbitDirection.ASCENDING,
+  );
+  const containerEl = document.createElement('pre');
+
+  const wrapperEl = document.createElement('div');
+  wrapperEl.innerHTML = "<h2>findTiles - BBox in EPSG:4326</h2>";
+  wrapperEl.insertAdjacentElement("beforeend", containerEl);
+
+  const perform = async () => {
+    const data = await layer.findTiles(
+      bbox4326,
+      new Date(Date.UTC(2020, 1 - 1, 1, 0, 0, 0)),
+      new Date(Date.UTC(2020, 1 - 1, 15, 23, 59, 59)),
+      5,
+      null,
+      OrbitDirection.ASCENDING,
+    );
+    renderTilesList(containerEl, data.tiles);
+  };
+  perform().then(() => {});
+
+  return wrapperEl;
+};
+
 function renderTilesList(containerEl, list) {
   list.forEach(tile => {
     const ul = document.createElement('ul');

stories/s1grdiw.stories.js

@@ -256,9 +256,35 @@ export const getMapProcessingFromLayer = () => {
   return wrapperEl;
 };
 
-export const findTiles = () => {
+export const findTilesEPSG3857 = () => {
   const layer = new S1GRDAWSEULayer(instanceId, layerId);
-  const bbox = new BBox(CRS_EPSG4326, 11.9, 12.34, 42.05, 42.19);
+  const bbox = new BBox(CRS_EPSG3857, 1487158.82, 5322463.15, 1565430.34, 5400734.67);
+  const bbox4326 = new BBox(CRS_EPSG4326, 13.359375, 43.0688878, 14.0625, 43.5803908);
+  const containerEl = document.createElement('pre');
+
+  const wrapperEl = document.createElement('div');
+  wrapperEl.innerHTML = "<h2>findTiles</h2>";
+  wrapperEl.insertAdjacentElement("beforeend", containerEl);
+
+  const perform = async () => {
+    await setAuthTokenWithOAuthCredentials();
+    const data = await layer.findTiles(
+      bbox,
+      new Date(Date.UTC(2020, 1 - 1, 1, 0, 0, 0)),
+      new Date(Date.UTC(2020, 1 - 1, 15, 23, 59, 59)),
+      5,
+      0,
+    );
+    renderTilesList(containerEl, data.tiles);
+  };
+  perform().then(() => {});
+
+  return wrapperEl;
+};
+
+export const findTilesEPSG4326 = () => {
+  const layer = new S1GRDAWSEULayer(instanceId, layerId);
+  const bbox = new BBox(CRS_EPSG4326, 13.359375, 43.0688878, 14.0625, 43.5803908);
   const containerEl = document.createElement('pre');
 
   const wrapperEl = document.createElement('div');