More cosmetics

static/css/style.css

@@ -24,6 +24,34 @@ a {
     height: 100%;
 }
 
+.leaflet-popup-content {
+    font-family: 'Libre Baskerville', serif;
+    margin: 1.3em;
+    line-height: inherit;
+}
+
+.leaflet-popup-content-wrapper {
+    border-radius: 0;
+    text-align: justify;
+}
+
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+    background: #222;
+    color: #fff;
+    box-shadow: none;
+}
+
+.leaflet-popup-scrolled {
+    border: none;
+}
+
+.circle-marker {
+    border-radius: 50%;
+    border: 2px solid rgba(0,0,0,.5);
+    background: rgba(0,0,0,.2);
+}
+
 /* filters */
 
 #filter-picker {
@@ -125,12 +153,6 @@ a {
     border-color: #888888;
 }
 
-.circle-marker {
-    border-radius: 50%;
-    border: 2px solid rgba(0,0,0,.5);
-    background: rgba(0,0,0,.2);
-}
-
 /* overlay text */
 #overlay {
     position: absolute;
@@ -164,10 +186,9 @@ a {
 
 #overlay p {
     margin: 1em 0 1.2em;
-    padding: 1.6em 0 .6em;
-    line-height: 1.5;
-    font-size: 20px;
-    border-top: 3px solid #c0c0c0;
+    padding: .6em 0;
+    line-height: 2;
+    font-size: 24px;
 }
 
 #overlay a {

static/js/main.js

@@ -27,9 +27,7 @@ $.getJSON('/articles/')
   })
 
 $('.begin').on('click', function (e) {
-  $('#overlay')
-    .fadeOut(700)
-    .then(function() { $(this).remove() })
+  $('#overlay').fadeOut(700)
 
   e.preventDefault()
   e.stopPropagation()

static/js/visualization.js

@@ -27,22 +27,24 @@ class Visualization {
     })
 
     this.oms.legColors = {
-      usual: 'rgba(0,0,0,.1)',
-      highlighted: 'rgba(0,0,0,.4)'
+      usual: 'rgba(0,0,0,.2)',
+      highlighted: 'rgba(0,0,0,.5)'
     }
 
-    var popup = new L.Popup();
+    var popup = new L.Popup({
+      autoPanPadding: [96, 96],
+      closeButton: false,
+      maxHeight: 250
+    });
     this.oms.addListener('click', function (marker) {
+      if (map.getZoom() < 10)
+        map.setZoom(9)
+
       popup.setContent(marker.description.replace(/\n/g, '<br>'))
       popup.setLatLng(marker.getLatLng())
       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()