Added embed mode, ability to store view in URL hash.

app.py

@@ -28,6 +28,14 @@ def map():
     agency = db.session.query(Agency).filter(Agency.tag==agency_tag).one()
     return render_template('map.html', agency=agency, config=app.config)
 
+@app.route('/embed')
+def map_embed():
+    from models import Agency
+    # 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, config=app.config, embed=True)
+
 @app.route('/ajax')
 def ajax():
     # TODO: OPTIMIZE THIS SHIT.

static/css/full-page-map.css

@@ -21,6 +21,11 @@ html, body {
     color: #ff0;
 }
 
+/* Embed Mode - Hide UI stuff */
+#map.embed .leaflet-control {
+    display: none;
+}
+
 /* Messages displayed above the map */
 #msg {
     position: absolute;

static/js/map.js

@@ -14,13 +14,11 @@ BusMap.Map = function(opts) {
     var stops = {};
     var routes = {};
     var that = this;
-    init();
 
     /* Constructor - create/initialize the map */
     function init() {
         // Create Map
-        var mapOptions = {
-        };
+        var mapOptions = {};
         var boundsOptions = {
             animate: false,
             reset: true,
@@ -32,11 +30,21 @@ BusMap.Map = function(opts) {
         else {that.leaflet.fitBounds(that.opts.bounds)}
         if (that.opts.zoom) that.leaflet.setZoom(that.opts.zoom);
 
-        // Restore the user's last view (if exists).
-        lastViewRecover();
+        // Go to view requested by URL hash (if set)
+        var viewOk = that.setViewFromUrlHash();
+        // And watch for updates
+        $(window).bind('hashchange', that.setViewFromUrlHash);
+
+        if (!viewOk) {
+            // Restore the user's last view (if exists).
+            lastViewRecover();
+        }
 
         // Store view parameters for recovery later.
         that.leaflet.on('moveend', lastViewStore);
+        that.leaflet.on('moveend', function() {
+            window.location.replace("#" + getViewString());
+        });
 
         // Show/hide markers based on zoom.
         that.leaflet.on('zoomend', zoomShowHide);
@@ -287,6 +295,13 @@ BusMap.Map = function(opts) {
     }
 
     // Map view persistence functions
+    function getViewString() {
+        var ll = that.leaflet.getCenter();
+        var view = Math.round(ll.lat * 1000000) / 1000000 + ','
+             + Math.round(ll.lng * 1000000) / 1000000 + ','
+             + that.leaflet.getZoom();
+        return view;
+    }
     function lastViewRecover() {
         var last = BusMap.getCookie('last_view');
         if (last && last != "") {
@@ -298,10 +313,7 @@ BusMap.Map = function(opts) {
         }
     }
     function lastViewStore() {
-        var ll = that.leaflet.getCenter();
-        view = Math.round(ll.lat * 1000000) / 1000000 + ','
-             + Math.round(ll.lng * 1000000) / 1000000 + ','
-             + that.leaflet.getZoom();
+        var view = getViewString();
         BusMap.setCookie('last_view', view);
     }
 
@@ -319,6 +331,25 @@ BusMap.Map = function(opts) {
         }
     }
 
+    that.setViewFromUrlHash = function() {
+        var hash = window.location.hash.substring(1);
+        hash = hash.split(",");
+        if (hash.length == 2) {
+            that.leaflet.setView([hash[0],hash[1]]);
+            return true;
+        } else if (hash.length == 3) {
+            that.leaflet.setView([hash[0],hash[1]], hash[2]);
+            return true;
+        }
+        return false;
+    }
+
+    that.getUrlFromView = function() {
+        var view = getViewString();
+        return window.location.hostname + window.location.pathname + '#' + view;
+    }
+
+    init();
     return that;
 };
 

templates/map.html

@@ -11,7 +11,7 @@
     <link href="static/css/full-page-map.css" rel="stylesheet" />
 {% endblock %}
 {% block body %}
-    <div id="map"></div>
+    <div id="map" class="{% if embed %}embed{% endif %}"></div>
     <div class="dialog" id="about">
         <div class="close" id="close-about"><a href="javascript:void(0);">&times;</a></div>
         <h2>About PyBusMap</h2>
@@ -76,6 +76,7 @@
     <script>
         // Initialize the map
         var map = BusMap.Map({
+            {% if embed %}embed: true,{% endif %}
             agency: {{ agency.tag|tojson|safe }},
             mapElement: $("#map").get(0),
             tileUrl: '{{ config['MAP_TILE_URL']|safe }}',