-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
178 lines (160 loc) · 4.37 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
const map = L.map("map");
const searchInput = document.getElementById("search");
const searchForm = document.getElementById("search-form");
// Automatically set searchInput value from queryParam lineRef
const urlParams = new URLSearchParams(window.location.search);
const lineRef = urlParams.get("lineRef");
if (lineRef) {
searchInput.value = lineRef;
}
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
L.control
.locate({
flyTo: true,
initialZoomLevel: 13,
})
.addTo(map);
const markers = L.layerGroup();
const BusIconBase = L.Icon.extend({
options: {
iconSize: [25, 25],
shadowSize: [0, 0],
iconAnchor: [25 / 2, 25 / 2],
popupAnchor: [0, -10],
},
});
const BusIcon = new BusIconBase({
iconUrl: "bus.svg",
});
map.on("click", (e) => {
console.debug("Clicked", e.latlng);
});
map.on("load", async () => {
await renderBusses(searchInput.value);
map.addLayer(markers);
});
map.setView([60.37, 5.294], 11);
searchForm.addEventListener("submit", (e) => {
e.preventDefault();
renderBusses(searchInput.value);
// set queryParam for lineRef
updateQueryParamForLineRef(searchInput.value);
});
/**
* @param {string} lineRef
*/
function updateQueryParamForLineRef(lineRef) {
const url = new URL(window.location);
if (lineRef) {
url.searchParams.set("lineRef", lineRef);
} else {
url.searchParams.delete("lineRef");
}
window.history.pushState({}, "", url);
}
/**
* Check out entur API for more info
* https://api.entur.io/graphql-explorer/vehicles?query=%7B%0A%20%20vehicles%28codespaceId%3A%20%22SKY%22%29%20%7B%0A%20%20%20%20line%20%7B%0A%20%20%20%20%20%20lineRef%0A%20%20%20%20%20%20lineName%0A%20%20%20%20%20%20publicCode%0A%20%20%20%20%7D%0A%20%20%20%20lastUpdated%0A%20%20%20%20location%20%7B%0A%20%20%20%20%20%20latitude%0A%20%20%20%20%20%20longitude%0A%20%20%20%20%7D%0A%20%20%20%20codespace%20%7B%0A%20%20%20%20%20%20codespaceId%0A%20%20%20%20%7D%0A%20%20%20%20delay%0A%20%20%20%20originName%0A%20%20%20%20vehicleId%0A%20%20%20%20destinationName%0A%20%20%20%20bearing%0A%20%20%7D%0A%7D%0A
*/
async function renderBusses(lineRef) {
const jsonData = await fetchBusData(lineRef);
const busses = jsonData.data.vehicles;
markers.clearLayers();
busses.forEach((bus) => {
const marker = L.marker([bus.location.latitude, bus.location.longitude], {
rotationAngle: bus.bearing + 90,
icon: BusIcon,
});
marker.bindPopup(`
<div class="popup">
<h2>${bus.line.lineRef} (${getTimeSinceLastUpdateInMinutes(
bus.lastUpdated
)}m ago)</h2>
<pre>
${JSON.stringify(bus, null, 2)}
</pre>
</div>
`);
markers.addLayer(marker);
});
}
/**
*
* @param {string} lineRef
* @returns {Promise<Busses>}
*/
async function fetchBusData(lineRef) {
const data = await fetch(
"https://api.entur.io/realtime/v1/vehicles/graphql",
{
method: "POST",
body: JSON.stringify({
query: `
{
vehicles(codespaceId: "SKY"${
lineRef ? ', lineRef : "' + lineRef + '"' : ""
}) {
line {
lineRef
lineName
publicCode
}
lastUpdated
location {
latitude
longitude
}
codespace {
codespaceId
}
delay
originName
vehicleId
destinationName
bearing
}
}`,
variables: null,
}),
}
);
return data.json();
}
/**
*
* @param {Date | string} lastUpdated
* @returns {number}
*/
function getTimeSinceLastUpdateInMinutes(lastUpdated) {
const now = new Date();
const lastUpdatedDate = new Date(lastUpdated);
const diff = now.getTime() - lastUpdatedDate.getTime();
return Math.round(diff / 1000 / 60);
}
/**
* @typedef {object} Busses
* @property {object} data
* @property {Bus[]} data.vehicles
*/
/**
* @typedef {object} Bus
* @property {object} line
* @property {string} line.lineRef
* @property {string} line.lineName
* @property {string} line.publicCode
* @property {string | Date} lastUpdated
* @property {object} location
* @property {number} location.latitude
* @property {number} location.longitude
* @property {object} codespace
* @property {string} codespace.codespaceId
* @property {number} delay
* @property {string} originName
* @property {string} vehicleId
* @property {string} destinationName
* @property {number} bearing
*/