From 374f137c5083bc27f47641a8dc284df7a13de112 Mon Sep 17 00:00:00 2001
From: KatvonRivia <katvonrivia@gmail.com>
Date: Tue, 4 Aug 2020 15:40:45 +0200
Subject: [PATCH 1/9] feat(welcomeScreen): add story markers to globe

---
 assets/images/marker.svg                      | 27 ++++++
 src/scripts/actions/show-markers.ts           | 13 +++
 src/scripts/components/globe/globe.tsx        |  6 ++
 .../components/navigation/navigation.tsx      |  6 +-
 src/scripts/custom.d.ts                       |  5 +
 src/scripts/hooks/use-markers.ts              | 95 +++++++++++++++++++
 src/scripts/reducers/index.ts                 |  4 +-
 src/scripts/reducers/show-markers.ts          | 17 ++++
 src/scripts/selectors/show-markers.ts         |  5 +
 src/scripts/types/story-list.d.ts             |  1 +
 storage/stories/stories-de.json               | 41 ++++++--
 storage/stories/stories-en.json               | 41 ++++++--
 12 files changed, 239 insertions(+), 22 deletions(-)
 create mode 100644 assets/images/marker.svg
 create mode 100644 src/scripts/actions/show-markers.ts
 create mode 100644 src/scripts/hooks/use-markers.ts
 create mode 100644 src/scripts/reducers/show-markers.ts
 create mode 100644 src/scripts/selectors/show-markers.ts

diff --git a/assets/images/marker.svg b/assets/images/marker.svg
new file mode 100644
index 000000000..ec08015c4
--- /dev/null
+++ b/assets/images/marker.svg
@@ -0,0 +1,27 @@
+<svg width="38" height="49" viewBox="0 0 38 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_ddd)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.19895 25.8993C3.80148 23.5432 3 20.7977 3 17.8666C3 9.10372 10.1634 2 19 2C27.8366 2 35 9.10372 35 17.8666C35 20.7977 34.1985 23.5432 32.801 25.8993H32.8096C32.0437 27.0863 31.0706 29.0672 25.3139 33.7809C19.5571 38.4946 21.1684 45 18.9943 45H19.0057C16.8316 45 18.4429 38.4946 12.6861 33.7809C6.92938 29.0672 5.95634 27.0863 5.19041 25.8993H5.19895Z" fill="#00AE9D"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 24C22.3137 24 25 21.3137 25 18C25 14.6863 22.3137 12 19 12C15.6863 12 13 14.6863 13 18C13 21.3137 15.6863 24 19 24Z" fill="white"/>
+<defs>
+<filter id="filter0_ddd" x="0" y="0" width="38" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
+<feBlend mode="normal" in2="effect2_dropShadow" result="effect3_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/scripts/actions/show-markers.ts b/src/scripts/actions/show-markers.ts
new file mode 100644
index 000000000..4ff2dec4f
--- /dev/null
+++ b/src/scripts/actions/show-markers.ts
@@ -0,0 +1,13 @@
+export const SHOW_MARKERS = 'SHOW_MARKERS';
+
+export interface ShowMarkersAction {
+  type: typeof SHOW_MARKERS;
+  showMarkers: boolean;
+}
+
+const showMarkersAction = (showMarkers: boolean): ShowMarkersAction => ({
+  type: SHOW_MARKERS,
+  showMarkers
+});
+
+export default showMarkersAction;
diff --git a/src/scripts/components/globe/globe.tsx b/src/scripts/components/globe/globe.tsx
index f6191aff1..13702d593 100644
--- a/src/scripts/components/globe/globe.tsx
+++ b/src/scripts/components/globe/globe.tsx
@@ -1,4 +1,5 @@
 import React, {FunctionComponent, useRef, useEffect, useState} from 'react';
