summaryrefslogtreecommitdiff
path: root/resources
diff options
context:
space:
mode:
authorChristopher Baines <cb15g11@soton.ac.uk>2014-09-28 14:50:17 +0100
committerChristopher Baines <cb15g11@soton.ac.uk>2014-09-28 14:50:17 +0100
commit3919a6a104bbc4f0d0704b6b720553c3ac54e892 (patch)
tree8be8521cdc1236964a58f87bb80164fa262f2d86 /resources
parent799d7c752b7c8795df38468b8e6d852f13d92973 (diff)
downloadleaflet-soton-3919a6a104bbc4f0d0704b6b720553c3ac54e892.tar
leaflet-soton-3919a6a104bbc4f0d0704b6b720553c3ac54e892.tar.gz
Improve bus routes example
Diffstat (limited to 'resources')
-rw-r--r--resources/leaflet-route/leaflet-route.js133
1 files changed, 91 insertions, 42 deletions
diff --git a/resources/leaflet-route/leaflet-route.js b/resources/leaflet-route/leaflet-route.js
index 8dd0759..0cc76ca 100644
--- a/resources/leaflet-route/leaflet-route.js
+++ b/resources/leaflet-route/leaflet-route.js
@@ -144,6 +144,17 @@ L.Route = L.FeatureGroup.extend({
if ("Sidebar" in L.Control) {
L.Control.Route = L.Control.Sidebar.extend({
initialize: function (routeLayer, placeholder, options) {
+ 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"
+ }
+
L.Control.Sidebar.prototype.initialize.call(this, placeholder, options);
L.setOptions(this, options);
@@ -163,44 +174,97 @@ if ("Sidebar" in L.Control) {
routeMasterNames.sort(this.options.routeMasterSort);
}
+ var descriptions = {};
+ var stopLists = {};
+
+ 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.textContent = routeMaster.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;
+
+ routeLayer.resetRoutes();
+ routeLayer.highlightRoute(activeRoute);
};
})(routeMasterName);
// The route lists
- var routeList = this._createRouteList(routeMaster);
+ var routeList = this.createRouteList(routeMaster, function(routeName) {
+ routeLayer.resetRoutes();
+
+ showStopList(routeName);
+
+ activeRouteForRouteMaster[activeRouteMaster] = routeName;
+ routeLayer.highlightRoute(routeName);
+ });
+
routeMasterRouteLists[routeMasterName] = routeList;
routeList.style.display = "none";
-
this._contentContainer.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 = this.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";
+ }
+
+ this._contentContainer.appendChild(description);
+ this._contentContainer.appendChild(stopList);
+ }
}
var activeRouteMaster = "U1"; // TODO: Dont hardcode like this
routeMasterRouteLists[activeRouteMaster].style.display = "block";
},
- _createRouteList: function(routeMaster) {
- var div = L.DomUtil.create('div', null);
-
- var ul = L.DomUtil.create('ul', 'ls-route-list', div);
-
- var routeLayer = this._routeLayer;
+ createRouteList: function(routeMaster, routeSelected) {
+ var ul = L.DomUtil.create('ul', 'ls-route-list');
var stopLists = {};
for (var i in routeMaster.routes) {
@@ -209,62 +273,47 @@ if ("Sidebar" in L.Control) {
var li = L.DomUtil.create('li', '', ul);
var a = L.DomUtil.create('a', null, li);
- //a.style.borderColor = route.properties.colour;
a.style.background = route.properties.colour;
- a.textContent = route.properties.ref;
+ a.textContent = "U";
+ var strong = document.createElement("strong");
+ strong.textContent = route.properties.ref.slice(1);
+ a.appendChild(strong);
+
a.onclick = (function(routeName) {
return function() {
- routeLayer.resetRoutes();
- stopLists[activeStopList].style.display = "none";
- stopLists[routeName].style.display = "block";
- activeStopList = routeName;
- routeLayer.highlightRoute(routeName);
+ routeSelected(routeName);
};
})(route.properties.name);
-
- // The stops
-
- var stopList = this._createStopList(route);
- stopLists[route.properties.name] = stopList;
-
- stopList.style.display = "none";
-
- div.appendChild(stopList);
}
- var activeStopList = routeMaster.routes[0].properties.name;
- stopLists[activeStopList].style.display = "block";
- //routeLayer.highlightRoute(activeStopList);
-
- return div;
+ return ul;
},
- _createStopList: function(route) {
- var div = L.DomUtil.create('div', null, this._div);
-
- var description = L.DomUtil.create('div', 'ls-route-description', div);
- description.textContent = route.properties.name.split(": ")[1].replace("=>", "\u2192");
-
- var ul = L.DomUtil.create('ul', 'ls-stop-list', div);
+ createStopList: function(route) {
+ var ul = L.DomUtil.create('ul', 'ls-stop-list');
ul.style.listStyleImage = "url(" + LS.imagePath + "bus_stop.png)";
var routeLayer = this._routeLayer;
+
var busStops = 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();
+ }
+
routeLayer.panToStop(uri, {
animate: true
});
@@ -285,7 +334,7 @@ if ("Sidebar" in L.Control) {
}
}
- return div;
+ return ul;
}
});