feat(story): set default view for globe (#198)

* feat(url): sync selected layers state to url

* feat(url): sync selected layers state to url

* feat(story): set default view for globe

* refactor(story): remove if condition

src/scripts/components/story/story.tsx

@@ -23,17 +23,30 @@ const Story: FunctionComponent = () => {
   const pageNumber = parseInt(page || '0', 10);
   const slide = story && story.slides[pageNumber];
   const storyListItem = stories.find(storyItem => storyItem.id === storyId);
+  const defaultView = {
+    position: {
+      height: 14484862,
+      latitude: 40.659017,
+      longitude: 0.002816
+    },
+    orientation: {
+      heading: 0,
+      pitch: -90,
+      roll: 0
+    }
+  };
 
   // fetch story of active storyId
   useEffect(() => {
     storyId && dispatch(fetchStory(storyId));
   }, [dispatch, storyId]);
 
-  // fly to position given in a slide
+  // fly to position given in a slide, if none given set to default
   useEffect(() => {
-    if (slide && slide.flyTo) {
-      dispatch(setFlyToAction(slide.flyTo));
+    if (slide) {
+      dispatch(setFlyToAction(slide.flyTo || defaultView));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dispatch, slide]);
 
   // redirect to first slide when current slide does not exist

src/scripts/selectors/layers/active.ts

@@ -0,0 +1,15 @@
+import {State} from '../../reducers/index';
+
+export function activeLayersSelector(
+  state: State,
+  props: {[key: string]: string} | null
+) {
+  const {mainLayerId, compareLayerId} = props || {};
+
+  return {
+    mainLayerDetails:
+      (mainLayerId && state.layers.details[mainLayerId]) || null,
+    compareLayerDetails:
+      (compareLayerId && state.layers.details[compareLayerId]) || null
+  };
+}