Made map.html template fully dynamic (mostly from config variables), cleaned...

Made map.html template fully dynamic (mostly from config variables), cleaned up HTML/JS/CSS for said map.html

app.py

@@ -24,7 +24,7 @@ def map():
     # TODO: serve different agency depending on cookie (or special domain)
     agency_tag = app.config['AGENCIES'][0]
     agency = db.session.query(Agency).filter(Agency.tag==agency_tag).one()
-    return render_template('map.html', agency=agency)
+    return render_template('map.html', agency=agency, config=app.config)
 
 if __name__ == '__main__':
     # Run Flask

bower.json

@@ -14,7 +14,6 @@
     "tests"
   ],
   "dependencies": {
-    "bootstrap": "~3.3.6",
     "leaflet": "~0.7.7"
   }
 }

config.py

@@ -33,7 +33,15 @@ class Config(object):
     SQLALCHEMY_TRACK_MODIFICATIONS = False
     PREDICTIONS_MAX_AGE = 5 * 60;
     LOCATIONS_MAX_AGE = 5 * 60;
-    AGENCIES = ["SAMPLE_AGENCY"]
+    AGENCIES = ['rutgers']
+    MAP_CUSTOM_ATTRIBUTION = '<a href="https://ant.sr/">ant.sr</a>'
+    MAP_DATA_ATTRIBUTION = '<a href="http://cartodb.com/attributions#basemaps">CartoDB</a>'
+    MAP_ERROR_TILE_URL = 'http://tiles.antsar-static.com/generic/tile-blank-black.png'
+    MAP_TILE_URL = 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'
+    MAP_TILE_SUBDOMAINS = ['a', 'b', 'c']
+    MAP_TILESET = 'rutgers-black'
+    MAP_LAT_PADDING = 0.003
+    MAP_LON_PADDING = 0.003
 
 class ProdConfig(Config):
     SQLALCHEMY_URI = 'postgresql://localhost/pybusmap_prod'

static/css/full-page-map.css

+html, body {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+#map {
+    height: 100%;
+    width: 100%;
+}

templates/map.html

@@ -3,54 +3,38 @@
 {% block head %}
     {{ super() }}
     <link href="bower/leaflet/dist/leaflet.css" rel="stylesheet"/>
-    <style>
-        html, body {
-            width: 100%;
-            height: 100%;
-            border: 0;
-            margin: 0;
-            padding: 0;
-        }
-        #map {
-            height: 100%;
-            width: 100%;
-        }
-    </style>
+    <link href="static/css/full-page-map.css" rel="stylesheet" />
 {% endblock %}
 {% block body %}
     <div id="map"></div>
     <script src="bower/leaflet/dist/leaflet.js"></script>
     <script>
         var mapDivId = "map";
-        var zoom = 14;
-        var center = [40.5, -74.45];
         var mapOptions = {
-            minZoom: 14,
-            maxZoom: 18,
             zoomControl: false,
         };
-
+        var center = [{{ agency.center[0]|round(5) }}, {{ agency.center[1]|round(5) }}];
         var bounds = [
-            [{{ agency.lat_min }}, {{ agency.lon_min }}],
-            [{{ agency.lat_max }}, {{ agency.lon_max }}]
+            [{{ (agency.lat_min - config['MAP_LAT_PADDING'])|round(5) }},
+                {{ (agency.lon_min - config['MAP_LON_PADDING'])|round(5) }}],
+            [{{ (agency.lat_max + config['MAP_LAT_PADDING'])|round(5) }},
+                {{ (agency.lon_max + config['MAP_LON_PADDING'])|round(5) }}]
         ];
-        var center = {{ agency.center }};
         var boundsOptions = {
             animate: false,
             reset: true,
         };
-        var tileUrl = 'http://{s}.tiles.antsar-static.com/{tileset}/{z}/{x}/{y}.png';
+        var tileUrl = '{{ config['MAP_TILE_URL']|safe }}';
         var tileOptions = {
-            subdomains: ['a', 'b', 'c', 'd', 'e'],
-            attribution: '<a href="https://ant.sr/">ant.sr</a> '
-                + '<br>Map Data &copy; '
-                + '<a href="http://openstreetmap.org">OSM Contributors</a>'
+            subdomains: {{ config['MAP_TILE_SUBDOMAINS']|tojson|safe }},
+            attribution: '{{ config['MAP_CUSTOM_ATTRIBUTION']|safe }}'
+                + '<br>Map Data &copy; {{ config['MAP_DATA_ATTRIBUTION']|safe }}'
                 + '<br>Bus Data &copy; {{ agency.title }}',
-            tileset: 'rutgers-black',
-            errorTileUrl: 'http://tiles.antsar-static.com/generic/tile-blank-black.png',
+            tileset: '{{ config['MAP_TILESET']|safe }}',
+            errorTileUrl: '{{ config['MAP_ERROR_TILE_URL']|safe }}',
         };
         var map = L.map(mapDivId, mapOptions)
-            .setView(center, zoom)
+            .fitBounds(bounds)
             .setMaxBounds(bounds, boundsOptions);
         L.tileLayer(tileUrl, tileOptions).addTo(map);
     </script>