Replace footer credits box with 'About' popup.

app.py

@@ -35,11 +35,11 @@ def ajax():
     dataset = request.args.get('dataset')
     agency = request.args.get('agency')
     def routes():
-        from models import Agency, Route, Stop
+        from models import Agency, Route, RouteStop, Stop
         routes = db.session.query(Route).join(Agency)\
             .filter(Agency.tag==agency).all()
         stops = db.session.query(Stop).options(joinedload(Stop.routes))\
-            .filter(Route.tag.in_([r.tag for r in routes])).all()
+            .filter(Stop.routes.any(Route.id.in_([r.id for r in routes]))).all()
         return {
             "routes": {r.tag: r.serialize() for r in routes},
             "stops": {s.id: s.serialize() for s in stops}

static/css/full-page-map.css

@@ -12,7 +12,7 @@ html, body {
     width: 100%;
 }
 
-/* Bottom-right credits box */
+/* Bottom-right about box */
 #map .leaflet-control-attribution {
     background-color: rgba(0,0,0,.8);
     border-top: 1px solid #eee;
@@ -20,12 +20,13 @@ html, body {
     border-top-left-radius: 3px;
     color: #eee;
 }
-#map .leaflet-control-attribution a,
-#map .leaflet-control-attribution a:hover,
-#map .leaflet-control-attribution a:visited,
-#map .leaflet-control-attribution a:active {
+a,
+a:hover,
+a:visited,
+a:active {
     color: #fff;
     font-weight: bold;
+    text-decoration: none;
 }
 #map div.leaflet-popup a.leaflet-popup-close-button {
     display: none;
@@ -47,3 +48,43 @@ html, body {
     font-size: 1.3em;
     color: #fff;
 }
+#about {
+    display: none;
+    background-color: #444;
+    font-family: sans-serif;
+    color: #eee;
+    border-radius: 1em;
+    box-sizing: border-box;
+    border: 2px solid #888;
+    position: absolute;
+    width: 80%;
+    left: 10%;
+    top: 20%;
+    padding: 1em;
+    max-height: 80%;
+    overflow: auto;
+}
+#about #close-about {
+    float: right;
+}
+#about h2 {
+    text-align: center;
+}
+#about a,
+#about a:hover,
+#about a:visited,
+#about a:active {
+    color: #fff;
+    font-weight: bold;
+}
+
+@media all and (max-width: 600px) {
+    #about {
+        width: 100%;
+        left: 0;
+        top: 10%;
+        border-radius: 0;
+        border-left: none;
+        border-right: none;
+    }
+}

static/js/map.js

@@ -30,6 +30,11 @@ BusMap.Map = function(opts) {
         else {that.leaflet.fitBounds(that.opts.bounds)}
         if (that.opts.zoom) that.leaflet.setZoom(that.opts.zoom);
 
+        // Set attribution
+        $(".leaflet-control-attribution").html('<a id="show-about" href="#">About</a>');
+        $("#show-about").click(function() { $("#about").show(); });
+        $("#close-about").click(function() { $("#about").hide(); });
+
         // Restore the user's last view.
         goToLastView();
 
@@ -73,7 +78,6 @@ BusMap.Map = function(opts) {
                 that.stops = data.stops;
                 that.routes = data.routes;
                 updateStopsUI(that.stops);
-                console.log(data);
             });
         return that;
     };
@@ -93,8 +97,7 @@ BusMap.Map = function(opts) {
                     // Store this prediction on the stop and on the vehicle.
                 }
                 that.vehicles = data.locations;
-                updateStopsUI(that.stops);
-                console.log(data);
+                //updateStopsUI(that.stops);
             });
         return that;
     };
@@ -211,7 +214,6 @@ BusMap.getCookies = function() {
     return cookies;
 }
 BusMap.getCookie = function(name) {
-    console.log("Getting cookie\n" + "BM-" +  name);
     return BusMap.getCookies()["BM-" + name];
 }
 
@@ -222,6 +224,5 @@ BusMap.setCookie = function(name, value, exp_days) {
     exp_date = new Date();
     exp_date.setDate(exp_date.getDate() + exp_days);
     value = escape(value) + "; expires=" + exp_date.toUTCString();
-    console.log("Setting cookie\n" + "BM-" + name + "=" + value);
     document.cookie = "BM-" + name + "=" + value;
 }

templates/map.html

@@ -11,6 +11,33 @@
 {% endblock %}
 {% block body %}
     <div id="map"></div>
+    <div id="about">
+        <div 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
+            for public transit systems which are tracked by NextBus.
+        </p>
+        <p>
+            Built by <a href="https://ant.sr">Anton Sarukhanov</a>. Open source
+            and MIT licensed.
+            <a href="https://git.xhost.io/anton/pybusmap">Fork it</a>.
+        </p>
+        <p>
+            <a href="http://leafletjs.com"
+                title="A JS library for interactive maps">Leaflet</a>
+                - A JavaScript library for interactive maps.
+        </p>
+        <p>
+            Map Data &copy; {{ config['MAP_DATA_ATTRIBUTION']|safe }}.
+        </p>
+        <p>
+            Transit Data &copy; {{ agency.title }} and/or NextBus.
+        </p>
+        <p>
+            Data sourced from the <a href="http://nextbus.com">Nextbus</a> API.
+        </p>
+    </div>
     <script src="bower/leaflet/dist/leaflet.js"></script>
     <script src="bower/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
     <script src="bower/jquery/dist/jquery.min.js"></script>
@@ -22,9 +49,6 @@
             tileUrl: '{{ config['MAP_TILE_URL']|safe }}',
             tileOptions: {
                 subdomains: {{ config['MAP_TILE_SUBDOMAINS']|tojson|safe }},
-                attribution: '{{ config['MAP_CUSTOM_ATTRIBUTION']|safe }}'
-                    + ' | Data &copy; {{ config['MAP_DATA_ATTRIBUTION']|safe }}'
-                    + ', {{ agency.title }}',
                 tileset: '{{ config['MAP_TILESET']|safe }}',
                 errorTileUrl: '{{ config['MAP_ERROR_TILE_URL']|safe }}',
             },