+import {useSelector} from 'react-redux';
 import 'cesium/Build/Cesium/Widgets/widgets.css';
 import {
   Viewer,
@@ -21,6 +22,8 @@ import {isElectron} from '../../libs/electron/index';
 import {GlobeView} from '../../types/globe-view';
 import {GlobeProjection} from '../../types/globe-projection';
 import config from '../../config/main';
+import {useMarkers} from '../../hooks/use-markers';
+import {storyListSelector} from '../../selectors/story/list';
 
 import {GlobeProjectionState} from '../../types/globe-projection-state';
 import {BasemapId} from '../../types/basemap';
@@ -86,6 +89,7 @@ const Globe: FunctionComponent<Props> = ({
 }) => {
   const [viewer, setViewer] = useState<Viewer | null>(null);
   const ref = useRef<HTMLDivElement>(null);
+  const stories = useSelector(storyListSelector);
 
   // make latest "active" value always accessible in camera change handler
   const isActiveRef = useRef<boolean>(active);
@@ -295,6 +299,8 @@ const Globe: FunctionComponent<Props> = ({
     flyToGlobeView(viewer, flyTo);
   }, [viewer, flyTo]);
 
+  useMarkers(viewer, stories);
+
   return (
     <div
       className={styles.globe}
diff --git a/src/scripts/components/navigation/navigation.tsx b/src/scripts/components/navigation/navigation.tsx
index cfdc3e72b..af3900acd 100644
--- a/src/scripts/components/navigation/navigation.tsx
+++ b/src/scripts/components/navigation/navigation.tsx
@@ -11,6 +11,7 @@ import Share from '../share/share';
 import {MenuIcon} from '../icons/menu-icon';
 
 import styles from './navigation.styl';
+import showMarkersAction from '../../actions/show-markers';
 
 const Navigation: FunctionComponent = () => {
   const [showMenu, setShowMenu] = useState(false);
@@ -27,7 +28,10 @@ const Navigation: FunctionComponent = () => {
       <Button
         className={styles.button}
         label="layers"
-        onClick={() => dispatch(showLayerSelectorAction(true))}
+        onClick={() => {
+          dispatch(showLayerSelectorAction(true));
+          dispatch(showMarkersAction(false));
+        }}
         icon={LayersIcon}
       />
       <Share />
diff --git a/src/scripts/custom.d.ts b/src/scripts/custom.d.ts
index 4c18f08d7..714e5d347 100644
--- a/src/scripts/custom.d.ts
+++ b/src/scripts/custom.d.ts
@@ -2,3 +2,8 @@ declare module '*.styl' {
   const content: any;
   export default content;
 }
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
diff --git a/src/scripts/hooks/use-markers.ts b/src/scripts/hooks/use-markers.ts
new file mode 100644
index 000000000..4a0e2246d
--- /dev/null
+++ b/src/scripts/hooks/use-markers.ts
@@ -0,0 +1,95 @@
+// import {useDispatch} from 'react-redux';
+import {useEffect} from 'react';
+import {useSelector, useDispatch} from 'react-redux';
+import {useHistory} from 'react-router-dom';
+import {
+  Viewer,
+  Color,
+  Cartesian2,
+  Cartesian3,
+  HorizontalOrigin,
+  VerticalOrigin,
+  LabelStyle,
+  ConstantProperty,
+  BillboardGraphics,
+  LabelGraphics,
+  Entity,
+  ScreenSpaceEventHandler,
+  defined,
+  ScreenSpaceEventType
+} from 'cesium';
+
+import markerIcon from '../../../assets/images/marker.svg';
+import {showMarkersSelector} from '../selectors/show-markers';
+import showMarkersAction from '../actions/show-markers';
+
+import {StoryList} from '../types/story-list';
+
+export const useMarkers = (viewer: Viewer | null, stories: StoryList) => {
+  const showMarkers = useSelector(showMarkersSelector);
+  const history = useHistory();
+  const dispatch = useDispatch();
+  // create marker for every story
+
+  useEffect(() => {
+    if (!viewer) {
+      return;
+    }
+
+    if (!showMarkers) {
+      viewer.entities.removeAll();
+      return;
+    }
+
+    const scene = viewer.scene;
+    const handler = new ScreenSpaceEventHandler(
+      scene.canvas as HTMLCanvasElement
+    );
+
+    handler.setInputAction(movement => {
+      const pickedObject = scene.pick(movement.position);
+      if (defined(pickedObject)) {
+        dispatch(showMarkersAction(false));
+        history.push(`/stories/${pickedObject.id._id}/0`);
+      }
+    }, ScreenSpaceEventType.LEFT_CLICK);
+
+    const markers =
+      showMarkers &&
+      stories.map(
+        story =>
+          new Entity({
+            id: `${story.id}`,
+            position: Cartesian3.fromDegrees(
+              story.position[0],
+              story.position[1]
+            ),
+            billboard: new BillboardGraphics({
+              image: new ConstantProperty(markerIcon),
+              width: new ConstantProperty(34),
+              height: new ConstantProperty(46)
+            }),
+            label: new LabelGraphics({
+              text: new ConstantProperty(`${story.title}`),
+              font: '14pt NotesEsa',
+              style: new ConstantProperty(LabelStyle.FILL),
+              showBackground: new ConstantProperty(true),
+              backgroundColor: new ConstantProperty(Color.DARKSLATEGRAY),
+              backgroundPadding: new ConstantProperty(new Cartesian2(10, 10)),
+              verticalOrigin: new ConstantProperty(VerticalOrigin.CENTER),
+              horizontalOrigin: new ConstantProperty(HorizontalOrigin.LEFT),
+              pixelOffset: new ConstantProperty(new Cartesian2(20, 0))
+            })
+          })
+      );
+
+    markers.forEach(marker => {
+      viewer.entities.add(marker);
+    });
+
+    // eslint-disable-next-line consistent-return
+    return () => handler.destroy();
+  }, [showMarkers, dispatch, history, stories, viewer]);
+
+  return;
+};
diff --git a/src/scripts/reducers/index.ts b/src/scripts/reducers/index.ts
index 1a3cb7847..bccc40be3 100644
--- a/src/scripts/reducers/index.ts
+++ b/src/scripts/reducers/index.ts
@@ -9,6 +9,7 @@ import storyLayerReducer from './story-layer';
 import showLayerSelectorReducer from './show-layer-selector';
 import offlineReducer from './offline/index';
 import downloadedDataReducer from './downloaded-data';
+import showMarkersReducer from './show-markers';
 
 const rootReducer = combineReducers({
   language: languageReducer,
@@ -19,7 +20,8 @@ const rootReducer = combineReducers({
   storyLayerId: storyLayerReducer,
   showLayerSelector: showLayerSelectorReducer,
   offline: offlineReducer,
-  downloadedData: downloadedDataReducer
+  downloadedData: downloadedDataReducer,
+  showMarkers: showMarkersReducer
 });
 
 export default rootReducer;
diff --git a/src/scripts/reducers/show-markers.ts b/src/scripts/reducers/show-markers.ts
new file mode 100644
index 000000000..67c8200e3
--- /dev/null
+++ b/src/scripts/reducers/show-markers.ts
@@ -0,0 +1,17 @@
+import {SHOW_MARKERS, ShowMarkersAction} from '../actions/show-markers';
+
+const initialState = true;
+
+function showMarkersReducer(
+  state: boolean = initialState,
+  action: ShowMarkersAction
+): boolean {
+  switch (action.type) {
+    case SHOW_MARKERS:
+      return action.showMarkers;
+    default:
+      return state;
+  }
+}
+
+export default showMarkersReducer;
diff --git a/src/scripts/selectors/show-markers.ts b/src/scripts/selectors/show-markers.ts
new file mode 100644
index 000000000..9add5388d
--- /dev/null
+++ b/src/scripts/selectors/show-markers.ts
@@ -0,0 +1,5 @@
+import {State} from '../reducers/index';
+
+export function showMarkersSelector(state: State): boolean {
+  return state.showMarkers;
+}
diff --git a/src/scripts/types/story-list.d.ts b/src/scripts/types/story-list.d.ts
index 58c9d23cc..cd52416d3 100644
--- a/src/scripts/types/story-list.d.ts
+++ b/src/scripts/types/story-list.d.ts
@@ -5,6 +5,7 @@ export interface StoryListItem {
   link: string;
   image: string;
   tags: string[];
+  position: number[];
 }
 
 export type StoryList = StoryListItem[];
diff --git a/storage/stories/stories-de.json b/storage/stories/stories-de.json
index fb0d8870f..859052671 100644
--- a/storage/stories/stories-de.json
+++ b/storage/stories/stories-de.json
@@ -4,21 +4,35 @@
     "title": "Die Wärmepumpe des Planeten",
     "description": "",
     "image": "assets/sst_large_18.jpg",
-    "tags": ["sea-surface-temperature", "ocean-colour", "sea-surface-salinity", "water-vapour", "clouds"]
+    "tags": [
+      "sea-surface-temperature",
+      "ocean-colour",
+      "sea-surface-salinity",
+      "water-vapour",
+      "clouds"
+    ],
+    "position": [42.43, -85.04]
   },
   {
     "id": "is-ozone-good-or-bad",
     "title": "Ist Ozon gut oder schlecht? ",
     "description": "",
     "image": "assets/ozone.jpg",
-    "tags": ["ozone", "aerosol"]
+    "tags": ["ozone", "aerosol"],
+    "position": [230.2734, 59.26588]
   },
   {
     "id": "breaking-the-ice",
     "title": "Das Eis bricht auf",
     "description": "",
     "image": "assets/seaice.jpg",
-    "tags": ["sea-ice", "sea-surface-temperature", "sea-surface-salinity", "permafrost"]
+    "tags": [
+      "sea-ice",
+      "sea-surface-temperature",
+      "sea-surface-salinity",
+      "permafrost"
+    ],
+    "position": [0, 0]
   },
   {
     "id": "story2",
@@ -33,7 +47,8 @@
       "water",
       "weather",
       "heating"
-    ]
+    ],
+    "position": [32.39851580247402, 188.61328125]
   },
   {
     "id": "story3",
@@ -50,36 +65,42 @@
       "planet",
       "wind",
       "heating"
-    ]
+    ],
+    "position": [138.33984375, 15.79225]
   },
   {
     "id": "story4",
     "title": "Geschichte 4",
     "description": "Das ist Geschichte 4",
-    "image": "assets/story4.jpeg"
+    "image": "assets/story4.jpeg",
+    "position": [-55.166493, 9.9060534]
   },
   {
     "id": "story5",
     "title": "Geschichte 5",
     "description": "Das ist Geschichte 5",
-    "image": "assets/story5.jpeg"
+    "image": "assets/story5.jpeg",
+    "position": [120.166493, 29.9060534]
   },
   {
     "id": "story6",
     "title": "Geschichte 6",
     "description": "Das ist Geschichte 6",
-    "image": "assets/story6.jpeg"
+    "image": "assets/story6.jpeg",
+    "position": [55.166493, 30.9060534]
   },
   {
     "id": "story7",
     "title": "Geschichte 7",
     "description": "Das ist Geschichte 7",
-    "image": "assets/story7.jpeg"
+    "image": "assets/story7.jpeg",
+    "position": [25.166493, 39.9060534]
   },
   {
     "id": "story8",
     "title": "Geschichte 8",
     "description": "Das ist Geschichte 8",
-    "image": "assets/story8.jpeg"
+    "image": "assets/story8.jpeg",
+    "position": [10.166493, 10.9060534]
   }
 ]
diff --git a/storage/stories/stories-en.json b/storage/stories/stories-en.json
index d51d6f3f3..493d9b510 100644
--- a/storage/stories/stories-en.json
+++ b/storage/stories/stories-en.json
@@ -4,21 +4,35 @@
     "title": "Planetary Heat Pumps",
     "description": "",
     "image": "assets/sst_large_18.jpg",
-    "tags": ["sea-surface-temperature", "ocean-colour", "sea-surface-salinity", "water-vapour", "clouds"]
+    "tags": [
+      "sea-surface-temperature",
+      "ocean-colour",
+      "sea-surface-salinity",
+      "water-vapour",
+      "clouds"
+    ],
+    "position": [42.43, -85.04]
   },
   {
     "id": "is-ozone-good-or-bad",
     "title": "Is Ozone Good or Bad?",
     "description": "",
     "image": "assets/ozone.jpg",
-    "tags": ["ozone", "aerosol"]
+    "tags": ["ozone", "aerosol"],
+    "position": [230.2734, 59.26588]
   },
   {
     "id": "breaking-the-ice",
     "title": "Breaking the Ice",
     "description": "",
     "image": "assets/seaice.jpg",
-    "tags": ["sea-ice", "sea-surface-temperature", "sea-surface-salinity", "permafrost"]
+    "tags": [
+      "sea-ice",
+      "sea-surface-temperature",
+      "sea-surface-salinity",
+      "permafrost"
+    ],
+    "position": [0, 0]
   },
   {
     "id": "story2",
@@ -33,7 +47,8 @@
       "water",
       "weather",
       "heating"
-    ]
+    ],
+    "position": [32.39851580247402, 188.61328125]
   },
   {
     "id": "story3",
@@ -50,36 +65,42 @@
       "planet",
       "wind",
       "heating"
-    ]
+    ],
+    "position": [138.33984375, 15.79225]
   },
   {
     "id": "story4",
     "title": "Story 4",
     "description": "This is story 4",
-    "image": "assets/story4.jpeg"
+    "image": "assets/story4.jpeg",
+    "position": [-55.166493, 9.9060534]
   },
   {
     "id": "story5",
     "title": "Story 5",
     "description": "This is story 5",
-    "image": "assets/story5.jpeg"
+    "image": "assets/story5.jpeg",
+    "position": [120.166493, 29.9060534]
   },
   {
     "id": "story6",
     "title": "Story 6",
     "description": "This is story 6",
-    "image": "assets/story6.jpeg"
+    "image": "assets/story6.jpeg",
+    "position": [55.166493, 30.9060534]
   },
   {
     "id": "story7",
     "title": "Story 7",
     "description": "This is story 7",
-    "image": "assets/story7.jpeg"
+    "image": "assets/story7.jpeg",
+    "position": [25.166493, 39.9060534]
   },
   {
     "id": "story8",
     "title": "Story 8",
     "description": "This is story 8",
-    "image": "assets/story8.jpeg"
+    "image": "assets/story8.jpeg",
+    "position": [10.166493, 10.9060534]
   }
 ]

