From 43329ed927e6b8a0931b863876b79696a52efc21 Mon Sep 17 00:00:00 2001 From: Christopher Baines Date: Sat, 20 Sep 2014 11:09:29 +0100 Subject: Add bus routes sidebar Also add the bus routes to the map. --- Gruntfile.js | 1 + index.html | 29 ++++++++- scripts.js | 206 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- style.css | 52 +++++++++++++++ 4 files changed, 283 insertions(+), 5 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index ee4e1c7..8aba4c5 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -18,6 +18,7 @@ module.exports = function(grunt) { 'libraries/leaflet-soton/resources/leaflet-hash/leaflet-hash.js', 'libraries/leaflet-soton/resources/leaflet-indoor/leaflet-indoor.js', 'libraries/leaflet-soton/resources/leaflet-route/leaflet-route.js', + 'libraries/leaflet-soton/resources/leaflet-textpath/leaflet.textpath.js', 'libraries/leaflet-soton/src/leaflet-soton.js', 'scripts.js' ], diff --git a/index.html b/index.html index 4a24fd9..b0bf3d6 100644 --- a/index.html +++ b/index.html @@ -45,15 +45,20 @@ + @@ -161,6 +166,26 @@ +
diff --git a/scripts.js b/scripts.js index a408c6d..ee2a8b9 100644 --- a/scripts.js +++ b/scripts.js @@ -6,17 +6,20 @@ var $sidebars = [ $('#buildingsSidebar'), - $('#sitesSidebar') + $('#sitesSidebar'), + $('#busRoutesSidebar') ]; var $sidebarLi = [ $('#navBuildingsLi'), - $('#navSitesLi') + $('#navSitesLi'), + $('#navBusRoutesLi') ]; var sidebarHideButtons = [ "buildingsSidebarHideButton", - "sitesSidebarHideButton" + "sitesSidebarHideButton", + "busRoutesSidebarHideButton" ]; function hideSidebars() { @@ -64,6 +67,7 @@ indoor: true, popupWidth: 400, popupHeight: 550, + busRoutes: true, zoomControl: false, levelControlPosition: 'bottomleft' }); @@ -130,8 +134,204 @@ } + 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); + } + } + + routeMasterRouteLists[activeRouteMaster].style.display = "block"; + } + /* Typeahead search functionality */ LS.getData(function(data) { + buildBusRoutesControl(); function buildRow(first, second) { var tr = document.createElement("tr"); diff --git a/style.css b/style.css index 71cf824..11b1e53 100644 --- a/style.css +++ b/style.css @@ -28,6 +28,58 @@ input[type="radio"], input[type="checkbox"] { box-shadow: 0 0 10px rgba(0,0,0,0.5); } +#route-master-list { + list-style: none; + padding-left: 0px; +} + +#route-master-list li a { + font: 24px/30px Arial, Helvetica, sans-serif; + width: 100%; + border-bottom-width: 2px; + border-top-width: 2px; + border-left-width: 0px; + border-right-width: 0px; + border-style: solid; + border-color: #000000; + background: #a1a1a1; + color: white; + display: block; + text-align: center; + text-decoration: none; +} + +.route-list { + list-style: none; + padding-left: 0px; +} + +.route-list li { + display: inline; +} + +.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; + background: #a1a1a1; + color: white; + text-decoration: none; +} + +.stop-list { + padding-left: 25px; + bottom: 0; + overflow: auto; + position: absolute; + top: 295px; + width: 100%; + margin-bottom: 0px; +} + .sidebar-wrapper { width: 100%; height: 100%; -- cgit v1.2.3