Fixed Vehicle UI issues, added Welcome popup, added stale vehicle cleanup

static/css/full-page-map.css

@@ -5,6 +5,7 @@ html, body {
     border: 0;
     margin: 0;
     padding: 0;
+    font-family: sans-serif;
 }
 #map {
     height: 100%;
@@ -23,13 +24,18 @@ html, body {
 /* Messages displayed above the map */
 #msg {
     position: absolute;
-    bottom: 0;
+    bottom: .75em;
     left: 0;
     width: 100%;
-    background-color: #f00;
+    text-align: center;
 }
 #msg span {
     display: none;
+    color: #fff;
+    background-color: rgba(0,0,0,.8);
+    border: 2px solid rgba(255,255,255,.8);
+    border-radius: .75em;
+    padding: .4em;
 }
 
 /* Attribution link / "About" popup */
@@ -70,7 +76,8 @@ html, body {
 #map div.leaflet-popup .predictions.vehicle-predictions .more {
     text-align: center;
 }
-#map div.leaflet-popup div.leaflet-popup-content-wrapper {
+#map div.leaflet-popup div.leaflet-popup-content-wrapper,
+#map div.leaflet-label {
     border: 3px solid #666;
     background: #222;
     color: #eee;
@@ -86,10 +93,9 @@ html, body {
     font-size: 1.3em;
     color: #fff;
 }