From 124d71198be40bd57a439cd101f0c2ad9f8930f1 Mon Sep 17 00:00:00 2001
From: KatvonRivia <katvonrivia@gmail.com>
Date: Thu, 6 Aug 2020 13:16:25 +0200
Subject: [PATCH 2/9] feat(welcomeScreen): add custom billboard entities

---
 assets/images/marker.svg                      |  27 --
 src/scripts/components/app/app.styl           |   5 +
 .../layer-selector/layer-selector.tsx         |   2 +-
 .../components/navigation/navigation.tsx      |   4 +-
 src/scripts/hooks/use-markers.ts              | 237 ++++++++++++++----
 storage/stories/stories-de.json               |   4 +-
 storage/stories/stories-en.json               |   4 +-
 7 files changed, 203 insertions(+), 80 deletions(-)
 delete mode 100644 assets/images/marker.svg

diff --git a/assets/images/marker.svg b/assets/images/marker.svg
deleted file mode 100644
index ec08015c4..000000000
--- a/assets/images/marker.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<svg width="38" height="49" viewBox="0 0 38 49" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ddd)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.19895 25.8993C3.80148 23.5432 3 20.7977 3 17.8666C3 9.10372 10.1634 2 19 2C27.8366 2 35 9.10372 35 17.8666C35 20.7977 34.1985 23.5432 32.801 25.8993H32.8096C32.0437 27.0863 31.0706 29.0672 25.3139 33.7809C19.5571 38.4946 21.1684 45 18.9943 45H19.0057C16.8316 45 18.4429 38.4946 12.6861 33.7809C6.92938 29.0672 5.95634 27.0863 5.19041 25.8993H5.19895Z" fill="#00AE9D"/>
-</g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19 24C22.3137 24 25 21.3137 25 18C25 14.6863 22.3137 12 19 12C15.6863 12 13 14.6863 13 18C13 21.3137 15.6863 24 19 24Z" fill="white"/>
-<defs>
-<filter id="filter0_ddd" x="0" y="0" width="38" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="1"/>
-<feGaussianBlur stdDeviation="1.5"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="2"/>
-<feGaussianBlur stdDeviation="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
-<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset/>
-<feGaussianBlur stdDeviation="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"/>
-<feBlend mode="normal" in2="effect2_dropShadow" result="effect3_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow" result="shape"/>
-</filter>
-</defs>
-</svg>
diff --git a/src/scripts/components/app/app.styl b/src/scripts/components/app/app.styl
index 31cc834a9..f172b7824 100644
--- a/src/scripts/components/app/app.styl
+++ b/src/scripts/components/app/app.styl
@@ -5,6 +5,11 @@
   font-family: NotesEsa
   src: url('../../../../assets/fonts/NotesEsaReg.otf')
 
