feat(globe-fly-to): add fly to in story mode

src/scripts/actions/set-fly-to.ts

@@ -0,0 +1,15 @@
+import {GlobeView} from '../types/globe-view';
+
+export const SET_FLY_TO = 'SET_FLY_TO';
+
+export interface SetFlyToAction {
+  type: typeof SET_FLY_TO;
+  view: GlobeView;
+}
+
+const setFlyToAction = (view: GlobeView): SetFlyToAction => ({
+  type: SET_FLY_TO,
+  view
+});
+
+export default setFlyToAction;

src/scripts/components/globe/globe.tsx

@@ -1,6 +1,10 @@
 import React, {FunctionComponent, useRef, useEffect, useState} from 'react';
 
-import {getGlobeView, setGlobeView} from '../../libs/get-globe-view';
+import {
+  getGlobeView,
+  setGlobeView,
+  flyToGlobeView
+} from '../../libs/get-globe-view';
 
 import {GlobeView} from '../../types/globe-view';
 import {GlobeProjection} from '../../types/globe-projection';
@@ -41,6 +45,7 @@ interface Props {
   view: GlobeView;
   projection: GlobeProjection;
   imageUrl: string | null;
+  flyTo: GlobeView | null;
   onMouseEnter: () => void;
   onChange: (view: GlobeView) => void;
   onMoveEnd: (view: GlobeView) => void;
@@ -51,6 +56,7 @@ const Globe: FunctionComponent<Props> = ({
   projection,
   imageUrl,
   active,
+  flyTo,
   onMouseEnter,
   onChange,
   onMoveEnd
@@ -156,6 +162,14 @@ const Globe: FunctionComponent<Props> = ({
     }
   }, [viewer, imageUrl]);
 
+  // fly to location
+  useEffect(() => {
+    if (!viewer || !flyTo) {
+      return;
+    }
+    flyToGlobeView(viewer, flyTo);
+  }, [viewer, flyTo]);
+
   return (
     <div
       className={styles.globe}

src/scripts/components/globes/globes.tsx

@@ -14,6 +14,7 @@ import {projectionSelector} from '../../reducers/globe/projection';
 import setGlobeViewAction from '../../actions/set-globe-view';
 import Globe from '../globe/globe';
 import {getLayerTileUrl} from '../../libs/get-layer-tile-url';
+import {flyToSelector} from '../../reducers/fly-to';
 
 import {GlobeView} from '../../types/globe-view';
 
@@ -28,6 +29,7 @@ const Globes: FunctionComponent = () => {
   const [currentView, setCurrentView] = useState(globalGlobeView);
   const [isMainActive, setIsMainActive] = useState(true);
   const selectedLayers = useSelector(selectedLayersSelector);
+  const flyTo = useSelector(flyToSelector);
   const onChangeHandler = useCallback(
     (view: GlobeView) => setCurrentView(view),
     []
@@ -61,6 +63,7 @@ const Globes: FunctionComponent = () => {
         view={currentView}
         projection={projection}
         imageUrl={mainImageUrl}
+        flyTo={flyTo}
         onMouseEnter={() => setIsMainActive(true)}
         onChange={onChangeHandler}
         onMoveEnd={onMoveEndHandler}
@@ -72,6 +75,7 @@ const Globes: FunctionComponent = () => {
           view={currentView}
           projection={projection}
           imageUrl={compareImageUrl}
+          flyTo={flyTo}
           onMouseEnter={() => setIsMainActive(false)}
           onChange={onChangeHandler}
           onMoveEnd={onMoveEndHandler}

src/scripts/components/story/story.tsx

@@ -7,22 +7,29 @@ import StoryPagination from '../story-pagination/story-pagination';
 import fetchStory from '../../actions/fetch-story';
 import {storySelector} from '../../reducers/story';
 import {storiesSelector} from '../../reducers/stories';
+import setFlyToAction from '../../actions/set-fly-to';
 
 import styles from './story.styl';
 
 const Story: FunctionComponent = () => {
   const story = useSelector(storySelector);
+  const stories = useSelector(storiesSelector);
   const dispatch = useDispatch();
   const {storyId, page} = useParams();
   const pageNumber = parseInt(page || '0', 10);
   const slide = story && story.slides[pageNumber];
   const activeStoryId = story && story.id;
-  const stories = useSelector(storiesSelector);
   const storyListItem = stories.find(storyItem => storyItem.id === storyId);
 
   useEffect(() => {
     storyId && dispatch(fetchStory(storyId));
-  }, [storyId, dispatch]);
+  }, [dispatch, storyId]);
+
+  useEffect(() => {
+    if (slide && slide.flyTo) {
+      dispatch(setFlyToAction(slide.flyTo));
+    }
+  }, [dispatch, slide]);
 
   // redirect to first slide when current slide does not exist
   if (story && !slide) {

src/scripts/config/main.ts

@@ -11,8 +11,8 @@ const globeState: GlobeState = {
       longitude: 0.002816
     },
     orientation: {
-      heading: Math.PI * 2,
-      pitch: Math.PI / -2,
+      heading: 0,
+      pitch: -90,
       roll: 0
     }
   }

src/scripts/libs/get-globe-view.ts

@@ -1,39 +1,64 @@
 import 'cesium/Build/Cesium/Cesium';
 
+import {radToDeg, degToRad} from './math-helpers';
+
 import {GlobeView} from '../types/globe-view';
 
 const Cesium = window.Cesium;
 
-// set the camera according to the given globe view
+// set the camera according to the given globe view (lng, lat in radians)
 export function setGlobeView(viewer: Cesium.Viewer, view: GlobeView): void {
   const {position, orientation} = view;
   const cesiumView = {
-    destination: Cesium.Cartesian3.fromRadians(
+    destination: Cesium.Cartesian3.fromDegrees(
       position.longitude,
       position.latitude,
       position.height
     ),
-    orientation
+    orientation: {
+      heading: degToRad(orientation.heading),
+      pitch: degToRad(orientation.pitch),
+      roll: degToRad(orientation.roll)
+    }
   };
 
   viewer.scene.camera.setView(cesiumView);
 }
 
+// set the camera according to the given globe view (lng, lat in degrees)
+export function flyToGlobeView(viewer: Cesium.Viewer, view: GlobeView): void {
+  const {position, orientation} = view;
+  const cesiumView = {
+    destination: Cesium.Cartesian3.fromDegrees(
+      position.longitude,
+      position.latitude,
+      position.height
+    ),
+    orientation: {
+      heading: degToRad(orientation.heading),
+      pitch: degToRad(orientation.pitch),
+      roll: degToRad(orientation.roll)
+    }
+  };
+
+  viewer.scene.camera.flyTo(cesiumView);
+}
+
 // get the globe view from the current cesium camera
 export function getGlobeView(viewer: Cesium.Viewer): GlobeView {
   const camera = viewer.scene.camera;
   const position = camera.positionCartographic;
 
   return {
     position: {
-      longitude: position.longitude,
-      latitude: position.latitude,
+      longitude: radToDeg(position.longitude),
+      latitude: radToDeg(position.latitude),
       height: position.height
     },
     orientation: {
-      heading: camera.heading,
-      pitch: camera.pitch,
-      roll: camera.roll
+      heading: radToDeg(camera.heading),
+      pitch: radToDeg(camera.pitch),
+      roll: radToDeg(camera.roll)
     }
   };
 }

src/scripts/libs/globe-url-parameter.ts

@@ -41,10 +41,6 @@ export function parseUrl(): GlobeState | null {
     return null;
   }
 
-  // convert degree to radians
-  values[0] = values[0] * (Math.PI / 180);
-  values[1] = values[1] * (Math.PI / 180);
-
   return {
     view: {
       position: {
@@ -74,10 +70,6 @@ export function getParamString(globeState: GlobeState): string | null {
     return null;
   }
 
-  // convert radians to degree
-  values[0] = values[0] * (180 / Math.PI);
-  values[1] = values[1] * (180 / Math.PI);
-
   const compactValues = values.map(num => num.toFixed(2));
 
   return [projection[0], ...compactValues].join(char);

src/scripts/libs/math-helpers.ts

@@ -0,0 +1,7 @@
+export function radToDeg(rad: number): number {
+  return (rad * 180) / Math.PI;
+}
+
+export function degToRad(deg: number): number {
+  return (deg * Math.PI) / 180;
+}

src/scripts/reducers/fly-to.ts

@@ -0,0 +1,24 @@
+import {SET_FLY_TO, SetFlyToAction} from '../actions/set-fly-to';
+
+import {State} from './index';
+import {GlobeView} from '../types/globe-view';
+
+const initialState = null;
+
+function flyToReducer(
+  state: GlobeView | null = initialState,
+  action: SetFlyToAction
+): GlobeView | null {
+  switch (action.type) {
+    case SET_FLY_TO:
+      return action.view;
+    default:
+      return state;
+  }
+}
+
+export function flyToSelector(state: State): GlobeView | null {
+  return state.flyTo;
+}
+
+export default flyToReducer;

src/scripts/reducers/index.ts

@@ -5,13 +5,15 @@ import layersReducer from './layers/index';
 import storiesReducer from './stories';
 import storyReducer from './story';
 import globeReducer from './globe';
+import flyToReducer from './fly-to';
 
 const rootReducer = combineReducers({
   language: languageReducer,
   layers: layersReducer,
   stories: storiesReducer,
   story: storyReducer,
-  globe: globeReducer
+  globe: globeReducer,
+  flyTo: flyToReducer
 });
 
 export default rootReducer;

src/scripts/types/story.d.ts

@@ -1,3 +1,5 @@
+import {GlobeView} from './globe-view';
+
 export interface Story {
   id: string;
   slides: Slide[];
@@ -8,4 +10,5 @@ export interface Slide {
   subtitle: string;
   bodytext: string;
   image: string;
+  flyTo: GlobeView;
 }

storage/stories/story1/story1-de.json

@@ -5,13 +5,37 @@
       "title": "Story slide 1",
       "subtitle": "Das ist story slide 1",
       "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste veniam laborum necessitatibus suscipit commodi? Officia ipsum blanditiis itaque, fugiat nostrum, reiciendis doloribus perferendis quisquam iure dolorem dolorum, deleniti cupiditate soluta?",
-      "image": "https://storage.cloud.google.com/esa-cfs-storage/stories/story1/assets/story1.jpeg"
+      "image": "https://storage.cloud.google.com/esa-cfs-storage/stories/story1/assets/story1.jpeg",
+      "flyTo": {
+        "position": {
+          "height": 1000000,
+          "latitude": 13.1,
+          "longitude": -86.4
+        },
+        "orientation": {
+          "heading": 0,
+          "pitch": -90,
+          "roll": 0
+        }
+      }
     },
     {
       "title": "Story slide 2",
       "subtitle": "Das ist story slide 2",
       "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
-      "image": "https://storage.cloud.google.com/esa-cfs-storage/stories/story1/assets/story1.jpeg"
+      "image": "https://storage.cloud.google.com/esa-cfs-storage/stories/story1/assets/story1.jpeg",
+      "flyTo": {
+        "position": {
+          "height": 10000000,
+          "latitude": 67.1,
+          "longitude": 96.4
+        },
+        "orientation": {
+          "heading": 0,
+          "pitch": -90,
+          "roll": 0
+        }
+      }
     },
     {
       "title": "Story slide 3",

storage/stories/story1/story1-en.json

@@ -5,13 +5,37 @@
       "title": "Story slide 1",
       "subtitle": "This is story slide 1",
       "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste veniam laborum necessitatibus suscipit commodi? Officia ipsum blanditiis itaque, fugiat nostrum, reiciendis doloribus perferendis quisquam iure dolorem dolorum, deleniti cupiditate soluta?",
-      "image": "https://storage.cloud.google.com/esa-cfs-storage/stories/story1/assets/story1.jpeg"
+      "image": "https://storage.cloud.google.com/esa-cfs-storage/stories/story1/assets/story1.jpeg",
+      "flyTo": {
+        "position": {
+          "height": 1000000,
+          "latitude": 13.1,
+          "longitude": -86.4
+        },
+        "orientation": {
+          "heading": 0,
+          "pitch": -90,
+          "roll": 0
+        }
+      }
     },
     {
       "title": "Story slide 2",
       "subtitle": "This is story slide 2",
       "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
-      "image": "https://storage.cloud.google.com/esa-cfs-storage/stories/story1/assets/story1.jpeg"
+      "image": "https://storage.cloud.google.com/esa-cfs-storage/stories/story1/assets/story1.jpeg",
+      "flyTo": {
+        "position": {
+          "height": 10000000,
+          "latitude": 67.1,
+          "longitude": 96.4
+        },
+        "orientation": {
+          "heading": 0,
+          "pitch": -90,
+          "roll": 0
+        }
+      }
     },
     {
       "title": "Story slide 3",