summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChristopher Baines <cb15g11@soton.ac.uk>2014-08-04 18:59:32 +0100
committerChristopher Baines <cb15g11@soton.ac.uk>2014-08-06 22:42:30 +0100
commit5b48b6172c9d88d4d3290c37def92efda0a60059 (patch)
treefc1ef83b88bb4770c03451a52bfe5154c9bbdd29
parentdeb8f4ac1eb06221783ead9ff71bbddf6823c651 (diff)
downloadleaflet-soton-5b48b6172c9d88d4d3290c37def92efda0a60059.tar
leaflet-soton-5b48b6172c9d88d4d3290c37def92efda0a60059.tar.gz
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.
Diffstat
-rw-r--r--examples/bus.html5
-rw-r--r--resources/leaflet-route/leaflet-route.js318
-rw-r--r--src/leaflet-soton.js373
3 files changed, 364 insertions, 332 deletions
diff --git a/examples/bus.html b/examples/bus.html
index a936262..17daae9 100644
--- a/examples/bus.html
+++ b/examples/bus.html
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../resources/leaflet-locatecontrol/src/L.Control.Locate.css" />
+ <link rel="stylesheet" href="../resources/leaflet-sidebar/src/L.Control.Sidebar.css" />
<link rel="stylesheet" href="../resources/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="../src/leaflet-soton.css" />
@@ -23,12 +24,16 @@
<body>
<div id="map"></div>
+ <div id="sidebar"></div>
+
<script src="../resources/leaflet/dist/leaflet-src.js"></script>
<script src="../resources/leaflet-markercluster/dist/leaflet.markercluster.js"></script>
<script src="../resources/leaflet-locatecontrol/src/L.Control.Locate.js"></script>
<script src="../resources/leaflet-hash/leaflet-hash.js"></script>
<script src="../resources/leaflet-textpath/leaflet.textpath.js"></script>
<script src="../resources/leaflet-indoor/leaflet-indoor.js"></script>
+ <script src="../resources/leaflet-sidebar/src/L.Control.Sidebar.js"></script>
+ <script src="../resources/leaflet-route/leaflet-route.js"></script>
<script src="../src/leaflet-soton.js"></script>
diff --git a/resources/leaflet-route/leaflet-route.js b/resources/leaflet-route/leaflet-route.js
new file mode 100644
index 0000000..501a620
--- /dev/null
+++ b/resources/leaflet-route/leaflet-route.js
@@ -0,0 +1,318 @@
+
+L.Route = 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);
+ },
+ resetRoutes: function() {
+ Object.keys(this._routeLayers).forEach(this.resetRoute, this);
+ },
+ 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);
+ }
+});
+
+L.Control.Route = L.Control.Sidebar.extend({
+ initialize: function (routeLayer, placeholder, options) {
+ L.Control.Sidebar.prototype.initialize.call(this, placeholder, options);
+ L.setOptions(this, options);
+
+ this._routeLayer = routeLayer;
+
+ var title = L.DomUtil.create('div', 'ls-routes-title', this._contentContainer);
+ title.textContent = "University Bus Routes";
+
+ var routeMasters = this._routeLayer.getRouteMasters();
+
+ var routeMasterRouteLists = {};
+
+ var ul = L.DomUtil.create('ul', 'ls-route-master-list', this._contentContainer);
+
+ 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._contentContainer.appendChild(routeList);
+ }
+
+ 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;
+
+ 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() {
+ routeLayer.resetRoutes();
+ stopLists[activeStopList].style.display = "none";
+ stopLists[routeName].style.display = "block";
+ activeStopList = routeName;
+ routeLayer.highlightRoute(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;
+ },
+ _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;
+ }
+});
+
+L.Control.ShowRouteSidebar = L.Control.extend({
+ options: {
+ position: 'topleft',
+ },
+
+ initialize: function(sidebar, options) {
+ this._sidebar = sidebar;
+ },
+
+ onAdd: function (map) {
+ var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
+
+ var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
+ link.href = '#';
+
+ var sidebar = this._sidebar;
+
+ L.DomEvent
+ .on(link, 'click', L.DomEvent.stopPropagation)
+ .on(link, 'click', L.DomEvent.preventDefault)
+ .on(link, 'click', function() {
+ sidebar.toggle();
+ })
+ .on(link, 'dblclick', L.DomEvent.stopPropagation);
+
+ return container;
+ }
+});
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) {
generated by cgit v1.2.3 (git 2.25.4) at 2024-05-02 06:11:25 +0000