Cleanup crud, add geolocation.

static/css/full-page-map.css → static/css/map.css

@@ -21,6 +21,23 @@ html, body {
     color: #ff0;
 }
 
+/* Map Buttons */
+#locate {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+}
+#locate a {
+    text-decoration: none;
+}
+#locate a img {
+    background-color: #222;
+    border-radius: 50%;
+    border: 2px solid #666;
+    padding: 0.4em;
+    height: 1.5em;
+}
+
 /* Embed Mode - Hide UI stuff */
 #map.embed .leaflet-control {
     display: none;

static/css/style.css

-body {
-  padding-top: 50px;
-  padding-bottom: 30px;
-}

templates/map.html

@@ -8,7 +8,7 @@
     <link href="bower/leaflet/dist/leaflet.css" rel="stylesheet"/>
     <link href="bower/leaflet.markercluster/dist/MarkerCluster.Default.css" rel="stylesheet"/>
     <link href="bower/Leaflet.label/dist/leaflet.label.css" rel="stylesheet"/>
-    <link href="static/css/full-page-map.css" rel="stylesheet" />
+    <link href="static/css/map.css" rel="stylesheet" />
 {% endblock %}
 {% block body %}
     <div id="map" class="{% if embed %}embed{% endif %}"></div>
@@ -67,6 +67,9 @@
     <div id="msg">
         <span id="msg-zoomForVehicles">Zoom in to see vehicles.</span>
     </div>
+    <div id="locate">
+        <a href="javascript:void(0);"><img src="static/img/crosshair.png" alt="Locate"></a>
+    </div>
     <script src="bower/leaflet/dist/leaflet.js"></script>
     <script src="bower/Leaflet.label/dist/leaflet.label.js"></script>
     <script src="bower/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
@@ -110,5 +113,15 @@
         }
         BusMap.setCookie('been_here', Date.now());
 
+        // Find the user
+        map.leaflet.on('locationfound', function(l) {
+            map.leaflet.fitBounds(l.bounds);
+        });
+        $("#locate a").click(function() {
+            map.leaflet.locate({
+                timeout: 3000,
+            });
+        });
+
     </script>
 {% endblock %}