feat(layer-data-set): add image provider for tiles and image (#236)

* feat(layer-data): add test layer data * feat(layer-data-set): add image provider for tiles and image * refactor(story): change image for test story * feat(dataset-names): add layers to layer selector (#237) * feat(dataset-names): add layers to layer selector * feat(layer-list): add overflow scroll
ubilabs · Dec 6, 2019 · ffc846f · ffc846f
1 parent 3a2d3fc
commit ffc846f
Show file tree

Hide file tree

Showing 11 changed files with 387 additions and 65 deletions.
diff --git a/src/scripts/components/globe/globe.tsx b/src/scripts/components/globe/globe.tsx
@@ -48,6 +48,7 @@ interface Props {
   active: boolean;
   layer: LayerListItem | null;
   isMain?: boolean;
+  layerType?: string;
   view: GlobeView;
   projection: GlobeProjection;
   imageUrl: string | null;
@@ -63,6 +64,7 @@ const Globe: FunctionComponent<Props> = ({
   imageUrl,
   active,
   layer,
+  layerType,
   isMain,
   flyTo,
   onMouseEnter,
@@ -180,9 +182,15 @@ const Globe: FunctionComponent<Props> = ({
     const url = imageUrl;
     const layers = viewer.scene.imageryLayers;
     const oldLayer = layers.length > 1 && layers.get(1);
-
     if (url) {
-      const imageProvider = new Cesium.SingleTileImageryProvider({url});
+      const imageProvider =
+        layerType === 'tiles'
+          ? window.Cesium.createTileMapServiceImageryProvider({
+              url
+            })
+          : new Cesium.SingleTileImageryProvider({url});
+      // @ts-ignore
+      window.imageryProvider = imageProvider;
       imageProvider.readyPromise.then(() => {
         viewer.scene.imageryLayers.addImageryProvider(imageProvider);
         // remove and destroy old layer if exists
@@ -194,7 +202,7 @@ const Globe: FunctionComponent<Props> = ({
       // remove old layer when no image should be shown anymore
       layers.remove(oldLayer, true);
     }
-  }, [viewer, imageUrl]);
+  }, [layerType, viewer, imageUrl]);
 
   // fly to location
   useEffect(() => {

diff --git a/src/scripts/components/globes/globes.tsx b/src/scripts/components/globes/globes.tsx
@@ -79,6 +79,7 @@ const Globes: FunctionComponent = () => {
         layer={main}
         active={isMainActive}
         isMain
+        layerType={mainLayerDetails?.type}
         view={currentView}
         projection={projection}
         imageUrl={mainImageUrl}
@@ -92,6 +93,7 @@ const Globes: FunctionComponent = () => {
         <Globe
           layer={compare}
           active={!isMainActive}
+          layerType={compareLayerDetails?.type}
           view={currentView}
           projection={projection}
           imageUrl={compareImageUrl}

diff --git a/src/scripts/components/layer-list/layer-list.styl b/src/scripts/components/layer-list/layer-list.styl
@@ -1,5 +1,6 @@
 .layerList
   flex-grow: 1
+  overflow: scroll
   margin: 0
   padding: 0
   height: calc(100vh - 80px)

diff --git a/src/scripts/config/main.ts b/src/scripts/config/main.ts
@@ -25,7 +25,9 @@ export default {
     layer:
       'https://storage.googleapis.com/esa-cfs-storage/layers/{id}/metadata.json',
     layerTiles:
-      'https://storage.googleapis.com/esa-cfs-tiles/test/{id}/{name}.jpg',
+      'https://storage.googleapis.com/esa-cfs-tiles/test/{id}/{timeIndex}',
+    layerSingleImage:
+      'https://storage.googleapis.com/esa-cfs-tiles/test/{id}/{timeIndex}.jpg',
     stories:
       'https://storage.googleapis.com/esa-cfs-storage/stories/stories-{lang}.json',
     story:

diff --git a/src/scripts/libs/get-layer-tile-url.ts b/src/scripts/libs/get-layer-tile-url.ts
@@ -15,32 +15,33 @@ export function getLayerTileUrl(
     return null;
   }
 
-  const layerTime = getLayerTime(time, layer.timestamps);
-  const date = new Date(layerTime);
-  const name = date
-    .toISOString()
-    .substr(0, 10)
-    .replace(/-/g, '');
-
-  return replaceUrlPlaceholders(config.api.layerTiles, {id: layer.id, name});
+  const timeIndex = getLayerTime(time, layer.timestamps).toString();
+  const imageBaseUrl =
+    layer.type === 'tiles'
+      ? config.api.layerTiles
+      : config.api.layerSingleImage;
+
+  return replaceUrlPlaceholders(imageBaseUrl, {
+    id: layer.id,
+    timeIndex
+  });
 }
 
 /**
  * Returns the best matching time of all layer timestamps
  * based on the current global time
  */
 function getLayerTime(sliderTime: number, timestamps: string[]): number {
-  const lastTimestamp = timestamps[timestamps.length - 1];
-  let time = Number(new Date(lastTimestamp));
+  let index = timestamps.length - 1;
 
   for (let i = timestamps.length - 1; i > 0; i--) {
     const layerTime = Number(new Date(timestamps[i]));
 
     if (sliderTime > layerTime) {
-      time = layerTime;
+      index = i;
       break;
     }
   }
 
-  return time;
+  return index;
 }
diff --git a/src/scripts/types/layer.d.ts b/src/scripts/types/layer.d.ts
@@ -1,5 +1,6 @@
 export interface Layer {
   id: string;
+  type: 'image' | 'tiles';
   timestamps: string[]; // ISO 8601 timestamps
   timeFormat: {
     year?: 'numeric' | '2-digit';

diff --git a/storage/layers/analysed_sst/metadata.json b/storage/layers/analysed_sst/metadata.json
@@ -0,0 +1,56 @@
+{
+  "id": "analysed_sst",
+  "type": "tiles",
+  "timeFormat": {
+    "year": "2-digit",
+    "month": "numeric",
+    "day": "numeric"
+  },
+  "timestamps": [
+    "2009-01-05T00:00:00Z",
+    "2009-01-13T00:00:00Z",
+    "2009-01-21T00:00:00Z",
+    "2009-01-29T00:00:00Z",
+    "2009-02-06T00:00:00Z",
+    "2009-02-14T00:00:00Z",
+    "2009-02-22T00:00:00Z",
+    "2009-03-02T00:00:00Z",
+    "2009-03-10T00:00:00Z",
+    "2009-03-18T00:00:00Z",
+    "2009-03-26T00:00:00Z",
+    "2009-04-03T00:00:00Z",
+    "2009-04-11T00:00:00Z",
+    "2009-04-19T00:00:00Z",
+    "2009-04-27T00:00:00Z",
+    "2009-05-05T00:00:00Z",
+    "2009-05-13T00:00:00Z",
+    "2009-05-21T00:00:00Z",
+    "2009-05-29T00:00:00Z",
+    "2009-06-06T00:00:00Z",
+    "2009-06-14T00:00:00Z",
+    "2009-06-22T00:00:00Z",
+    "2009-06-30T00:00:00Z",
+    "2009-07-08T00:00:00Z",
+    "2009-07-16T00:00:00Z",
+    "2009-07-24T00:00:00Z",
+    "2009-08-01T00:00:00Z",
+    "2009-08-09T00:00:00Z",
+    "2009-08-17T00:00:00Z",
+    "2009-08-25T00:00:00Z",
+    "2009-09-02T00:00:00Z",
+    "2009-09-10T00:00:00Z",
+    "2009-09-18T00:00:00Z",
+    "2009-09-26T00:00:00Z",
+    "2009-10-04T00:00:00Z",
+    "2009-10-12T00:00:00Z",
+    "2009-10-20T00:00:00Z",
+    "2009-10-28T00:00:00Z",
+    "2009-11-05T00:00:00Z",
+    "2009-11-13T00:00:00Z",
+    "2009-11-21T00:00:00Z",
+    "2009-11-29T00:00:00Z",
+    "2009-12-07T00:00:00Z",
+    "2009-12-15T00:00:00Z",
+    "2009-12-23T00:00:00Z"
+  ]
+}
diff --git a/storage/layers/layers-de.json b/storage/layers/layers-de.json
@@ -27,10 +27,157 @@
     "subLayers": []
   },
   {
-    "id": "layer3",
-    "name": "Layer 3",
+    "id": "analysed_sst",
+    "name": "Analysierte SST",
     "description": "Das ist der dritte Layer",
     "link": "http://...",
     "subLayers": []
+  },
+  {
+    "id": "aerosol",
+    "name": "Aerosol",
+    "description": "Das ist der Aerosol Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "ais",
+    "name": "Antarktische Eisdecke",
+    "description": "Das ist der Antarctic Ice Sheet Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "biomass",
+    "name": "Biomasse",
+    "description": "Das ist der dritte Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "fire",
+    "name": "Feuer",
+    "description": "Das ist der Fire Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "glaciers",
+    "name": "Gletscher",
+    "description": "Das ist der Glaciers Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "greenhouseGases",
+    "name": "Treibhausgase",
+    "description": " Das ist der Greenhouse Gases Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "gis",
+    "name": "Grönland Eisdecke",
+    "description": "Das ist der Greenland Ice Sheet Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "hrl",
+    "name": "HR Landabdeckung",
+    "description": "Das ist der Greenhouse Gases Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "lakes",
+    "name": "Seen",
+    "description": "Das ist der Lakes Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "landCover",
+    "name": "Landabdeckung",
+    "description": "Das ist der Land Cover Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "lst",
+    "name": "Temperatur der Landoberfläche",
+    "description": "Das ist der Land Surface Temperature Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "oceanColour",
+    "name": "Ozeanfarbe",
+    "description": "Das ist der Ocean Colour Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "ozone",
+    "name": "Ozon",
+    "description": "Das ist der Ozone Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "permafrost",
+    "name": "Permafrost",
+    "description": "Das ist der Permafrost Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "seaIce",
+    "name": "Meereis",
+    "description": "Das ist der Sea Ice Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "seaLevel",
+    "name": "Meeresspiegel",
+    "description": "Das ist der Sea Level Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "seaState",
+    "name": "Seegang",
+    "description": "Das ist der Sea State Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "seaSurfaceSalinity",
+    "name": "Salzgehalt der Meeresoberfläche",
+    "description": "Das ist der Sea Surface Salinity Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "snow",
+    "name": "Schnee",
+    "description": "Das ist der Snow Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "soilMoisture",
+    "name": "Bodenfeuchtigkeit",
+    "description": "Das ist der Soil Moisture Layer",
+    "link": "http://...",
+    "subLayers": []
+  },
+  {
+    "id": "waterVapour",
+    "name": "Wasserdampf",
+    "description": "Das ist der Water Vapour Layer",
+    "link": "http://...",
+    "subLayers": []
   }
 ]