+@font-face
+  font-style: normal
+  font-family: NotesEsaBold
+  src: url('../../../../assets/fonts/NotesEsaBol.otf')
+
 :global(html), :global(body), :global(#app)
   overflow: hidden
   margin: 0
diff --git a/src/scripts/components/layer-selector/layer-selector.tsx b/src/scripts/components/layer-selector/layer-selector.tsx
index 73455a030..321551ae9 100644
--- a/src/scripts/components/layer-selector/layer-selector.tsx
+++ b/src/scripts/components/layer-selector/layer-selector.tsx
@@ -61,7 +61,7 @@ const LayerSelector: FunctionComponent = () => {
           className={styles.layerSelector}
           initial={{x: '100%'}}
           animate={{x: 0}}
-          transition={{type: 'spring', damping: 300, ease: 'easeOut'}}
+          transition={{type: 'Spring', damping: 300, ease: 'easeOut'}}
           exit={{x: '100%'}}>
           <div className={styles.content}>
             <div className={styles.header}>
diff --git a/src/scripts/components/navigation/navigation.tsx b/src/scripts/components/navigation/navigation.tsx
index af3900acd..535ccdf65 100644
--- a/src/scripts/components/navigation/navigation.tsx
+++ b/src/scripts/components/navigation/navigation.tsx
@@ -9,13 +9,13 @@ import {StoryIcon} from '../icons/story-icon';
 import showLayerSelectorAction from '../../actions/show-layer-selector';
 import Share from '../share/share';
 import {MenuIcon} from '../icons/menu-icon';
+import showMarkersAction from '../../actions/show-markers';
 
 import styles from './navigation.styl';
-import showMarkersAction from '../../actions/show-markers';
 
 const Navigation: FunctionComponent = () => {
-  const [showMenu, setShowMenu] = useState(false);
   const dispatch = useDispatch();
+  const [showMenu, setShowMenu] = useState(false);
 
   return (
     <div className={styles.navigation}>
diff --git a/src/scripts/hooks/use-markers.ts b/src/scripts/hooks/use-markers.ts
index 4a0e2246d..ff70cb9af 100644
--- a/src/scripts/hooks/use-markers.ts
+++ b/src/scripts/hooks/use-markers.ts
@@ -4,42 +4,35 @@ import {useSelector, useDispatch} from 'react-redux';
 import {useHistory} from 'react-router-dom';
 import {
   Viewer,
-  Color,
-  Cartesian2,
   Cartesian3,
-  HorizontalOrigin,
-  VerticalOrigin,
-  LabelStyle,
-  ConstantProperty,
   BillboardGraphics,
-  LabelGraphics,
   Entity,
   ScreenSpaceEventHandler,
   defined,
-  ScreenSpaceEventType
+  ScreenSpaceEventType,
+  ConstantProperty,
+  VerticalOrigin,
+  HorizontalOrigin,
+  Cartesian2
 } from 'cesium';
 
-import markerIcon from '../../../assets/images/marker.svg';
 import {showMarkersSelector} from '../selectors/show-markers';
 import showMarkersAction from '../actions/show-markers';
 
-import {StoryList} from '../types/story-list';
+import {StoryList, StoryListItem} from '../types/story-list';
 
 export const useMarkers = (viewer: Viewer | null, stories: StoryList) => {
   const showMarkers = useSelector(showMarkersSelector);
   const history = useHistory();
   const dispatch = useDispatch();
-  // create marker for every story
 
+  // create marker for every story
   useEffect(() => {
     if (!viewer) {
       return;
     }
 
-    if (!showMarkers) {
-      viewer.entities.removeAll();
-      return;
-    }
+    viewer.entities.removeAll();
 
     const scene = viewer.scene;
     const handler = new ScreenSpaceEventHandler(
@@ -54,38 +47,16 @@ export const useMarkers = (viewer: Viewer | null, stories: StoryList) => {
       }
     }, ScreenSpaceEventType.LEFT_CLICK);
 
-    const markers =
-      showMarkers &&
-      stories.map(
-        story =>
-          new Entity({
-            id: `${story.id}`,
-            position: Cartesian3.fromDegrees(
-              story.position[0],
-              story.position[1]
-            ),
-            billboard: new BillboardGraphics({
-              image: new ConstantProperty(markerIcon),
-              width: new ConstantProperty(34),
-              height: new ConstantProperty(46)
-            }),
-            label: new LabelGraphics({
-              text: new ConstantProperty(`${story.title}`),
-              font: '14pt NotesEsa',
-              style: new ConstantProperty(LabelStyle.FILL),
-              showBackground: new ConstantProperty(true),
-              backgroundColor: new ConstantProperty(Color.DARKSLATEGRAY),
-              backgroundPadding: new ConstantProperty(new Cartesian2(10, 10)),
-              verticalOrigin: new ConstantProperty(VerticalOrigin.CENTER),
-              horizontalOrigin: new ConstantProperty(HorizontalOrigin.LEFT),
-              pixelOffset: new ConstantProperty(new Cartesian2(20, 0))
-            })
-          })
-      );
+    const markers = showMarkers
+      ? stories.map(story => createMarker(story))
+      : [];
 
-    markers.forEach(marker => {
-      viewer.entities.add(marker);
-    });
+    Promise.all(markers)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .then((entities: Array<any>) => {
+        entities.forEach(entity => viewer.entities.add(entity));
+      })
+      .catch(error => console.error(error));
 
     // eslint-disable-next-line consistent-return
     return () => handler.destroy();
@@ -93,3 +64,177 @@ export const useMarkers = (viewer: Viewer | null, stories: StoryList) => {
 
   return;
 };
+
+function createMarker(story: StoryListItem) {
+  return new Promise(resolve => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 700;
+    canvas.height = 300;
+
+    const image = new Image();
+    image.src = `data:image/svg+xml;base64,${window.btoa(
+      getSvgString(unescape(encodeURIComponent(story.title)))
+    )}`;
+
+    image.onload = function() {
+      // @ts-ignore
+      canvas.getContext('2d').drawImage(image, 0, 0);
+
+      resolve(
+        new Entity({
+          id: `${story.id}`,
+          position: Cartesian3.fromDegrees(
+            story.position[0],
+            story.position[1]
+          ),
+          billboard: new BillboardGraphics({
+            image: new ConstantProperty(canvas),
+            verticalOrigin: new ConstantProperty(VerticalOrigin.TOP),
+            horizontalOrigin: new ConstantProperty(HorizontalOrigin.LEFT),
+            pixelOffset: new ConstantProperty(new Cartesian2(0, 0))
+          })
+        })
+      );
+    };
+  });
+}
+
+function getSvgString(storyTitle: string) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" height="200" width="700">
+  <foreignObject width="100%" height="100%">
+    <div
+      xmlns="http://www.w3.org/1999/xhtml"
+      style="width: 100%">
+      <div style="position: relative; display: flex; flex-direction: row;">
+        <svg
+          width="38"
+          height="49"
+          viewBox="0 0 38 49"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g filter="url(#filter0_ddd)">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M5.19895 25.8993C3.80148 23.5432 3 20.7977 3 17.8666C3 9.10372 10.1634 2 19 2C27.8366 2 35 9.10372 35 17.8666C35 20.7977 34.1985 23.5432 32.801 25.8993H32.8096C32.0437 27.0863 31.0706 29.0672 25.3139 33.7809C19.5571 38.4946 21.1684 45 18.9943 45H19.0057C16.8316 45 18.4429 38.4946 12.6861 33.7809C6.92938 29.0672 5.95634 27.0863 5.19041 25.8993H5.19895Z"
+              fill="#00AE9D"
+            />
+          </g>
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M19 24C22.3137 24 25 21.3137 25 18C25 14.6863 22.3137 12 19 12C15.6863 12 13 14.6863 13 18C13 21.3137 15.6863 24 19 24Z"
+            fill="white"
+          />
+          <defs>
+            <filter
+              id="filter0_ddd"
+              x="0"
+              y="0"
+              width="38"
+              height="49"
+              filterUnits="userSpaceOnUse"
+              color-interpolation-filters="sRGB"
+            >
+              <feFlood flood-opacity="0" result="BackgroundImageFix" />
+              <feColorMatrix
+                in="SourceAlpha"
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              />
+              <feOffset dy="1" />
+              <feGaussianBlur stdDeviation="1.5" />
+              <feColorMatrix
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+              />
+              <feBlend
+                mode="normal"
+                in2="BackgroundImageFix"
+                result="effect1_dropShadow"
+              />
+              <feColorMatrix
+                in="SourceAlpha"
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              />
+              <feOffset dy="2" />
+              <feGaussianBlur stdDeviation="1" />
+              <feColorMatrix
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
+              />
+              <feBlend
+                mode="normal"
+                in2="effect1_dropShadow"
+                result="effect2_dropShadow"
+              />
+              <feColorMatrix
+                in="SourceAlpha"
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              />
+              <feOffset />
+              <feGaussianBlur stdDeviation="1" />
+              <feColorMatrix
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"
+              />
+              <feBlend
+                mode="normal"
+                in2="effect2_dropShadow"
+                result="effect3_dropShadow"
+              />
+              <feBlend
+                mode="normal"
+                in="SourceGraphic"
+                in2="effect3_dropShadow"
+                result="shape"
+              />
+            </filter>
+          </defs>
+        </svg>
+
+        <div style="display: flex; margin-top: 7px;">
+            <svg
+            style="z-index: 1"
+            height="49"
+            viewBox="0 0 8 49"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            >
+            <g transform="matrix(1,0,0,1,-5.58325,-4)">
+              <path
+                d="M14,4L14,28L5.583,28C8.905,25.068 11,20.779 11,16C11,11.221 8.905,6.932 5.583,4L14,4Z"
+                style="fill: rgb(48, 64, 77);"
+              />
+            </g>
+            </svg>
+          <div
+            style="
+              box-sizing: border-box;
+              width: fit-content;
+              max-width: 500px;
+              height: 24px;
+              color: white;
+              padding: 6px 16px;
+              font-family: NotesEsa, Arial;
+              font-size: 11px;
+              text-transform: uppercase;
+              background-color: #30404d;
+              border-bottom-right-radius: 25px;
+              border-top-right-radius: 25px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);"
+          >
+            ${storyTitle}
+          </div>
+        </div>
+      </div>
+    </div>
+  </foreignObject>
+</svg>`;
+}
diff --git a/storage/stories/stories-de.json b/storage/stories/stories-de.json
index 859052671..995685059 100644
--- a/storage/stories/stories-de.json
+++ b/storage/stories/stories-de.json
@@ -11,7 +11,7 @@
       "water-vapour",
       "clouds"
     ],
-    "position": [42.43, -85.04]
+    "position": [6.3281, -40.446947]
   },
   {
     "id": "is-ozone-good-or-bad",
@@ -32,7 +32,7 @@
       "sea-surface-salinity",
       "permafrost"
     ],
-    "position": [0, 0]
+    "position": [10.56, 20.76]
   },
   {
     "id": "story2",
diff --git a/storage/stories/stories-en.json b/storage/stories/stories-en.json
index 493d9b510..53c70e395 100644
--- a/storage/stories/stories-en.json
+++ b/storage/stories/stories-en.json
@@ -11,7 +11,7 @@
       "water-vapour",
       "clouds"
     ],
-    "position": [42.43, -85.04]
+    "position": [6.3281, -40.446947]
   },
   {
     "id": "is-ozone-good-or-bad",
@@ -32,7 +32,7 @@
       "sea-surface-salinity",
       "permafrost"
     ],
-    "position": [0, 0]
+    "position": [10.56, 20.76]
   },
   {
     "id": "story2",

From b3571baa4668c9f6bc7fe0300b4ad20d58d5c8c1 Mon Sep 17 00:00:00 2001
From: KatvonRivia <katvonrivia@gmail.com>
Date: Thu, 6 Aug 2020 13:23:39 +0200
Subject: [PATCH 3/9] feat(welcomeScreen): remove comment

---
 src/scripts/hooks/use-markers.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/scripts/hooks/use-markers.ts b/src/scripts/hooks/use-markers.ts
index ff70cb9af..c10926329 100644
--- a/src/scripts/hooks/use-markers.ts
+++ b/src/scripts/hooks/use-markers.ts
@@ -1,4 +1,3 @@
-// import {useDispatch} from 'react-redux';
 import {useEffect} from 'react';
 import {useSelector, useDispatch} from 'react-redux';
 import {useHistory} from 'react-router-dom';

From 203e3fe2a8cee750d214c6c0cd618e8e6c2464ac Mon Sep 17 00:00:00 2001
From: KatvonRivia <katvonrivia@gmail.com>
Date: Thu, 6 Aug 2020 14:12:31 +0200
Subject: [PATCH 4/9] fix(layer-selector): change animation type back to lower
 case

---
 src/scripts/components/layer-selector/layer-selector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scripts/components/layer-selector/layer-selector.tsx b/src/scripts/components/layer-selector/layer-selector.tsx
index 321551ae9..73455a030 100644
--- a/src/scripts/components/layer-selector/layer-selector.tsx
+++ b/src/scripts/components/layer-selector/layer-selector.tsx
@@ -61,7 +61,7 @@ const LayerSelector: FunctionComponent = () => {
           className={styles.layerSelector}
           initial={{x: '100%'}}
           animate={{x: 0}}
-          transition={{type: 'Spring', damping: 300, ease: 'easeOut'}}
+          transition={{type: 'spring', damping: 300, ease: 'easeOut'}}
           exit={{x: '100%'}}>
           <div className={styles.content}>
             <div className={styles.header}>

From 52041a0104abbfec247c7816e8ed3e002219da1e Mon Sep 17 00:00:00 2001
From: KatvonRivia <katvonrivia@gmail.com>
Date: Mon, 10 Aug 2020 16:10:40 +0200
Subject: [PATCH 5/9] feat(fonts): add NotesEsa font to markers

---
 src/scripts/custom.d.ts            |   5 +
 src/scripts/hooks/use-markers.ts   | 188 +------------------------
 src/scripts/libs/create-markers.ts | 214 +++++++++++++++++++++++++++++
 3 files changed, 223 insertions(+), 184 deletions(-)
 create mode 100644 src/scripts/libs/create-markers.ts

diff --git a/src/scripts/custom.d.ts b/src/scripts/custom.d.ts
index 714e5d347..08dfe991a 100644
--- a/src/scripts/custom.d.ts
+++ b/src/scripts/custom.d.ts
@@ -7,3 +7,8 @@ declare module '*.svg' {
   const content: string;
   export default content;
 }
+
+declare module '*.otf' {
+  const content: string;
+  export default content;
+}
diff --git a/src/scripts/hooks/use-markers.ts b/src/scripts/hooks/use-markers.ts
index c10926329..165a2bcaf 100644
--- a/src/scripts/hooks/use-markers.ts
+++ b/src/scripts/hooks/use-markers.ts
@@ -3,29 +3,23 @@ import {useSelector, useDispatch} from 'react-redux';
 import {useHistory} from 'react-router-dom';
 import {
   Viewer,
-  Cartesian3,
-  BillboardGraphics,
-  Entity,
   ScreenSpaceEventHandler,
   defined,
-  ScreenSpaceEventType,
-  ConstantProperty,
-  VerticalOrigin,
-  HorizontalOrigin,
-  Cartesian2
+  ScreenSpaceEventType
 } from 'cesium';
 
+import {createMarker} from '../libs/create-markers';
 import {showMarkersSelector} from '../selectors/show-markers';
 import showMarkersAction from '../actions/show-markers';
 
-import {StoryList, StoryListItem} from '../types/story-list';
+import {StoryList} from '../types/story-list';
 
 export const useMarkers = (viewer: Viewer | null, stories: StoryList) => {
   const showMarkers = useSelector(showMarkersSelector);
   const history = useHistory();
   const dispatch = useDispatch();
 
-  // create marker for every story
+  // create marker for each story
   useEffect(() => {
     if (!viewer) {
       return;
@@ -63,177 +57,3 @@ export const useMarkers = (viewer: Viewer | null, stories: StoryList) => {
 
   return;
 };
-
-function createMarker(story: StoryListItem) {
-  return new Promise(resolve => {
-    const canvas = document.createElement('canvas');
-    canvas.width = 700;
-    canvas.height = 300;
-
-    const image = new Image();
-    image.src = `data:image/svg+xml;base64,${window.btoa(
-      getSvgString(unescape(encodeURIComponent(story.title)))
-    )}`;
-
-    image.onload = function() {
-      // @ts-ignore
-      canvas.getContext('2d').drawImage(image, 0, 0);
-
-      resolve(
-        new Entity({
-          id: `${story.id}`,
-          position: Cartesian3.fromDegrees(
-            story.position[0],
-            story.position[1]
-          ),
-          billboard: new BillboardGraphics({
-            image: new ConstantProperty(canvas),
-            verticalOrigin: new ConstantProperty(VerticalOrigin.TOP),
-            horizontalOrigin: new ConstantProperty(HorizontalOrigin.LEFT),
-            pixelOffset: new ConstantProperty(new Cartesian2(0, 0))
-          })
-        })
-      );
-    };
-  });
-}
-
-function getSvgString(storyTitle: string) {
-  return `<svg xmlns="http://www.w3.org/2000/svg" height="200" width="700">
-  <foreignObject width="100%" height="100%">
-    <div
-      xmlns="http://www.w3.org/1999/xhtml"
-      style="width: 100%">
-      <div style="position: relative; display: flex; flex-direction: row;">
-        <svg
-          width="38"
-          height="49"
-          viewBox="0 0 38 49"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g filter="url(#filter0_ddd)">
-            <path
-              fill-rule="evenodd"
-              clip-rule="evenodd"
-              d="M5.19895 25.8993C3.80148 23.5432 3 20.7977 3 17.8666C3 9.10372 10.1634 2 19 2C27.8366 2 35 9.10372 35 17.8666C35 20.7977 34.1985 23.5432 32.801 25.8993H32.8096C32.0437 27.0863 31.0706 29.0672 25.3139 33.7809C19.5571 38.4946 21.1684 45 18.9943 45H19.0057C16.8316 45 18.4429 38.4946 12.6861 33.7809C6.92938 29.0672 5.95634 27.0863 5.19041 25.8993H5.19895Z"
-              fill="#00AE9D"
-            />
-          </g>
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M19 24C22.3137 24 25 21.3137 25 18C25 14.6863 22.3137 12 19 12C15.6863 12 13 14.6863 13 18C13 21.3137 15.6863 24 19 24Z"
-            fill="white"
-          />
-          <defs>
-            <filter
-              id="filter0_ddd"
-              x="0"
-              y="0"
-              width="38"
-              height="49"
-              filterUnits="userSpaceOnUse"
-              color-interpolation-filters="sRGB"
-            >
-              <feFlood flood-opacity="0" result="BackgroundImageFix" />
-              <feColorMatrix
-                in="SourceAlpha"
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-              />
-              <feOffset dy="1" />
-              <feGaussianBlur stdDeviation="1.5" />
-              <feColorMatrix
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
-              />
-              <feBlend
-                mode="normal"
-                in2="BackgroundImageFix"
-                result="effect1_dropShadow"
-              />
-              <feColorMatrix
-                in="SourceAlpha"
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-              />
-              <feOffset dy="2" />
-              <feGaussianBlur stdDeviation="1" />
-              <feColorMatrix
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
-              />
-              <feBlend
-                mode="normal"
-                in2="effect1_dropShadow"
-                result="effect2_dropShadow"
-              />
-              <feColorMatrix
-                in="SourceAlpha"
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-              />
-              <feOffset />
-              <feGaussianBlur stdDeviation="1" />
-              <feColorMatrix
-                type="matrix"
-                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"
-              />
-              <feBlend
-                mode="normal"
-                in2="effect2_dropShadow"
-                result="effect3_dropShadow"
-              />
-              <feBlend
-                mode="normal"
-                in="SourceGraphic"
-                in2="effect3_dropShadow"
-                result="shape"
-              />
-            </filter>
-          </defs>
-        </svg>
-
-        <div style="display: flex; margin-top: 7px;">
-            <svg
-            style="z-index: 1"
-            height="49"
-            viewBox="0 0 8 49"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            >
-            <g transform="matrix(1,0,0,1,-5.58325,-4)">
-              <path
-                d="M14,4L14,28L5.583,28C8.905,25.068 11,20.779 11,16C11,11.221 8.905,6.932 5.583,4L14,4Z"
-                style="fill: rgb(48, 64, 77);"
-              />
-            </g>
-            </svg>
-          <div
-            style="
-              box-sizing: border-box;
-              width: fit-content;
-              max-width: 500px;
-              height: 24px;
-              color: white;
-              padding: 6px 16px;
-              font-family: NotesEsa, Arial;
-              font-size: 11px;
-              text-transform: uppercase;
-              background-color: #30404d;
-              border-bottom-right-radius: 25px;
-              border-top-right-radius: 25px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);"
-          >
-            ${storyTitle}
-          </div>
-        </div>
-      </div>
-    </div>
-  </foreignObject>
-</svg>`;
-}
diff --git a/src/scripts/libs/create-markers.ts b/src/scripts/libs/create-markers.ts
new file mode 100644
index 000000000..4f0810cd0
--- /dev/null
+++ b/src/scripts/libs/create-markers.ts
@@ -0,0 +1,214 @@
+import {
+  Cartesian3,
+  BillboardGraphics,
+  Entity,
+  ConstantProperty,
+  VerticalOrigin,
+  HorizontalOrigin,
+  Cartesian2
+} from 'cesium';
+
+import NotesEsaBold from '../../../assets/fonts/NotesEsaBol.otf';
+
+import {StoryListItem} from '../types/story-list';
+
+export async function createMarker(story: StoryListItem) {
+  const canvas = document.createElement('canvas');
+  canvas.width = 700;
+  canvas.height = 300;
+
+  const image = new Image();
+  image.src = `data:image/svg+xml;base64,${window.btoa(
+    await getSvgString(unescape(encodeURIComponent(story.title)))
+  )}`;
+
+  return new Promise(resolve => {
+    image.onload = function() {
+      // @ts-ignore
+      canvas.getContext('2d').drawImage(image, 0, 0);
+
+      resolve(
+        new Entity({
+          id: `${story.id}`,
+          position: Cartesian3.fromDegrees(
+            story.position[0],
+            story.position[1]
+          ),
+          billboard: new BillboardGraphics({
+            image: new ConstantProperty(canvas),
+            verticalOrigin: new ConstantProperty(VerticalOrigin.TOP),
+            horizontalOrigin: new ConstantProperty(HorizontalOrigin.LEFT),
+            pixelOffset: new ConstantProperty(new Cartesian2(0, 0))
+          })
+        })
+      );
+    };
+  });
+}
+let fontPromise: Promise<string> | null = null;
+
+async function loadFont() {
+  if (fontPromise) {
+    return fontPromise;
+  }
+  const response = await fetch(NotesEsaBold);
+  const blob = await response.blob();
+  const reader = new FileReader();
+
+  fontPromise = new Promise(resolve => {
+    reader.onload = () => {
+      resolve(reader.result as string);
+    };
+    reader.readAsDataURL(blob);
+  });
+  return fontPromise;
+}
+
+async function getSvgString(storyTitle: string) {
+  const base64font = await loadFont();
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" height="200" width="700">
+  <style>
+  @font-face {
+    font-style: normal;
+    font-family: NotesEsa;
+    src: url(${base64font});
+  }
+  </style>
+  <foreignObject width="100%" height="100%">
+    <div
+      xmlns="http://www.w3.org/1999/xhtml">
+      <div style="position: relative; display: flex; flex-direction: row;">
+        <svg
+          width="38"
+          height="49"
+          viewBox="0 0 38 49"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g filter="url(#filter0_ddd)">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M5.19895 25.8993C3.80148 23.5432 3 20.7977 3 17.8666C3 9.10372 10.1634 2 19 2C27.8366 2 35 9.10372 35 17.8666C35 20.7977 34.1985 23.5432 32.801 25.8993H32.8096C32.0437 27.0863 31.0706 29.0672 25.3139 33.7809C19.5571 38.4946 21.1684 45 18.9943 45H19.0057C16.8316 45 18.4429 38.4946 12.6861 33.7809C6.92938 29.0672 5.95634 27.0863 5.19041 25.8993H5.19895Z"
+              fill="#00AE9D"
+            />
+          </g>
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M19 24C22.3137 24 25 21.3137 25 18C25 14.6863 22.3137 12 19 12C15.6863 12 13 14.6863 13 18C13 21.3137 15.6863 24 19 24Z"
+            fill="white"
+          />
+          <defs>
+            <filter
+              id="filter0_ddd"
+              x="0"
+              y="0"
+              width="38"
+              height="49"
+              filterUnits="userSpaceOnUse"
+              color-interpolation-filters="sRGB"
+            >
+              <feFlood flood-opacity="0" result="BackgroundImageFix" />
+              <feColorMatrix
+                in="SourceAlpha"
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              />
+              <feOffset dy="1" />
+              <feGaussianBlur stdDeviation="1.5" />
+              <feColorMatrix
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+              />
+              <feBlend
+                mode="normal"
+                in2="BackgroundImageFix"
+                result="effect1_dropShadow"
+              />
+              <feColorMatrix
+                in="SourceAlpha"
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              />
+              <feOffset dy="2" />
+              <feGaussianBlur stdDeviation="1" />
+              <feColorMatrix
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"
+              />
+              <feBlend
+                mode="normal"
+                in2="effect1_dropShadow"
+                result="effect2_dropShadow"
+              />
+              <feColorMatrix
+                in="SourceAlpha"
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              />
+              <feOffset />
+              <feGaussianBlur stdDeviation="1" />
+              <feColorMatrix
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0"
+              />
+              <feBlend
+                mode="normal"
+                in2="effect2_dropShadow"
+                result="effect3_dropShadow"
+              />
+              <feBlend
+                mode="normal"
+                in="SourceGraphic"
+                in2="effect3_dropShadow"
+                result="shape"
+              />
+            </filter>
+          </defs>
+        </svg>
+
+        <div style="display: flex; margin-top: 7px;">
+            <svg
+            style="z-index: 1"
+            height="49"
+            viewBox="0 0 8 49"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            >
+            <g transform="matrix(1,0,0,1,-5.58325,-4)">
+              <path
+                d="M14,4L14,28L5.583,28C8.905,25.068 11,20.779 11,16C11,11.221 8.905,6.932 5.583,4L14,4Z"
+                style="fill: rgb(48, 64, 77);"
+              />
+            </g>
+            </svg>
+          <div
+            style="
+              box-sizing: border-box;
+              width: fit-content;
+              max-width: 500px;
+              height: 24px;
+              color: white;
+              padding: 6px 16px;
+              font-family: NotesEsa;
+              font-size: 11px;
+              letter-spacing: 0.6px;
+              text-transform: uppercase;
+              background-color: #30404d;
+              border-bottom-right-radius: 25px;
+              border-top-right-radius: 25px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);"
+          >
+            ${storyTitle}
+          </div>
+        </div>
+      </div>
+    </div>
+  </foreignObject>
+</svg>`;
+}

From ecb0cd32ca76ab43625b8c7e9f6a3b4fe9a67a8a Mon Sep 17 00:00:00 2001
From: KatvonRivia <katvonrivia@gmail.com>
Date: Tue, 11 Aug 2020 10:19:34 +0200
Subject: [PATCH 6/9] feat(markers): hide markers in layer selection

---
 src/scripts/components/app/app.tsx            | 19 ++++++++++++++++++-
 .../layer-selector/layer-selector.tsx         |  2 ++
 src/scripts/reducers/show-markers.ts          |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/scripts/components/app/app.tsx b/src/scripts/components/app/app.tsx
index d61dd5edb..fac90a90f 100644
--- a/src/scripts/components/app/app.tsx
+++ b/src/scripts/components/app/app.tsx
@@ -1,5 +1,5 @@
 import React, {FunctionComponent} from 'react';
-import {Provider as StoreProvider, useSelector} from 'react-redux';
+import {Provider as StoreProvider, useSelector, useDispatch} from 'react-redux';
 import {IntlProvider} from 'react-intl';
 import {HashRouter as Router, Switch, Route, Redirect} from 'react-router-dom';
 
@@ -24,6 +24,9 @@ import Globes from '../globes/globes';
 import translations from '../../i18n';
 
 import styles from './app.styl';
+import {StoriesStateSelector} from '../../selectors/story/story-state';
+import {selectedLayerIdsSelector} from '../../selectors/layers/selected-ids';
+import showMarkersAction from '../../actions/show-markers';
 
 // create redux store
 const store = createReduxStore();
@@ -36,6 +39,20 @@ const App: FunctionComponent = () => (
 
 const TranslatedApp: FunctionComponent = () => {
   const language = useSelector(languageSelector);
+  const dispatch = useDispatch();
+
+  const selectedStory = useSelector(StoriesStateSelector);
+  const selectedLayers = useSelector(selectedLayerIdsSelector);
+  console.log(selectedLayers);
+
+  if (
+    (!selectedLayers.mainId && !selectedLayers.compareId) ||
+    !selectedStory.selected
+  ) {
+    dispatch(showMarkersAction(true));
+  } else {
+    dispatch(showMarkersAction(false));
+  }
 
   return (
     <Router>
diff --git a/src/scripts/components/layer-selector/layer-selector.tsx b/src/scripts/components/layer-selector/layer-selector.tsx
index 73455a030..06d915122 100644
--- a/src/scripts/components/layer-selector/layer-selector.tsx
+++ b/src/scripts/components/layer-selector/layer-selector.tsx
@@ -17,6 +17,7 @@ import {State} from '../../reducers';
 import setFlyToAction from '../../actions/set-fly-to';
 
 import styles from './layer-selector.styl';
+import showMarkersAction from '../../actions/show-markers';
 
 const LayerSelector: FunctionComponent = () => {
   const dispatch = useDispatch();
@@ -73,6 +74,7 @@ const LayerSelector: FunctionComponent = () => {
                 icon={CloseIcon}
                 onClick={() => {
                   dispatch(showLayerSelectorAction(false));
+                  dispatch(showMarkersAction(true));
                 }}
               />
             </div>
diff --git a/src/scripts/reducers/show-markers.ts b/src/scripts/reducers/show-markers.ts
index 67c8200e3..8b77b183f 100644
--- a/src/scripts/reducers/show-markers.ts
+++ b/src/scripts/reducers/show-markers.ts
@@ -1,6 +1,6 @@
 import {SHOW_MARKERS, ShowMarkersAction} from '../actions/show-markers';
 
-const initialState = true;
+const initialState = false;
 
 function showMarkersReducer(
   state: boolean = initialState,

From 5b41f44eb31540e079284cf6d073b5b6559542e6 Mon Sep 17 00:00:00 2001
From: KatvonRivia <katvonrivia@gmail.com>
Date: Tue, 11 Aug 2020 18:00:42 +0200
Subject: [PATCH 7/9] refactor(welcomeScreen): remove showMarker from store and
 pass markers to globe directly

---
 src/scripts/actions/show-markers.ts           | 13 --------
 src/scripts/components/app/app.tsx            | 28 ++++++++---------
 src/scripts/components/globe/globe.tsx        |  8 ++---
 src/scripts/components/globes/globes.tsx      |  8 ++++-
 .../layer-selector/layer-selector.tsx         |  6 +---
 .../components/navigation/navigation.tsx      |  6 +---
 src/scripts/hooks/use-markers.ts              | 30 ++++++-------------
 .../{create-markers.ts => create-marker.ts}   | 20 ++++++++-----
 src/scripts/reducers/index.ts                 |  4 +--
 src/scripts/reducers/show-markers.ts          | 17 -----------
 src/scripts/selectors/show-markers.ts         |  5 ----
 src/scripts/types/marker-type.ts              |  5 ++++
 12 files changed, 53 insertions(+), 97 deletions(-)
 delete mode 100644 src/scripts/actions/show-markers.ts
 rename src/scripts/libs/{create-markers.ts => create-marker.ts} (94%)
 delete mode 100644 src/scripts/reducers/show-markers.ts
 delete mode 100644 src/scripts/selectors/show-markers.ts
 create mode 100644 src/scripts/types/marker-type.ts

diff --git a/src/scripts/actions/show-markers.ts b/src/scripts/actions/show-markers.ts
deleted file mode 100644
index 4ff2dec4f..000000000
--- a/src/scripts/actions/show-markers.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const SHOW_MARKERS = 'SHOW_MARKERS';
-
-export interface ShowMarkersAction {
-  type: typeof SHOW_MARKERS;
-  showMarkers: boolean;
-}
-
-const showMarkersAction = (showMarkers: boolean): ShowMarkersAction => ({
-  type: SHOW_MARKERS,
-  showMarkers
-});
-
-export default showMarkersAction;
diff --git a/src/scripts/components/app/app.tsx b/src/scripts/components/app/app.tsx
index fac90a90f..7ef9cf00c 100644
--- a/src/scripts/components/app/app.tsx
+++ b/src/scripts/components/app/app.tsx
@@ -1,5 +1,5 @@
 import React, {FunctionComponent} from 'react';
-import {Provider as StoreProvider, useSelector, useDispatch} from 'react-redux';
+import {Provider as StoreProvider, useSelector} from 'react-redux';
 import {IntlProvider} from 'react-intl';
 import {HashRouter as Router, Switch, Route, Redirect} from 'react-router-dom';
 
@@ -26,7 +26,6 @@ import translations from '../../i18n';
 import styles from './app.styl';
 import {StoriesStateSelector} from '../../selectors/story/story-state';
 import {selectedLayerIdsSelector} from '../../selectors/layers/selected-ids';
-import showMarkersAction from '../../actions/show-markers';
 
 // create redux store
 const store = createReduxStore();
@@ -39,20 +38,19 @@ const App: FunctionComponent = () => (
 
 const TranslatedApp: FunctionComponent = () => {
   const language = useSelector(languageSelector);
-  const dispatch = useDispatch();
-
-  const selectedStory = useSelector(StoriesStateSelector);
   const selectedLayers = useSelector(selectedLayerIdsSelector);
-  console.log(selectedLayers);
+  const stories = useSelector(StoriesStateSelector).list;
+  const hideMarkers = Boolean(
+    selectedLayers.mainId || selectedLayers.compareId
+  );
+
+  const storyMarkers = stories.map(story => ({
+    id: story.id,
+    title: story.title,
+    position: story.position
+  }));
 
-  if (
-    (!selectedLayers.mainId && !selectedLayers.compareId) ||
-    !selectedStory.selected
-  ) {
-    dispatch(showMarkersAction(true));
-  } else {
-    dispatch(showMarkersAction(false));
-  }
+  const markers = hideMarkers ? [] : storyMarkers;
 
   return (
     <Router>
@@ -75,7 +73,7 @@ const TranslatedApp: FunctionComponent = () => {
             <div className={styles.logo}>
               <EsaLogo />
             </div>
-            <Globes />
+            <Globes markers={markers} />
             <Navigation />
             <GlobeNavigation />
             <TimeSlider />
diff --git a/src/scripts/components/globe/globe.tsx b/src/scripts/components/globe/globe.tsx
index 13702d593..807d4659c 100644
--- a/src/scripts/components/globe/globe.tsx
+++ b/src/scripts/components/globe/globe.tsx
@@ -1,5 +1,4 @@
 import React, {FunctionComponent, useRef, useEffect, useState} from 'react';
-import {useSelector} from 'react-redux';
 import 'cesium/Build/Cesium/Widgets/widgets.css';
 import {
   Viewer,
@@ -23,10 +22,10 @@ import {GlobeView} from '../../types/globe-view';
 import {GlobeProjection} from '../../types/globe-projection';
 import config from '../../config/main';
 import {useMarkers} from '../../hooks/use-markers';
-import {storyListSelector} from '../../selectors/story/list';
 
 import {GlobeProjectionState} from '../../types/globe-projection-state';
 import {BasemapId} from '../../types/basemap';
+import {Marker} from '../../types/marker-type';
 
 import styles from './globe.styl';
 
@@ -55,6 +54,7 @@ interface Props {
   basemap: BasemapId | null;
   zoomLevels: number;
   flyTo: GlobeView | null;
+  markers?: Marker[];
   onMouseEnter: () => void;
   onTouchStart: () => void;
   onChange: (view: GlobeView) => void;
@@ -82,6 +82,7 @@ const Globe: FunctionComponent<Props> = ({
   zoomLevels,
   active,
   flyTo,
+  markers = [],
   onMouseEnter,
   onTouchStart,
   onChange,
@@ -89,7 +90,6 @@ const Globe: FunctionComponent<Props> = ({
 }) => {
   const [viewer, setViewer] = useState<Viewer | null>(null);
   const ref = useRef<HTMLDivElement>(null);
-  const stories = useSelector(storyListSelector);
 
   // make latest "active" value always accessible in camera change handler
   const isActiveRef = useRef<boolean>(active);
@@ -299,7 +299,7 @@ const Globe: FunctionComponent<Props> = ({
     flyToGlobeView(viewer, flyTo);
   }, [viewer, flyTo]);
 
-  useMarkers(viewer, stories);
+  useMarkers(viewer, markers);
 
   return (
     <div
diff --git a/src/scripts/components/globes/globes.tsx b/src/scripts/components/globes/globes.tsx
index b7daf3528..4ca7f4c9e 100644
--- a/src/scripts/components/globes/globes.tsx
+++ b/src/scripts/components/globes/globes.tsx
@@ -22,8 +22,13 @@ import {selectedLayerIdsSelector} from '../../selectors/layers/selected-ids';
 import {GlobeView} from '../../types/globe-view';
 
 import styles from './globes.styl';
+import {Marker} from '../../types/marker-type';
 
-const Globes: FunctionComponent = () => {
+interface Props {
+  markers?: Marker[];
+}
+
+const Globes: FunctionComponent<Props> = ({markers = []}) => {
   const dispatch = useDispatch();
   const selectedLayerIds = useSelector(selectedLayerIdsSelector);
   const projectionState = useSelector(projectionSelector);
@@ -84,6 +89,7 @@ const Globes: FunctionComponent = () => {
         />
       )}
       <Globe
+        markers={markers}
         active={isMainActive}
         view={currentView}
         projectionState={projectionState}
diff --git a/src/scripts/components/layer-selector/layer-selector.tsx b/src/scripts/components/layer-selector/layer-selector.tsx
index 06d915122..a83046a51 100644
--- a/src/scripts/components/layer-selector/layer-selector.tsx
+++ b/src/scripts/components/layer-selector/layer-selector.tsx
@@ -17,7 +17,6 @@ import {State} from '../../reducers';
 import setFlyToAction from '../../actions/set-fly-to';
 
 import styles from './layer-selector.styl';
-import showMarkersAction from '../../actions/show-markers';
 
 const LayerSelector: FunctionComponent = () => {
   const dispatch = useDispatch();
@@ -72,10 +71,7 @@ const LayerSelector: FunctionComponent = () => {
               <Button
                 className={styles.button}
                 icon={CloseIcon}
-                onClick={() => {
-                  dispatch(showLayerSelectorAction(false));
-                  dispatch(showMarkersAction(true));
-                }}
+                onClick={() => dispatch(showLayerSelectorAction(false))}
               />
             </div>
             {selectedMainLayer && (
diff --git a/src/scripts/components/navigation/navigation.tsx b/src/scripts/components/navigation/navigation.tsx
index 535ccdf65..370501f30 100644
--- a/src/scripts/components/navigation/navigation.tsx
+++ b/src/scripts/components/navigation/navigation.tsx
@@ -9,7 +9,6 @@ import {StoryIcon} from '../icons/story-icon';
 import showLayerSelectorAction from '../../actions/show-layer-selector';
 import Share from '../share/share';
 import {MenuIcon} from '../icons/menu-icon';
-import showMarkersAction from '../../actions/show-markers';
 
 import styles from './navigation.styl';
 
@@ -28,10 +27,7 @@ const Navigation: FunctionComponent = () => {
       <Button
         className={styles.button}
         label="layers"
-        onClick={() => {
-          dispatch(showLayerSelectorAction(true));
-          dispatch(showMarkersAction(false));
-        }}
+        onClick={() => dispatch(showLayerSelectorAction(true))}
         icon={LayersIcon}
       />
       <Share />
diff --git a/src/scripts/hooks/use-markers.ts b/src/scripts/hooks/use-markers.ts
index 165a2bcaf..e25beaea7 100644
--- a/src/scripts/hooks/use-markers.ts
+++ b/src/scripts/hooks/use-markers.ts
@@ -1,5 +1,5 @@
 import {useEffect} from 'react';
-import {useSelector, useDispatch} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import {useHistory} from 'react-router-dom';
 import {
   Viewer,
@@ -8,14 +8,11 @@ import {
   ScreenSpaceEventType
 } from 'cesium';
 
-import {createMarker} from '../libs/create-markers';
-import {showMarkersSelector} from '../selectors/show-markers';
-import showMarkersAction from '../actions/show-markers';
+import {createMarker} from '../libs/create-marker';
 
-import {StoryList} from '../types/story-list';
+import {Marker} from '../types/marker-type';
 
-export const useMarkers = (viewer: Viewer | null, stories: StoryList) => {
-  const showMarkers = useSelector(showMarkersSelector);
+export const useMarkers = (viewer: Viewer | null, markers: Marker[]) => {
   const history = useHistory();
   const dispatch = useDispatch();
 
@@ -25,8 +22,6 @@ export const useMarkers = (viewer: Viewer | null, stories: StoryList) => {
       return;
     }
 
-    viewer.entities.removeAll();
-
     const scene = viewer.scene;
     const handler = new ScreenSpaceEventHandler(
       scene.canvas as HTMLCanvasElement
@@ -35,25 +30,18 @@ export const useMarkers = (viewer: Viewer | null, stories: StoryList) => {
     handler.setInputAction(movement => {
       const pickedObject = scene.pick(movement.position);
       if (defined(pickedObject)) {
-        dispatch(showMarkersAction(false));
         history.push(`/stories/${pickedObject.id._id}/0`);
       }
     }, ScreenSpaceEventType.LEFT_CLICK);
 
-    const markers = showMarkers
-      ? stories.map(story => createMarker(story))
-      : [];
-
-    Promise.all(markers)
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .then((entities: Array<any>) => {
-        entities.forEach(entity => viewer.entities.add(entity));
-      })
-      .catch(error => console.error(error));
+    Promise.all(markers.map(marker => createMarker(marker))).then(entities => {
+      viewer.entities.removeAll();
+      entities.forEach(entity => viewer.entities.add(entity));
+    });
 
     // eslint-disable-next-line consistent-return
     return () => handler.destroy();
-  }, [showMarkers, dispatch, history, stories, viewer]);
+  }, [dispatch, history, markers, viewer]);
 
   return;
 };
diff --git a/src/scripts/libs/create-markers.ts b/src/scripts/libs/create-marker.ts
similarity index 94%
rename from src/scripts/libs/create-markers.ts
rename to src/scripts/libs/create-marker.ts
index 4f0810cd0..bf678d953 100644
--- a/src/scripts/libs/create-markers.ts
+++ b/src/scripts/libs/create-marker.ts
@@ -10,17 +10,19 @@ import {
 
 import NotesEsaBold from '../../../assets/fonts/NotesEsaBol.otf';
 
-import {StoryListItem} from '../types/story-list';
+import {Marker} from '../types/marker-type';
 
-export async function createMarker(story: StoryListItem) {
+export async function createMarker(marker: Marker): Promise<Entity> {
   const canvas = document.createElement('canvas');
   canvas.width = 700;
   canvas.height = 300;
 
+  const svgString = await getSvgString(
+    unescape(encodeURIComponent(marker.title))
+  );
+
   const image = new Image();
-  image.src = `data:image/svg+xml;base64,${window.btoa(
-    await getSvgString(unescape(encodeURIComponent(story.title)))
-  )}`;
+  image.src = `data:image/svg+xml;base64,${window.btoa(svgString)}`;
 
   return new Promise(resolve => {
     image.onload = function() {
@@ -29,10 +31,10 @@ export async function createMarker(story: StoryListItem) {
 
       resolve(
         new Entity({
-          id: `${story.id}`,
+          id: `${marker.id}`,
           position: Cartesian3.fromDegrees(
-            story.position[0],
-            story.position[1]
+            marker.position[0],
+            marker.position[1]
           ),
           billboard: new BillboardGraphics({
             image: new ConstantProperty(canvas),
@@ -45,6 +47,7 @@ export async function createMarker(story: StoryListItem) {
     };
   });
 }
+
 let fontPromise: Promise<string> | null = null;
 
 async function loadFont() {
@@ -61,6 +64,7 @@ async function loadFont() {
     };
     reader.readAsDataURL(blob);
   });
+
   return fontPromise;
 }
 
diff --git a/src/scripts/reducers/index.ts b/src/scripts/reducers/index.ts
index bccc40be3..1a3cb7847 100644
--- a/src/scripts/reducers/index.ts
+++ b/src/scripts/reducers/index.ts
@@ -9,7 +9,6 @@ import storyLayerReducer from './story-layer';
 import showLayerSelectorReducer from './show-layer-selector';
 import offlineReducer from './offline/index';
 import downloadedDataReducer from './downloaded-data';
-import showMarkersReducer from './show-markers';
 
 const rootReducer = combineReducers({
   language: languageReducer,
@@ -20,8 +19,7 @@ const rootReducer = combineReducers({
   storyLayerId: storyLayerReducer,
   showLayerSelector: showLayerSelectorReducer,
   offline: offlineReducer,
-  downloadedData: downloadedDataReducer,
-  showMarkers: showMarkersReducer
+  downloadedData: downloadedDataReducer
 });
 
 export default rootReducer;
diff --git a/src/scripts/reducers/show-markers.ts b/src/scripts/reducers/show-markers.ts
deleted file mode 100644
index 8b77b183f..000000000
--- a/src/scripts/reducers/show-markers.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import {SHOW_MARKERS, ShowMarkersAction} from '../actions/show-markers';
-
-const initialState = false;
-
-function showMarkersReducer(
-  state: boolean = initialState,
-  action: ShowMarkersAction
-): boolean {
-  switch (action.type) {
-    case SHOW_MARKERS:
-      return action.showMarkers;
-    default:
-      return state;
-  }
-}
-
-export default showMarkersReducer;
diff --git a/src/scripts/selectors/show-markers.ts b/src/scripts/selectors/show-markers.ts
deleted file mode 100644
index 9add5388d..000000000
--- a/src/scripts/selectors/show-markers.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import {State} from '../reducers/index';
-
-export function showMarkersSelector(state: State): boolean {
-  return state.showMarkers;
-}
diff --git a/src/scripts/types/marker-type.ts b/src/scripts/types/marker-type.ts
new file mode 100644
index 000000000..c82c47a30
--- /dev/null
+++ b/src/scripts/types/marker-type.ts
@@ -0,0 +1,5 @@
+export interface Marker {
+  id: string;
+  title: string;
+  position: number[];
+}

From e3b0c37767d86281c47689ad6628e61aad377f17 Mon Sep 17 00:00:00 2001
From: KatvonRivia <katvonrivia@gmail.com>
Date: Wed, 12 Aug 2020 16:35:11 +0200
Subject: [PATCH 8/9] refactor(welcomeScreen): add custom hook for story
 markers

---
 src/scripts/components/app/app.tsx            | 17 ++-----------
 .../splash-screen/splash-screen.styl          |  2 +-
 src/scripts/hooks/use-story-markers.ts        | 24 +++++++++++++++++++
 3 files changed, 27 insertions(+), 16 deletions(-)
 create mode 100644 src/scripts/hooks/use-story-markers.ts

diff --git a/src/scripts/components/app/app.tsx b/src/scripts/components/app/app.tsx
index 7ef9cf00c..59051f63e 100644
--- a/src/scripts/components/app/app.tsx
+++ b/src/scripts/components/app/app.tsx
@@ -24,8 +24,7 @@ import Globes from '../globes/globes';
 import translations from '../../i18n';
 
 import styles from './app.styl';
-import {StoriesStateSelector} from '../../selectors/story/story-state';
-import {selectedLayerIdsSelector} from '../../selectors/layers/selected-ids';
+import {useStoryMarkers} from '../../hooks/use-story-markers';
 
 // create redux store
 const store = createReduxStore();
@@ -38,19 +37,7 @@ const App: FunctionComponent = () => (
 
 const TranslatedApp: FunctionComponent = () => {
   const language = useSelector(languageSelector);
-  const selectedLayers = useSelector(selectedLayerIdsSelector);
-  const stories = useSelector(StoriesStateSelector).list;
-  const hideMarkers = Boolean(
-    selectedLayers.mainId || selectedLayers.compareId
-  );
-
-  const storyMarkers = stories.map(story => ({
-    id: story.id,
-    title: story.title,
-    position: story.position
-  }));
-
-  const markers = hideMarkers ? [] : storyMarkers;
+  const markers = useStoryMarkers();
 
   return (
     <Router>
diff --git a/src/scripts/components/splash-screen/splash-screen.styl b/src/scripts/components/splash-screen/splash-screen.styl
index 59cd1736b..b573b4344 100644
--- a/src/scripts/components/splash-screen/splash-screen.styl
+++ b/src/scripts/components/splash-screen/splash-screen.styl
@@ -21,7 +21,7 @@
     text-transform: uppercase
     font-weight: bold
     font-size: emCalc(36px)
-    font-family: NotesEsa
+    font-family: NotesEsaBold
     line-height: emCalc(16px)
 
   p
diff --git a/src/scripts/hooks/use-story-markers.ts b/src/scripts/hooks/use-story-markers.ts
new file mode 100644
index 000000000..d94e82ed7
--- /dev/null
+++ b/src/scripts/hooks/use-story-markers.ts
@@ -0,0 +1,24 @@
+import {useSelector} from 'react-redux';
+
+import {selectedLayerIdsSelector} from '../selectors/layers/selected-ids';
+import {StoriesStateSelector} from '../selectors/story/story-state';
+
+export const useStoryMarkers = () => {
+  const selectedLayers = useSelector(selectedLayerIdsSelector);
+  const stories = useSelector(StoriesStateSelector).list;
+  const hideMarkers = Boolean(
+    selectedLayers.mainId || selectedLayers.compareId
+  );
+
+  if (!hideMarkers) {
+    const storyMarkers = stories.map(story => ({
+      id: story.id,
+      title: story.title,
+      position: story.position
+    }));
+
+    return storyMarkers;
+  }
+
+  return [];
+};

From dc16da2e1055bf819f5bc69d4a6a2b02fbb60900 Mon Sep 17 00:00:00 2001
From: KatvonRivia <katvonrivia@gmail.com>
Date: Thu, 13 Aug 2020 09:45:16 +0200
Subject: [PATCH 9/9] refactor(welcomeScreen): change return

---
 src/scripts/hooks/use-story-markers.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/scripts/hooks/use-story-markers.ts b/src/scripts/hooks/use-story-markers.ts
index d94e82ed7..517107f91 100644
--- a/src/scripts/hooks/use-story-markers.ts
+++ b/src/scripts/hooks/use-story-markers.ts
@@ -10,15 +10,15 @@ export const useStoryMarkers = () => {
     selectedLayers.mainId || selectedLayers.compareId
   );
 
-  if (!hideMarkers) {
-    const storyMarkers = stories.map(story => ({
-      id: story.id,
-      title: story.title,
-      position: story.position
-    }));
-
-    return storyMarkers;
+  if (hideMarkers) {
+    return [];
   }
 
-  return [];
+  const storyMarkers = stories.map(story => ({
+    id: story.id,
+    title: story.title,
+    position: story.position
+  }));
+
+  return storyMarkers;
 };