From 14f270836ff945a4d809242914d3854818fee39a Mon Sep 17 00:00:00 2001 From: Christopher Baines Date: Tue, 3 Mar 2015 22:22:54 +0000 Subject: Use the routes code from leaflet-soton Update leaflet-soton such that this is possible. --- libraries/leaflet-soton | 2 +- scripts.js | 201 ++---------------------------------------------- style.css | 13 ++-- 3 files changed, 13 insertions(+), 203 deletions(-) diff --git a/libraries/leaflet-soton b/libraries/leaflet-soton index b87854d..11b86a6 160000 --- a/libraries/leaflet-soton +++ b/libraries/leaflet-soton @@ -1 +1 @@ -Subproject commit b87854d5d583941a63e17f57373e9bfa3250b8c5 +Subproject commit 11b86a6d8ab226a55fcd2e69c40989ebc2461853 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; -- cgit v1.2.3