Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bus stop routes overview: colours distinguishing up/downroute #64

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
+446 −278
Open

Bus stop routes overview: colours distinguishing up/downroute #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6b98c10
.prettierrc
emer7 Jan 25, 2022
29a48db
package-lock.json
emer7 Jan 25, 2022
812283f
Initial distinguished color between up/down-route
emer7 Jan 25, 2022
0c8f1be
Refactor route and loop related calculation to util file
emer7 Jan 27, 2022
e291639
Use a more accurate calculation to find the midpoint of a loop
emer7 Jan 27, 2022
d9297c3
Remove leftover console.log
emer7 Jan 27, 2022
b90bf3d
Refactor calculation to util
emer7 Jan 27, 2022
c46fce1
Extend differentiated coloring to all other route displays
emer7 Jan 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"tabWidth": 2,
"useTabs": false,
"trailingComma": "all",
"arrowParens": "always",
"singleQuote": true
}
161 changes: 107 additions & 54 deletions assets/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import getRoute from './utils/getRoute';
import getDistance from './utils/getDistance';
import getWalkingMinutes from './utils/getWalkingMinutes';
import usePrevious from './utils/usePrevious';
import { getGeometriesForLoop } from './utils/routesCalculation';

import Ad from './ad';
import About from './components/About';
Expand Down Expand Up @@ -537,13 +538,22 @@ const App = () => {
previewRAF = requestAnimationFrame(() => {
const routes = routesData[service];
const geometries = routes.map((route) => toGeoJSON(route));

const { name: serviceName, routes: serviceStops } = servicesData[service];
const isLoop = serviceName.includes('⟲');

const geometriesToBeMapped = isLoop
? getGeometriesForLoop(serviceStops, geometries, stopsData, ruler)
: geometries;

map.getSource('routes-path').setData({
type: 'FeatureCollection',
features: geometries.map((geometry) => ({
features: geometriesToBeMapped.map((geometry, direction) => ({
type: 'Feature',
id: encode(service),
properties: {
service,
direction,
},
geometry,
})),
Expand Down Expand Up @@ -815,11 +825,22 @@ const App = () => {
requestAnimationFrame(() => {
const routes = routesData[service];
const geometries = routes.map((route) => toGeoJSON(route));

const { name: serviceName, routes: serviceStops } =
servicesData[service];
const isLoop = serviceName.includes('⟲');

const geometriesToBeMapped = isLoop
? getGeometriesForLoop(serviceStops, geometries, stopsData, ruler)
: geometries;

map.getSource('routes').setData({
type: 'FeatureCollection',
features: geometries.map((geometry) => ({
features: geometriesToBeMapped.map((geometry, direction) => ({
type: 'Feature',
properties: {},
properties: {
direction,
},
geometry,
})),
});
Expand All @@ -840,23 +861,40 @@ const App = () => {
let endStops = [];
let serviceGeometries = [];
services.forEach((service) => {
const { routes } = servicesData[service];
endStops.push(routes[0][0], routes[0][routes[0].length - 1]);
if (routes[1]) {
endStops.push(routes[1][0], routes[1][routes[1].length - 1]);
}
const allRoutes = [...routes[0], ...(routes[1] || [])].filter(
(el, pos, arr) => {
return arr.indexOf(el) === pos;
},
const { name: serviceName, routes: serviceStops } =
servicesData[service];
endStops.push(
serviceStops[0][0],
serviceStops[0][serviceStops[0].length - 1],
);
if (serviceStops[1]) {
endStops.push(
serviceStops[1][0],
serviceStops[1][serviceStops[1].length - 1],
);
}
const allRoutes = [
...serviceStops[0],
...(serviceStops[1] || []),
].filter((el, pos, arr) => {
return arr.indexOf(el) === pos;
});
routeStops = routeStops.concat(allRoutes);

const routeGeometries = routesData[service];
const routes = routesData[service];
const geometries = routes.map((route) => toGeoJSON(route));

const isLoop = serviceName.includes('⟲');

const routeGeometries = isLoop
? getGeometriesForLoop(serviceStops, geometries, stopsData, ruler)
: geometries;

serviceGeometries = serviceGeometries.concat(
routeGeometries.map((r) => ({
routeGeometries.map((geometry, direction) => ({
service,
geometry: toGeoJSON(r),
geometry,
direction,
})),
);
});
Expand Down Expand Up @@ -932,14 +970,17 @@ const App = () => {
requestAnimationFrame(() => {
map.getSource('routes-path').setData({
type: 'FeatureCollection',
features: serviceGeometries.map((sg) => ({
type: 'Feature',
id: encode(sg.service),
properties: {
service: sg.service,
},
geometry: sg.geometry,
})),
features: serviceGeometries.map(
({ service, geometry, direction }) => ({
type: 'Feature',
id: encode(service),
properties: {
service,
direction,
},
geometry,
}),
),
});
STORE.routesPathServices = serviceGeometries.map(
(sg) => sg.service,
Expand Down Expand Up @@ -1034,26 +1075,44 @@ const App = () => {

// Show all routes
requestAnimationFrame(() => {
const serviceGeometries = routes.map((route) => {
const [service, index] = route.split('-');
const line = routesData[service][index];
const geometry = toGeoJSON(line);
return {
const serviceGeometries = routes.flatMap((passingRoute) => {
const [service, index] = passingRoute.split('-');
const route = routesData[service][index];
const geometry = toGeoJSON(route);

const { name: serviceName, routes: serviceStops } =
servicesData[service];
const isLoop = serviceName.includes('⟲');

const routeGeometries = isLoop
? getGeometriesForLoop(
serviceStops,
[geometry],
stopsData,
ruler,
)
: [geometry];

return routeGeometries.map((routeGeometry, directionIndex) => ({
service,
geometry,
};
geometry: routeGeometry,
direction: isLoop ? directionIndex : parseInt(index),
}));
});

map.getSource('routes-path').setData({
type: 'FeatureCollection',
features: serviceGeometries.map((sg, i) => ({
type: 'Feature',
id: encode(sg.service),
properties: {
service: sg.service,
},
geometry: sg.geometry,
})),
features: serviceGeometries.map(
({ service, geometry, direction }) => ({
type: 'Feature',
id: encode(service),
properties: {
service,
direction,
},
geometry,
}),
),
});
STORE.routesPathServices = serviceGeometries.map(
(sg) => sg.service,
Expand Down Expand Up @@ -1845,17 +1904,14 @@ const App = () => {
'line-cap': 'round',
},
paint: {
'line-color': '#f01b48',
'line-gradient': [
'interpolate',
['linear'],
['line-progress'],
'line-color': [
'match',
['get', 'direction'],
0,
'#f01b48',
0.5,
'#972FFE',
1,
'#f01b48',
'#05A8AA',
'#000000',
],
'line-opacity': [
'interpolate',
Expand Down Expand Up @@ -1980,17 +2036,14 @@ const App = () => {
'line-cap': 'round',
},
paint: {
'line-color': '#f01b48',
'line-gradient': [
'interpolate',
['linear'],
['line-progress'],
'line-color': [
'match',
['get', 'direction'],
0,
'#f01b48',
0.5,
'#972FFE',
1,
'#f01b48',
'#05A8AA',
'#000000',
],
'line-opacity': [
'case',
Expand Down
Loading