added zoom control, legalese

static/css/full-page-map.css

@@ -38,6 +38,14 @@ html, body {
     padding: .4em;
 }
 
+/* Text, etc */
+.legalese {
+    text-align: center;
+    font-style: italic;
+    font-size: 0.7em;
+    opacity: 0.75;
+}
+
 /* Attribution link / "About" popup */
 #map .leaflet-control-attribution {
     background-color: rgba(0,0,0,.8);
@@ -46,6 +54,11 @@ html, body {
     border-top-left-radius: 3px;
     color: #eee;
 }
+#map .leaflet-control-zoom,
+#map .leaflet-control-zoom a {
+    border: 1px solid #666;
+    background-color: #222;
+}
 #map a,
 #map a:hover,
 #map a:visited,
@@ -111,6 +124,7 @@ html, body {
 .dialog .close {
     float: right;
 }
+.dialog h1,
 .dialog h2 {
     text-align: center;
 }
@@ -122,6 +136,7 @@ html, body {
     font-weight: bold;
     text-decoration: none;
 }
+.dialog h1 a,
 .dialog h2 a {
     text-decoration: underline;
 }

static/js/map.js

@@ -20,7 +20,6 @@ BusMap.Map = function(opts) {
     function init() {
         // Create Map
         var mapOptions = {
-            zoomControl: false,
         };
         var boundsOptions = {
             animate: false,
@@ -226,6 +225,7 @@ BusMap.Map = function(opts) {
             var popupOpts = {
                 closeButton: false,
                 keepInView: true,
+                offset: [1,-9],
             };
             if (!(s in that.stopMarkers)) {
                 // Stop marker doesn't exist yet - create it now.

templates/map.html

@@ -55,9 +55,14 @@
         <p>
             To see upcoming stops for a bus, click the bus <img height="20px" src="static/img/bus.png" alt="bus-icon">.
         </p>
-        <h2>
+        <h1>
             <a href="javascript:void(0);" onclick="$('#welcome').hide();">Let's Go!</a>
-        </h2>
+        </h1>
+        <p class="legalese">
+            Nothing displayed here is guaranteed to be correct. The creator of this
+            map takes no responsibility for you catching a bus, missing a bus, or
+            interacting with a bus in any other way.
+        </p>
     </div>
     <div id="msg">
         <span id="msg-zoomForVehicles">Zoom in to see vehicles.</span>