-#about {
+.dialog {
     display: none;
     background-color: #444;
-    font-family: sans-serif;
     color: #eee;
     border-radius: 1em;
     box-sizing: border-box;
@@ -102,23 +108,26 @@ html, body {
     max-height: 80%;
     overflow: auto;
 }
-#about #close-about {
+.dialog .close {
     float: right;
 }
-#about h2 {
+.dialog h2 {
     text-align: center;
 }
-#about a,
-#about a:hover,
-#about a:visited,
-#about a:active {
+.dialog a,
+.dialog a:hover,
+.dialog a:visited,
+.dialog a:active {
     color: #fff;
     font-weight: bold;
     text-decoration: none;
 }
+.dialog h2 a {
+    text-decoration: underline;
+}
 
 @media all and (max-width: 600px) {
-    #about {
+    .dialog {
         width: 100%;
         left: 0;
         top: 10%;

static/js/map.js

@@ -2,6 +2,7 @@
 var BusMap = {
     cookiePrefix: "BM_",
     zoomShowVehicles: 15,
+    vehicleMaxAge: 10,
 };
 
 /*
@@ -129,17 +130,13 @@ BusMap.Map = function(opts) {
             that.vehicleMarkers = {};
         }
         for (var v in vehicles) {
-            if (that.routes) {
-                if (vehicles[v].route && vehicles[v].route in that.routes) {
-                    var route = that.routes[vehicles[v].route].title;
-                } else {
-                    // This is debugging... Don't leave this shit here.
-                    var route = "No Route ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~";
-                    console.log("Vehicle \"" + v + "\" references unknown route \"" + vehicles[v].route + "\"");
-                }
-            } else {
-                var route = vehicles[v].vehicle;
+            if (!that.routes) {
+                // Try again in half a second, routes are loading or refreshing.
+                setTimeout(function() { updateVehiclesUI(vehicles) }, 500);
+                return false;
             }
+
+            var route = that.routes[vehicles[v].route].title;
             var text = '<header>' + route + '</header>';
             var text_after = '<footer>Bus # ' + vehicles[v].vehicle + '</footer>';
             var popupOpts = {
@@ -158,12 +155,12 @@ BusMap.Map = function(opts) {
                 }).bindLabel(route, {
                     noHide: true,
                     direction: 'right',
-                    className: 'bus-label',
                 }).bindPopup(text + text_after, popupOpts).addTo(that.vehicleMarkersGroup);
             } else {
                 that.vehicleMarkers[v].setLatLng([vehicles[v].lat, vehicles[v].lon])
                     .setIconAngle(vehicles[v].heading);
             }
+            that.vehicleMarkers[v].bm_updated = Date.now()
 
             // Add predictions to the marker popup, if available
             if (that.stops && vehicles[v].predictions) {
@@ -200,7 +197,14 @@ BusMap.Map = function(opts) {
                 that.vehicleMarkers[v]._popup.setContent(text);
             }
         }
-        // Call this here to hide vehicles if we shouldn't be showing them just yet.
+        // Remove stale markes from the map
+        for (v in that.vehicleMarkers) {
+            var min_updated = Date.now() - (that.vehicleMaxAge * 1000)
+            if (that.vehicleMarkers[v].bm_updated < min_updated) {
+                delete that.vehicleMarkers[v];
+            }
+        }
+        // Call this here to hide/show vehicles markers based on zoom level.
         zoomShowHide();
     }
 
@@ -307,8 +311,10 @@ BusMap.Map = function(opts) {
         if (that.vehicleMarkersGroup) {
             if (zoom >= that.zoomShowVehicles && !(that.leaflet.hasLayer(that.vehicleMarkersGroup))) {
                 that.leaflet.addLayer(that.vehicleMarkersGroup);
+                $('#msg-zoomForVehicles').hide();
             } else if (zoom < that.zoomShowVehicles && that.leaflet.hasLayer(that.vehicleMarkersGroup)) {
                 that.leaflet.removeLayer(that.vehicleMarkersGroup);
+                $('#msg-zoomForVehicles').show();
             }
         }
     }

templates/map.html

@@ -12,8 +12,8 @@
 {% endblock %}
 {% block body %}
     <div id="map"></div>
-    <div id="about">
-        <div id="close-about"><a href="javascript:void(0);">&times;</a></div>
+    <div class="dialog" id="about">
+        <div class="close" id="close-about"><a href="javascript:void(0);">&times;</a></div>
         <h2>About PyBusMap</h2>
         <p>
             This map displays real-time vehicle locations and arrival predictions
@@ -38,9 +38,29 @@
         <p>
             Data sourced from the <a href="http://nextbus.com">Nextbus</a> API.
         </p>
+        <p>
+            NextBus&trade; is a trademark of NextBus Inc.
+        </p>
+    </div>
+    <div class="dialog" id="welcome">
+        <div class="close" id="close-welcome"><a href="javascript:void(0);">&times;</a></div>
+        <h2>Welcome to PyBusMap</h2>
+        <p>
+            Hi! This is PyBusMap. It's a map of buses tracked by NextBus. It has
+            predictions for bus arrival times, and real-time vehicle locations.
+        </p>
+        <p>
+            To see upcoming buses for a stop, click the stop flag <img height="20px" src="static/img/stop27x60.png" alt="stop-icon">.
+        </p>
+        <p>
+            To see upcoming stops for a bus, click the bus <img height="20px" src="static/img/bus.png" alt="bus-icon">.
+        </p>
+        <h2>
+            <a href="javascript:void(0);" onclick="$('#welcome').hide();">Let's Go!</a>
+        </h2>
     </div>
     <div id="msg">
-        <span id="msg-zoomForVehicles">Zoom in to see vehicles</span>
+        <span id="msg-zoomForVehicles">Zoom in to see vehicles.</span>
     </div>
     <script src="bower/leaflet/dist/leaflet.js"></script>
     <script src="bower/Leaflet.label/dist/leaflet.label.js"></script>
@@ -75,7 +95,14 @@
         $(".leaflet-control-attribution")
             .html('<a id="show-about" href="javascript:void(0)">About</a>');
         $("#show-about").click(function() { $("#about").show(); });
-        $("#close-about").click(function() { $("#about").hide(); });
+        $(".dialog .close").click(function() { $(this).parent().hide(); });
+
+        // Display welcome screen on first launch
+        var been_here = BusMap.getCookie('been_here');
+        if (!(been_here)) {
+            $("#welcome").show();
+        }
+        BusMap.setCookie('been_here', Date.now());
 
     </script>
 {% endblock %}