feat(gallery-layer-type): add basic viewer

data/gdal-colors/colors-ozone_profile.txt

@@ -0,0 +1,3 @@
+3.0 0 188 254 255
+0.0 0 0 0 255
+nv 0 0 0 0

data/layers-config.json

@@ -415,5 +415,13 @@
         "roll": 0
       }
     }
+  },
+  "ozone.ozone_profile": {
+    "colorMap": "custom",
+    "timeFormat": {
+      "year": "numeric",
+      "month": "long",
+      "day": "numeric"
+    }
   }
 }

src/scripts/components/main/gallery/gallery.styl

@@ -0,0 +1,19 @@
+@require '../../../../variables.styl'
+
+.gallery
+  position: relative
+  flex-grow: 1
+  flex-basis: 50%
+  width: 100%
+  height: 100%
+
+.galleryItem
+  box-sizing: border-box
+  padding: emCalc(100px)
+  width: 100%
+  height: 100%
+
+.galleryImage
+  width: 100%
+  height: 100%
+  object-fit: contain

src/scripts/components/main/gallery/gallery.tsx

@@ -0,0 +1,20 @@
+import React, {FunctionComponent} from 'react';
+
+import styles from './gallery.styl';
+import {GlobeImageLayerData} from '../../../types/globe-image-layer-data';
+
+interface Props {
+  imageLayer: GlobeImageLayerData | null;
+}
+
+const Gallery: FunctionComponent<Props> = ({imageLayer}) => {
+  return (
+    <div className={styles.gallery}>
+      <div className={styles.galleryItem}>
+        <img className={styles.galleryImage} src={imageLayer?.url} />
+      </div>
+    </div>
+  );
+};
+
+export default Gallery;

src/scripts/components/main/globes/globes.tsx

@@ -14,6 +14,7 @@ import {projectionSelector} from '../../../selectors/globe/projection';
 import {flyToSelector} from '../../../selectors/fly-to';
 import setGlobeViewAction from '../../../actions/set-globe-view';
 import Globe from '../globe/globe';
+import Gallery from '../gallery/gallery';
 import LayerLegend from '../../layers/layer-legend/layer-legend';
 import {getImageLayerData} from '../../../libs/get-image-layer-data';
 import {State} from '../../../reducers';
@@ -23,6 +24,7 @@ import {globeSpinningSelector} from '../../../selectors/globe/spinning';
 
 import {GlobeView} from '../../../types/globe-view';
 import {Marker} from '../../../types/marker-type';
+import {LayerType} from '../../../types/globe-layer-type';
 
 import styles from './globes.styl';
 import setGlobeSpinningAction from '../../../actions/set-globe-spinning';
@@ -104,22 +106,29 @@ const Globes: FunctionComponent<Props> = ({backgroundColor, markers = []}) => {
           isCompare={true}
         />
       )}
-      <Globe
-        markers={markers}
-        backgroundColor={backgroundColor}
-        active={isMainActive}
-        view={currentView}
-        projectionState={projectionState}
-        imageLayer={mainImageLayer}
-        basemap={mainLayerDetails?.basemap || null}
-        spinning={globeSpinning}
-        flyTo={flyTo}
-        onMouseEnter={() => setIsMainActive(true)}
-        onTouchStart={() => setIsMainActive(true)}
-        onChange={onChangeHandler}
-        onMoveEnd={onMoveEndHandler}
-        onMouseDown={onMouseDownHandler}
-      />
+
+      {mainLayerDetails?.type === LayerType.Gallery && (
+        <Gallery imageLayer={mainImageLayer} />
+      )}
+
+      {mainLayerDetails?.type !== LayerType.Gallery && (
+        <Globe
+          markers={markers}
+          backgroundColor={backgroundColor}
+          active={isMainActive}
+          view={currentView}
+          projectionState={projectionState}
+          imageLayer={mainImageLayer}
+          basemap={mainLayerDetails?.basemap || null}
+          spinning={globeSpinning}
+          flyTo={flyTo}
+          onMouseEnter={() => setIsMainActive(true)}
+          onTouchStart={() => setIsMainActive(true)}
+          onChange={onChangeHandler}
+          onMoveEnd={onMoveEndHandler}
+          onMouseDown={onMouseDownHandler}
+        />
+      )}
 
       {compareLayer && (
         <Globe