aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--Gruntfile.js1
-rw-r--r--index.html29
-rw-r--r--scripts.js206
-rw-r--r--style.css52
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 @@
</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>
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%;