summaryrefslogtreecommitdiff
path: root/resources/leaflet-route
diff options
context:
space:
mode:
authorChristopher Baines <cb15g11@soton.ac.uk>2015-03-03 21:59:00 +0000
committerChristopher Baines <cb15g11@soton.ac.uk>2015-03-03 21:59:00 +0000
commit11b86a6d8ab226a55fcd2e69c40989ebc2461853 (patch)
tree2fe5159c7184af186fdbbe44c872513f0a0adbfc /resources/leaflet-route
parent59f5f9f361152dca105db2954137b5bfa77d7c2b (diff)
downloadleaflet-soton-11b86a6d8ab226a55fcd2e69c40989ebc2461853.tar
leaflet-soton-11b86a6d8ab226a55fcd2e69c40989ebc2461853.tar.gz
Route improvements
Work towards making the route parts an independant plugin. Also make several other improvements in the process.
Diffstat (limited to 'resources/leaflet-route')
-rw-r--r--resources/leaflet-route/leaflet-route.js332
1 files changed, 181 insertions, 151 deletions
diff --git a/resources/leaflet-route/leaflet-route.js b/resources/leaflet-route/leaflet-route.js
index 0cc76ca..dbce204 100644
--- a/resources/leaflet-route/leaflet-route.js
+++ b/resources/leaflet-route/leaflet-route.js
@@ -141,200 +141,230 @@ 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.Route = {};
- L.Control.Sidebar.prototype.initialize.call(this, placeholder, options);
- L.setOptions(this, options);
+L.Control.Route.createRouteMasterList = function(routeMasters, routeSelected, sortFunction) {
+ var ul = L.DomUtil.create('ul', 'ls-route-list');
- this._routeLayer = routeLayer;
+ var routeMasterNames = Object.keys(routeMasters);
- var title = L.DomUtil.create('div', 'ls-routes-title', this._contentContainer);
- title.textContent = "University Bus Routes";
+ if (sortFunction) {
+ routeMasterNames.sort(sortFunction);
+ }
- var routeMasters = this._routeLayer.getRouteMasters();
+ for (var i in routeMasterNames) {
+ var name = routeMasterNames[i]
+ var routeMaster = routeMasters[name];
- var routeMasterRouteLists = {};
+ var li = L.DomUtil.create('li', '', ul);
+ var a = L.DomUtil.create('a', null, li);
- var ul = L.DomUtil.create('ul', 'ls-route-master-list', this._contentContainer);
+ a.style.background = routeMaster.routes[0].properties.colour;
- var routeMasterNames = Object.keys(routeMasters);
- if (this.options.routeMasterSort) {
- routeMasterNames.sort(this.options.routeMasterSort);
- }
+ a.textContent = "U";
+ var strong = document.createElement("strong");
+ strong.textContent = routeMaster.name.slice(1);
+ a.appendChild(strong);
- var descriptions = {};
- var stopLists = {};
+ a.onclick = (function(routeName) {
+ return function() {
+ routeSelected(routeName);
+ };
+ })(routeMaster.name);
+ }
- var activeRouteMaster = "U1";
- var activeRouteForRouteMaster = {};
+ return ul;
+};
- for (var i in routeMasterNames) {
- var routeMasterName = routeMasterNames[i];
- var routeMaster = routeMasters[routeMasterName];
+L.Control.Route.createRouteList = function(routeMaster, routeSelected) {
+ var ul = L.DomUtil.create('ul', 'ls-route-list');
- 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";
+ for (var i in routeMaster.routes) {
+ var route = routeMaster.routes[i];
- var strong = document.createElement("strong");
- strong.textContent = routeMasterName.slice(1);
+ var li = L.DomUtil.create('li', '', ul);
+ var a = L.DomUtil.create('a', null, li);
- console.log(routeMaster);
+ a.style.background = route.properties.colour;
- a.appendChild(strong);
+ a.textContent = "U";
+ var strong = document.createElement("strong");
+ strong.textContent = route.properties.ref.slice(1);
+ a.appendChild(strong);
- activeRouteForRouteMaster[routeMasterName] = routeMaster.routes[0].properties.name;
+ a.onclick = (function(routeName) {
+ return function() {
+ routeSelected(routeName);
+ };
+ })(route.properties.name);
+ }
- a.onclick = (function(routeMasterName) {
- return function() {
- routeMasterRouteLists[activeRouteMaster].style.display = "none";
- routeMasterRouteLists[routeMasterName].style.display = "block";
+ return ul;
+};
- var activeRoute = activeRouteForRouteMaster[routeMasterName];
+L.Control.Route.createStopList = function(route, routeLayer) {
+ var ul = L.DomUtil.create('ul', 'ls-stop-list');
- showStopList(activeRoute);
+ ul.style.listStyleImage = "url(" + LS.imagePath + "bus_stop.png)";
- activeRouteMaster = routeMasterName;
+ var busStops = routeLayer.getStops();
- routeLayer.resetRoutes();
- routeLayer.highlightRoute(activeRoute);
- };
- })(routeMasterName);
+ 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);
- // The route lists
+ if (typeof(busStop) !== "undefined") {
+ a.textContent = busStop.properties.name;
+ li.onclick = (function(uri) {
+ return function() {
+ if (document.body.clientWidth <= 767) {
+ hideSidebars();
- var routeList = this.createRouteList(routeMaster, function(routeName) {
- routeLayer.resetRoutes();
+ map.invalidateSize();
+ }
- showStopList(routeName);
+ routeLayer.panToStop(uri, {
+ animate: true
+ });
+ };
+ })(busStop.properties.uri);
+ li.onmouseover = (function(uri) {
+ return function() {
+ routeLayer.highlightStop(uri);
+ };
+ })(busStop.properties.uri);
+ li.onmouseout = (function(uri) {
+ return function() {
+ routeLayer.resetStop(uri);
+ };
+ })(busStop.properties.uri);
+ } else {
+ a.textContent = "Name Unknown";
+ }
+ }
- activeRouteForRouteMaster[activeRouteMaster] = routeName;
- routeLayer.highlightRoute(routeName);
- });
+ return ul;
+};
- routeMasterRouteLists[routeMasterName] = routeList;
+L.Control.Route.create = function(routeLayer) {
+ function showStopList(name) {
+ var previousActiveRoute = activeRouteForRouteMaster[activeRouteMaster];
- routeList.style.display = "none";
- this._contentContainer.appendChild(routeList);
+ stopLists[previousActiveRoute].style.display = "none";
+ descriptions[previousActiveRoute].style.display = "none"
+ stopLists[name].style.display = "block";
+ descriptions[name].style.display = "block"
+ }
- // The stops
- for (var i in routeMaster.routes) {
- var route = routeMaster.routes[i];
+ var busRouteSidebarContent = document.createDocumentFragment();
- // Add the description
- var description = L.DomUtil.create('div', 'ls-route-description');
- description.textContent = route.properties.name.split(": ")[1].replace("=>", "\u2192");
+ var routeMasters = routeLayer.getRouteMasters();
+ var routeMasterRouteLists = {};
+ var stopLists = {};
+ var descriptions = {};
- descriptions[route.properties.name] = description;
+ var routeMasterNames = Object.keys(routeMasters);
- // Add the list of stops
- var stopList = this.createStopList(route);
- stopLists[route.properties.name] = stopList;
+ var sortFunction = function(a, b) {
+ var refs = {
+ "U1": 1,
+ "U2": 2,
+ "U6": 6,
+ "U9": 9,
+ "U1N": 10
+ };
- if (activeRouteMaster === routeMasterName &&
- activeRouteForRouteMaster[routeMasterName] === route.properties.name) {
+ return refs[a] - refs[b];
+ };
- stopList.style.display = "block";
- description.style.display = "block";
- } else {
- stopList.style.display = "none";
- description.style.display = "none";
- }
+ var activeRouteMaster = "U1";
+ var activeRouteForRouteMaster = {};
- this._contentContainer.appendChild(description);
- this._contentContainer.appendChild(stopList);
- }
- }
+ var showRouteMaster = function(routeMasterName) {
+ routeMasterRouteLists[activeRouteMaster].style.display = "none";
+ routeMasterRouteLists[routeMasterName].style.display = "block";
- var activeRouteMaster = "U1"; // TODO: Dont hardcode like this
+ var activeRoute = activeRouteForRouteMaster[routeMasterName];
- routeMasterRouteLists[activeRouteMaster].style.display = "block";
- },
- createRouteList: function(routeMaster, routeSelected) {
- var ul = L.DomUtil.create('ul', 'ls-route-list');
+ showStopList(activeRoute);
- var stopLists = {};
- for (var i in routeMaster.routes) {
- var route = routeMaster.routes[i];
+ activeRouteMaster = routeMasterName;
- var li = L.DomUtil.create('li', '', ul);
- var a = L.DomUtil.create('a', null, li);
+ routeLayer.resetRoutes();
+ routeLayer.highlightRoute(activeRoute);
+ };
- a.style.background = route.properties.colour;
+ var routeMasterControl = L.Control.Route.createRouteMasterList(routeMasters, showRouteMaster, sortFunction);
- a.textContent = "U";
- var strong = document.createElement("strong");
- strong.textContent = route.properties.ref.slice(1);
- a.appendChild(strong);
+ busRouteSidebarContent.appendChild(routeMasterControl);
- a.onclick = (function(routeName) {
- return function() {
- routeSelected(routeName);
- };
- })(route.properties.name);
- }
+ for (var i in routeMasterNames) {
+ var routeMasterName = routeMasterNames[i];
+ var routeMaster = routeMasters[routeMasterName];
- return ul;
- },
- 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
- });
- };
- })(busStop.properties.uri);
- a.onmouseover = (function(uri) {
- return function() {
- routeLayer.highlightStop(uri);
- };
- })(busStop.properties.uri);
- a.onmouseout = (function(uri) {
- return function() {
- routeLayer.resetStop(uri);
- };
- })(busStop.properties.uri);
- } else {
- a.textContent = "Name Unknown";
- }
+ activeRouteForRouteMaster[routeMasterName] = routeMaster.routes[0].properties.name;
+
+ // The route lists
+
+ var routeList = L.Control.Route.createRouteList(routeMaster, function(routeName) {
+ routeLayer.resetRoutes();
+
+ showStopList(routeName);
+
+ activeRouteForRouteMaster[activeRouteMaster] = routeName;
+ 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 = L.Control.Route.createStopList(route, routeLayer);
+ 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";
}
- return ul;
+ busRouteSidebarContent.appendChild(description);
+ busRouteSidebarContent.appendChild(stopList);
+ }
+ }
+
+ routeMasterRouteLists[activeRouteMaster].style.display = "block";
+
+ return busRouteSidebarContent;
+}
+
+if ("Sidebar" in L.Control) {
+ L.Control.RouteSidebar = L.Control.Sidebar.extend({
+ initialize: function (routeLayer, placeholder, options) {
+ L.Control.Sidebar.prototype.initialize.call(this, placeholder, options);
+ L.setOptions(this, options);
+
+ var controls = L.Control.Route.create(routeLayer);
+
+ this.getContainer().appendChild(controls);
}
});