Use the routes code from leaflet-soton

Update leaflet-soton such that this is possible.

3 files changed, 12 insertions, 202 deletions

diff --git a/libraries/leaflet-soton b/libraries/leaflet-soton
-Subproject b87854d5d583941a63e17f57373e9bfa3250b8c
+Subproject 11b86a6d8ab226a55fcd2e69c40989ebc246185
diff --git a/scripts.js b/scripts.js
index ee2a8b9..ab7313a 100644
--- a/scripts.js
+++ b/scripts.js
@@ -133,205 +133,14 @@
       var isCollapsed = false;
     }
 
+    /* Typeahead search functionality */
+    LS.getData(function(data) {
 
-    function createStopList(route) {
-        var ul = L.DomUtil.create('ul', 'stop-list');
-
-        ul.style.listStyleImage = "url(" + LS.imagePath + "bus_stop.png)";
-
-        var busStops = map.routeLayer.getStops();
-
-        for (var i in route.properties.stops) {
-            var stop = route.properties.stops[i];
-            var li = L.DomUtil.create('li', '', ul);
-            var busStop = busStops[stop];
-            var a = L.DomUtil.create('a', '', li);
-
-            if (typeof(busStop) !== "undefined") {
-                a.textContent = busStop.properties.name;
-                a.onclick = (function(uri) {
-                    return function() {
-                        if (document.body.clientWidth <= 767) {
-                          hideSidebars();
-
-                          map.invalidateSize();
-                        }
-
-                        map.routeLayer.panToStop(uri, {
-                            animate: true
-                        });
-                    };
-                })(busStop.properties.uri);
-                a.onmouseover = (function(uri) {
-                    return function() {
-                        map.routeLayer.highlightStop(uri);
-                    };
-                })(busStop.properties.uri);
-                a.onmouseout = (function(uri) {
-                    return function() {
-                        map.routeLayer.resetStop(uri);
-                    };
-                })(busStop.properties.uri);
-            } else {
-                a.textContent = "Name Unknown";
-            }
-        }
-
-        return ul;
-    }
-
-    function createRouteList(routeMaster, routeSelected) {
-        var ul = L.DomUtil.create('ul', 'route-list');
-
-        var stopLists = {};
-        for (var i in routeMaster.routes) {
-            var route = routeMaster.routes[i];
-
-            var li = L.DomUtil.create('li', '', ul);
-            var a = L.DomUtil.create('a', null, li);
-
-            a.style.background = route.properties.colour;
-
-            a.textContent = "U";
-            var strong = document.createElement("strong");
-            strong.textContent = route.properties.ref.slice(1);
-            a.appendChild(strong);
-
-            a.onclick = (function(routeName) {
-                return function() {
-                    a.style.border = "2px";
-
-                    routeSelected(routeName);
-                };
-            })(route.properties.name);
-        }
-
-        return ul;
-    }
-
-    function buildBusRoutesControl() {
-        function showStopList(name) {
-            var previousActiveRoute = activeRouteForRouteMaster[activeRouteMaster];
-
-            console.log("hiding " + previousActiveRoute);
-            stopLists[previousActiveRoute].style.display = "none";
-            descriptions[previousActiveRoute].style.display = "none"
-            console.log("showing " + name);
-            stopLists[name].style.display = "block";
-            descriptions[name].style.display = "block"
-        }
-
-        var busRouteSidebarContent = document.getElementById("busRoutesContent");
-
-        var routeMasters = map.routeLayer.getRouteMasters();
-        var routeMasterRouteLists = {};
-        var stopLists = {};
-        var descriptions = {};
-
-        var ul = L.DomUtil.create('ul', '', busRouteSidebarContent);
-        ul.id = "route-master-list";
-
-        var routeMasterNames = Object.keys(routeMasters);
-        routeMasterNames.sort(function(a, b) {
-            var refs = {
-                "U1": 1,
-                "U2": 2,
-                "U6": 6,
-                "U9": 9,
-                "U1N": 10
-            };
-
-            return refs[a] - refs[b];
-        });
-
-        var activeRouteMaster = "U1";
-        var activeRouteForRouteMaster = {};
-
-        for (var i in routeMasterNames) {
-            var routeMasterName = routeMasterNames[i];
-            var routeMaster = routeMasters[routeMasterName];
-
-            var li = L.DomUtil.create('li', '', ul);
-            var a = L.DomUtil.create('a', '', li);
-            a.style.background = routeMaster.routes[0].properties.colour;
-            a.textContent = "U";
-
-            var strong = document.createElement("strong");
-            strong.textContent = routeMasterName.slice(1);
-
-            console.log(routeMaster);
-
-            a.appendChild(strong);
-
-            activeRouteForRouteMaster[routeMasterName] = routeMaster.routes[0].properties.name;
-
-            a.onclick = (function(routeMasterName) {
-                return function() {
-                    routeMasterRouteLists[activeRouteMaster].style.display = "none";
-                    routeMasterRouteLists[routeMasterName].style.display = "block";
-
-                    var activeRoute = activeRouteForRouteMaster[routeMasterName];
-
-                    showStopList(activeRoute);
-
-                    activeRouteMaster = routeMasterName;
-
-                    map.routeLayer.resetRoutes();
-                    map.routeLayer.highlightRoute(activeRoute);
-                };
-            })(routeMasterName);
-
-            // The route lists
-
-            var routeList = createRouteList(routeMaster, function(routeName) {
-                map.routeLayer.resetRoutes();
-
-                showStopList(routeName);
-
-                activeRouteForRouteMaster[activeRouteMaster] = routeName;
-                map.routeLayer.highlightRoute(routeName);
-            });
-
-            routeMasterRouteLists[routeMasterName] = routeList;
-
-            routeList.style.display = "none";
-            busRouteSidebarContent.appendChild(routeList);
-
-            // The stops
-            for (var i in routeMaster.routes) {
-                var route = routeMaster.routes[i];
-
-                // Add the description
-                var description = L.DomUtil.create('div', 'ls-route-description');
-                description.textContent = route.properties.name.split(": ")[1].replace("=>", "\u2192");
-
-                descriptions[route.properties.name] = description;
-
-                // Add the list of stops
-                var stopList = createStopList(route);
-                stopLists[route.properties.name] = stopList;
-
-                if (activeRouteMaster === routeMasterName &&
-                    activeRouteForRouteMaster[routeMasterName] === route.properties.name) {
-
-                    stopList.style.display = "block";
-                    description.style.display = "block";
-                } else {
-                    stopList.style.display = "none";
-                    description.style.display = "none";
-                }
-
-                busRouteSidebarContent.appendChild(description);
-                busRouteSidebarContent.appendChild(stopList);
-            }
-        }
+      var controls = L.Control.Route.create(map.routeLayer);
 
-        routeMasterRouteLists[activeRouteMaster].style.display = "block";
-    }
+      var busRouteSidebarContent = document.getElementById("busRoutesContent");
 
-    /* Typeahead search functionality */
-    LS.getData(function(data) {
-      buildBusRoutesControl();
+      busRouteSidebarContent.appendChild(controls);
 
       function buildRow(first, second) {
         var tr = document.createElement("tr");
diff --git a/style.css b/style.css
index 11b1e53..e5d8d08 100644
--- a/style.css
+++ b/style.css
@@ -28,12 +28,12 @@ input[type="radio"], input[type="checkbox"] {
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
 }
 
-#route-master-list {
+.route-master-list {
     list-style: none;
     padding-left: 0px;
 }
 
-#route-master-list li a {
+.route-master-list li a {
     font: 24px/30px Arial, Helvetica, sans-serif;
     width: 100%;
     border-bottom-width: 2px;
@@ -49,28 +49,29 @@ input[type="radio"], input[type="checkbox"] {
     text-decoration: none;
 }
 
-.route-list {
+.ls-route-list {
     list-style: none;
     padding-left: 0px;
 }
 
-.route-list li {
+.ls-route-list li {
     display: inline;
 }
 
-.route-list li a {
+.ls-route-list li a {
     font: 22px/22px Arial, Helvetica, sans-serif;
     padding-right: 4px;
     padding-left: 4px;
     margin-right: 3px;
     margin-left: 3px;
     border-radius: 25px;
+    border: 0px solid #000000;
     background: #a1a1a1;
     color: white;
     text-decoration: none;
 }
 
-.stop-list {
+.ls-stop-list {
     padding-left: 25px;
     bottom: 0;
     overflow: auto;