Add splash screen

static/css/style.css

@@ -2,7 +2,7 @@ html, body {
     margin: 0;
     padding: 0;
     height: 100%;
-    font-family: 'Lora', serif;
+    font-family: 'Libre Baskerville', serif;
 }
 
 *, *:before, *:after {
@@ -11,13 +11,21 @@ html, body {
 
 body {
     background: #fff;
-    color: #000;
+    color: #222;
 }
 
+a {
+    color: inherit;
+}
+
+/* background map */
+
 #map {
     height: 100%;
 }
 
+/* filters */
+
 #filter-picker {
     position: absolute;
     z-index: 10;
@@ -122,3 +130,63 @@ body {
     border: 2px solid rgba(0,0,0,.5);
     background: rgba(0,0,0,.2);
 }
+
+/* overlay text */
+#overlay {
+    position: absolute;
+    z-index: 1001;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background: linear-gradient(to bottom left, rgba(255,255,255,.2), white 50%);
+    display: table-cell;
+    vertical-align: center;
+}
+
+#overlay .text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 90%;
+    max-width: 1024px;
+    transform: translate(-50%,-50%);
+}
+
+#overlay h1 {
+    margin-top: -1.2em;
+    font-size: 48px;
+    margin-bottom: 0;
+    display: inline-block;
+    font-weight: 500;
+    font-style: italic;
+}
+
+#overlay p {
+    margin: 1em 0 1.2em;
+    padding: 1.6em 0 .6em;
+    line-height: 1.5;
+    font-size: 20px;
+    border-top: 3px solid #c0c0c0;
+}
+
+#overlay a {
+    text-decoration: none;
+    border-bottom: 1px dotted #333;
+    padding-bottom: .2em;
+}
+
+#overlay a:hover {
+    border-bottom-color: transparent;
+}
+
+#overlay .begin {
+    font-size: 24px;
+    border-bottom: none;
+    font-weight: bold;
+}
+
+#overlay .begin:after {
+    content: '›';
+    padding-left: .1em;
+}

static/js/main.js

@@ -19,8 +19,19 @@ $.getJSON('/articles/')
   .fail(console.error.bind(console))
   .then(function (response) {
     console.log('Got data successfully!')
+    console.log(response.length)
     visualization = new Visualization(map, response, colors)
       .setupCategoryFilter('.category-filter')
       .setupYearFilter('.year-filter')
       .displayMarkers()
-  });
+  })
+
+$('.begin').on('click', function (e) {
+  $('#overlay')
+    .fadeOut(700)
+    .then(function() { $(this).remove() })
+
+  e.preventDefault()
+  e.stopPropagation()
+  return false
+})

static/js/visualization.js

@@ -33,6 +33,11 @@ class Visualization {
       map.openPopup(popup)
     })
 
+    this.oms.addListener('spiderfy', (marker) => {
+      this.map.setCenter(marker.getLatLng())
+      this.map.setZoom(20)
+    })
+
     // set up markers
     this._markers = new Map()
     this.setupMarkers()