feat(globe): add second globe (#133)

src/scripts/components/app/app.styl

@@ -6,6 +6,13 @@
   height: 100%
   font-family: Arial, Helvetica, sans-serif
 
+.globeContainer
+  position: absolute
+  display: flex
+  flex-direction: row
+  height: 100%
+  width: 100%
+
 .layoutContainer
   position: relative
   display: flex
@@ -19,4 +26,4 @@
   pointer-events: auto
 
 .timeslider
-  flex-grow: 1
+  flex-grow: 1

src/scripts/components/app/app.tsx

@@ -7,6 +7,7 @@ import {IntlProvider} from 'react-intl';
 
 import rootReducer from '../../reducers/index';
 import {localeSelector} from '../../reducers/locale';
+import {selectedLayersSelector} from '../../reducers/selected-layers';
 import LayerSelector from '../layer-selector/layer-selector';
 import Globe from '../globe/globe';
 import Menu from '../menu/menu';
@@ -28,11 +29,15 @@ const App: FunctionComponent<{}> = () => (
 
 const TranslatedApp: FunctionComponent<{}> = () => {
   const locale = useSelector(localeSelector);
+  const selectedLayers = useSelector(selectedLayersSelector);
 
   return (
     <IntlProvider locale={locale} messages={translations[locale]}>
       <div className={styles.app}>
-        <Globe />
+        <div className={styles.globeContainer}>
+          <Globe />
+          {selectedLayers.compare && <Globe />}
+        </div>
         <div className={styles.layoutContainer}>
           <Menu />
           <div className={styles.timeslider} />

src/scripts/components/globe/globe.styl

@@ -1,3 +1,4 @@
 .globe
   height: 100%
-  position: absolute
+  flex-grow: 1
+  flex-basis: 50%

src/scripts/components/globe/globe.tsx

@@ -1,6 +1,7 @@
 import React, {FunctionComponent, useRef, useEffect, useState} from 'react';
 import {useSelector} from 'react-redux';
 
+import {Projection} from '../../actions/set-projection';
 import {projectionSelector} from '../../reducers/projection';
 
 import 'cesium/Source/Widgets/widgets.css';
@@ -48,7 +49,11 @@ const Globe: FunctionComponent<{}> = () => {
       return;
     }
 
-    viewer.scene.mode = Cesium.SceneMode.SCENE3D;
+    if (projection === Projection.Sphere) {
+      viewer.scene.morphTo3D();
+    } else {
+      viewer.scene.morphTo2D();
+    }
   }, [viewer, projection]);
 
   return <div className={styles.globe} ref={ref} />;

src/scripts/components/layer-selector/layer-selector.tsx

@@ -3,7 +3,7 @@ import {useSelector, useDispatch} from 'react-redux';
 import {useIntl} from 'react-intl';
 
 import {layersSelector} from '../../reducers/layers';
-import {selectedLayerIdSelector} from '../../reducers/selected-layer-id';
+import {selectedLayersSelector} from '../../reducers/selected-layers';
 import fetchLayers from '../../actions/fetch-layers';
 import {setSelectedLayerIdAction} from '../../actions/set-selected-layer';
 import LayerList from '../layer-list/layer-list';
@@ -13,7 +13,7 @@ import styles from './layer-selector.styl';
 const LayerSelector: FunctionComponent<{}> = () => {
   const intl = useIntl();
   const layers = useSelector(layersSelector);
-  const layerIds = useSelector(selectedLayerIdSelector);
+  const layerIds = useSelector(selectedLayersSelector);
   const dispatch = useDispatch();
   const tabs = [
     {

src/scripts/reducers/index.ts

@@ -2,13 +2,13 @@ import {combineReducers} from 'redux';
 
 import localeReducer from './locale';
 import layersReducer from './layers';
-import selectedLayerReducer from './selected-layer-id';
+import selectedLayersReducer from './selected-layers';
 import projectionReducer from './projection';
 
 const rootReducer = combineReducers({
   locale: localeReducer,
   layers: layersReducer,
-  selectedLayer: selectedLayerReducer,
+  selectedLayers: selectedLayersReducer,
   projection: projectionReducer
 });
 

src/scripts/reducers/selected-layer-id.ts → src/scripts/reducers/selected-layers.ts

@@ -15,7 +15,7 @@ const initialState = {
   compare: null
 };
 
-function selectedLayerReducer(
+function selectedLayersReducer(
   state: SelectedLayersState = initialState,
   action: SetSelectedLayerIdAction
 ): SelectedLayersState {
@@ -29,7 +29,7 @@ function selectedLayerReducer(
       return state;
   }
 }
-export function selectedLayerIdSelector(state: State): SelectedLayersState {
-  return state.selectedLayer;
+export function selectedLayersSelector(state: State): SelectedLayersState {
+  return state.selectedLayers;
 }
-export default selectedLayerReducer;
+export default selectedLayersReducer;