diff options
| -rw-r--r-- | Gruntfile.js | 1 | ||||
| -rw-r--r-- | index.html | 29 | ||||
| -rw-r--r-- | scripts.js | 206 | ||||
| -rw-r--r-- | 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' ], @@ -45,15 +45,20 @@ </a> </li> <li id="navBuildingsLi"> - <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="buildingsSidebarLink"> + <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in"> Buildings </a> </li> <li id="navSitesLi"> - <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in" id="sitesSidebarLink"> + <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in"> Sites </a> </li> + <li id="navBusRoutesLi"> + <a href="#" data-toggle="collapse" data-target=".navbar-collapse.in"> + Bus Routes + </a> + </li> </ul> </div><!--/.navbar-collapse --> </div> @@ -161,6 +166,26 @@ </div> </div> </div> + <div id="busRoutesSidebar" style="display: none;"> + <div class="sidebar-wrapper"> + <div class="panel panel-default" style="margin: 0px; border: none; + border-radius: 0px; -webkit-box-shadow: none; box-shadow: none;" + id="busRoutes"> + <div class="panel-heading"> + <h3 class="panel-title">Bus Routes + <button id="busRoutesSidebarHideButton" + type="button" + class="btn btn-xs btn-default pull-right" + style="margin-top: -2px;" > + <i class="glyphicon glyphicon-chevron-left"></i> + </button> + </h3> + </div> + <div id="busRoutesContent"> + </div> + </div> + </div> + </div> <div id="map"></div> </div> @@ -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"); @@ -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%; |