Improve bus route example

Also extract the route related classes from leaflet-soton.js, in preparation
to make a leaflet-route plugin. The new bus route example uses the
leaflet-sidebar plugin, as this works better on multiple screen sizes.

1 files changed, 41 insertions, 332 deletions

diff --git a/src/leaflet-soton.js b/src/leaflet-soton.js
index 9e4b72f..b2d2a43 100644
--- a/src/leaflet-soton.js
+++ b/src/leaflet-soton.js
@@ -470,44 +470,51 @@ SELECT * WHERE {\
                     layer.addData(data[layerName]);
                 }
 
-                var routeLayer = new LS.RouteLayer(options.busRoutes ? data.busRoutes : emptyFeatureCollection, data.busStops, {
-                    routeOptions: {
-                        onEachFeature: function(feature, layer) {
-                            layer.on('click', function(e) {
-                                var content = busRouteTemplate(feature.properties);
-
-                                showPopup(map, content, e.latlng);
-                            });
-                        },
-                        style: busRouteStyle
-                    },
-                    stopOptions: {
-                        onEachFeature: function(feature, layer) {
-                            layer.on('click', function(e) {
-                                var content = busStopTemplate(feature.properties);
+                if (options.busRoutes) {
+                    var routeLayer = new L.Route(options.busRoutes ? data.busRoutes : emptyFeatureCollection, data.busStops, {
+                        routeOptions: {
+                            onEachFeature: function(feature, layer) {
+                                layer.on('click', function(e) {
+                                    var content = busRouteTemplate(feature.properties);
 
-                                showPopup(map, content, e.latlng);
-                            });
-                        }
-                    }
-                });
-                routeLayer.addTo(map);
-
-                if (options.busRouteControl) {
-                    var routeControl = new LS.RouteControl(routeLayer, {
-                        routeMasterSort: function(a, b) {
-                            var refs = {
-                                "U1": 1,
-                                "U2": 2,
-                                "U6": 6,
-                                "U9": 9,
-                                "U1N": 10
-                            };
+                                    map.showInfo(content, e.latlng);
+                                });
+                            },
+                            style: busRouteStyle
+                        },
+                        stopOptions: {
+                            onEachFeature: function(feature, layer) {
+                                layer.on('click', function(e) {
+                                    var content = busStopTemplate(feature.properties);
 
-                            return refs[a] - refs[b];
+                                    map.showInfo(content, e.latlng);
+                                });
+                            }
                         }
                     });
-                    routeControl.addTo(map);
+                    routeLayer.addTo(map);
+
+                    if (options.busRouteControl) {
+                        var routeControl = new L.Control.Route(routeLayer, "sidebar", {
+                            routeMasterSort: function(a, b) {
+                                var refs = {
+                                    "U1": 1,
+                                    "U2": 2,
+                                    "U6": 6,
+                                    "U9": 9,
+                                    "U1N": 10
+                                };
+
+                                return refs[a] - refs[b];
+                            },
+                            position: "right"
+                        });
+                        routeControl.addTo(map);
+                        routeControl.show();
+
+                        var routeSidebarControl = new L.Control.ShowRouteSidebar(routeControl);
+                        routeSidebarControl.addTo(map);
+                    }
                 }
 
                 LS.getWorkstationData(function(workstationData) {
@@ -1650,304 +1657,6 @@ SELECT * WHERE {\
         return window.innerWidth < 500;
     }
 
-    LS.RouteLayer = L.FeatureGroup.extend({
-        initialize: function (routes, stops, options) {
-            L.setOptions(this, options);
-
-            this._layers = {};
-
-            this._routeMasters = {};
-
-            for (var i in routes.features) {
-                var route = routes.features[i];
-
-                if ("routeMaster" in route.properties) {
-                    var routeMaster = route.properties.routeMaster;
-
-                    if (routeMaster in this._routeMasters) {
-                        this._routeMasters[routeMaster].routes.push(route);
-                    } else {
-                        this._routeMasters[routeMaster] = {
-                            name: routeMaster,
-                            routes: [ route ]
-                        };
-                    }
-                } else {
-                    this._routeMasters[route.properties.ref] = {
-                        name: route.properties.ref,
-                        routes: [ route ]
-                    };
-                }
-            }
-
-            this._routes = routes;
-            this._busStops = {};
-
-            for (i in stops.features) {
-                var busStop = stops.features[i];
-
-                this._busStops[busStop.properties.uri] = busStop;
-            }
-
-            var routeLayers = this._routeLayers = {}
-            this._routeLayer = new L.GeoJSON(routes, {
-                onEachFeature: function(feature, layer) {
-                    routeLayers[feature.properties.name] = layer;
-
-                    if (options.routeOptions.onEachFeature) {
-                        options.routeOptions.onEachFeature(feature, layer);
-                    }
-                },
-                style: options.routeOptions.style
-            });
-            this.addLayer(this._routeLayer);
-
-            var stopLayers = this._stopLayers = {};
-            this._stopLayer = new L.GeoJSON(stops, {
-                onEachFeature: function(feature, layer) {
-                    stopLayers[feature.properties.uri] = layer;
-
-                    if (options.stopOptions.onEachFeature) {
-                        options.stopOptions.onEachFeature(feature, layer);
-                    }
-                },
-                pointToLayer: function (feature, latlng) {
-                    return L.circleMarker(latlng, {
-                        radius: 8,
-                        opacity: 0,
-                    });
-                },
-                style: function(feature) {
-                    return {
-                        radius: 8,
-                        opacity: 0,
-                        fillOpacity: 0
-                    };
-                }
-            });
-            this.addLayer(this._stopLayer);
-        },
-        getRouteMasters: function() {
-            return this._routeMasters;
-        },
-        getRoutesForRouteMaster: function(id) {
-            return this._routeMasters[id];
-        },
-        getRoutes: function() {
-            return this._routes;
-        },
-        getStops: function() {
-            return this._busStops;
-        },
-        highlightRoute: function(id) {
-            var layer = this._routeLayers[id];
-
-            layer.setStyle({
-                weight: 10,
-                opacity: 1,
-            });
-
-            layer.setText('\u25BA', {
-                repeat: true,
-                offset: 3,
-                attributes: {
-                    fill: 'black',
-                    fontSize: 24
-                }
-            });
-
-            layer.bringToFront();
-        },
-        resetRoute: function(id) {
-            var layer = this._routeLayers[id];
-
-            this._routeLayer.resetStyle(layer);
-
-            layer.setText(null);
-        },
-        highlightStop: function(id) {
-            var layer = this._stopLayers[id];
-
-            layer.setStyle({
-                color: '#ff0000',
-                opacity: 1,
-                fillOpacity: 0.3,
-                radius: 16,
-                stroke: true,
-                fill: true
-            });
-        },
-        resetStop: function(id) {
-            var layer = this._stopLayers[id];
-
-            this._stopLayer.resetStyle(layer);
-        },
-        panToStop: function(id, panOptions) {
-            var layer = this._stopLayers[id];
-
-            this._map.panTo(layer._latlng, panOptions);
-        }
-    });
-
-    LS.RouteControl = L.Control.extend({
-        initialize: function (routeLayer, options) {
-            L.setOptions(this, options);
-
-            this._routeLayer = routeLayer;
-        },
-        onAdd: function (map) {
-            this._div = L.DomUtil.create('div', 'ls-route-control');
-
-            var title = L.DomUtil.create('div', 'ls-routes-title', this._div);
-            title.textContent = "University Bus Routes";
-
-            var routeMasters = this._routeLayer.getRouteMasters();
-
-            var routeMasterRouteLists = {};
-
-            var ul = L.DomUtil.create('ul', 'ls-route-master-list', this._div);
-
-            var routeMasterNames = Object.keys(routeMasters);
-            if (this.options.routeMasterSort) {
-                routeMasterNames.sort(this.options.routeMasterSort);
-            }
-
-            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 = routeMaster.name;
-                a.onclick = (function(routeMasterName) {
-                    return function() {
-                        routeMasterRouteLists[activeRouteMaster].style.display = "none";
-                        routeMasterRouteLists[routeMasterName].style.display = "block";
-                        activeRouteMaster = routeMasterName;
-                    };
-                })(routeMasterName);
-
-                // The route lists
-
-                var routeList = this._createRouteList(routeMaster);
-                routeMasterRouteLists[routeMasterName] = routeList;
-
-                routeList.style.display = "none";
-
-                this._div.appendChild(routeList);
-            }
-
-            var activeRouteMaster = "U1"; // TODO: Dont hardcode like this
-
-            routeMasterRouteLists[activeRouteMaster].style.display = "block";
-
-            return this._div;
-        },
-        _createRouteList: function(routeMaster) {
-            var div = L.DomUtil.create('div', null);
-
-            var ul = L.DomUtil.create('ul', 'ls-route-list', div);
-
-            var routeLayer = this._routeLayer;
-
-            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.borderColor = route.properties.colour;
-                a.style.background = route.properties.colour;
-
-                a.textContent = route.properties.ref;
-                a.onclick = (function(routeName) {
-                    return function() {
-                        stopLists[activeStopList].style.display = "none";
-                        stopLists[routeName].style.display = "block";
-                        activeStopList = routeName;
-                    };
-                })(route.properties.name);
-
-                a.onmouseover = (function(name) {
-                    return function() {
-                        routeLayer.highlightRoute(name);
-                    };
-                })(route.properties.name);
-                a.onmouseout = (function(name) {
-                    return function() {
-                        routeLayer.resetRoute(name);
-                    };
-                })(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";
-
-            return div;
-        },
-        _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);
-
-            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() {
-                            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";
-                }
-            }
-
-            return div;
-        }
-    });
-
     // Custom Hash Support
 
     if ("Hash" in L) {