9 Commits

Author SHA1 Message Date
Râu Cao
0d66bc1266 1.4.0 2022-09-11 12:31:26 +02:00
Râu Cao
ba3982d9a6 Add plausible analytics script 2022-09-11 12:30:52 +02:00
Râu Cao
f2cc9a9783 1.3.0 2022-09-09 20:29:41 +02:00
Râu Cao
0c1aeebdf7 Load current tour status from server 2022-09-09 20:29:18 +02:00
Râu Cao
3324a57206 Update route 2022-09-09 20:29:00 +02:00
Râu Cao
cf8e6882f8 1.2.1 2022-09-08 09:49:18 +02:00
Râu Cao
6c4959deda Hackety hack, no time 2022-09-08 09:48:51 +02:00
Râu Cao
e00b5576e6 1.2.0 2022-09-06 21:09:39 +02:00
Râu Cao
e06b9d5109 MVP 2022-09-06 21:09:06 +02:00
9 changed files with 46582 additions and 52826 deletions

11
dist/assets/index.148d1b99.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

3
dist/index.html vendored
View File

@@ -6,7 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Road2Bitcoin Live Map</title> <title>Road2Bitcoin Live Map</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<script type="module" crossorigin src="/assets/index.b64a86a4.js"></script> <script defer data-domain="r2b22.kip.pe" src="https://plausible.io/js/plausible.js"></script>
<script type="module" crossorigin src="/assets/index.148d1b99.js"></script>
<link rel="stylesheet" href="/assets/index.eed9f443.css"> <link rel="stylesheet" href="/assets/index.eed9f443.css">
</head> </head>
<body> <body>

File diff suppressed because it is too large Load Diff

View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Road2Bitcoin Live Map</title> <title>Road2Bitcoin Live Map</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<script defer data-domain="r2b22.kip.pe" src="https://plausible.io/js/plausible.js"></script>
</head> </head>
<body> <body>
<div id="map"><div id="popup"></div></div> <div id="map"><div id="popup"></div></div>

65
main.js
View File

@@ -13,6 +13,7 @@ import geojsonPOI from './geo/poi.json'
useGeographic(); useGeographic();
async function main() {
const styles = { const styles = {
lineOrange: new Style({ lineOrange: new Style({
stroke: new Stroke({ stroke: new Stroke({
@@ -60,7 +61,9 @@ const styles = {
// Route // Route
// //
const lastStageFinished = 4; const tourStatus = await fetch('https://r2b22.kip.pe/status.json').then(res => res.json());
const lastStageFinished = tourStatus.lastStageFinished;
const stagesCompleted = geojsonRoute.features.slice(0, lastStageFinished); const stagesCompleted = geojsonRoute.features.slice(0, lastStageFinished);
const stagesAhead = geojsonRoute.features.slice(lastStageFinished); const stagesAhead = geojsonRoute.features.slice(lastStageFinished);
const vectorSourceStagesCompleted = new VectorSource(); const vectorSourceStagesCompleted = new VectorSource();
@@ -136,6 +139,18 @@ const map = new Map({
view: view view: view
}); });
//
// Center map on current/next stage
//
setTimeout(() => {
const nextStageFeature = new GeoJSON().readFeature(stagesAhead[0]);
view.fit(nextStageFeature.getGeometry(), {
maxZoom: 10,
duration: 1000
});
}, 3000);
// //
// Popups // Popups
// //
@@ -158,22 +173,19 @@ function disposePopover() {
function createPopoverHtml(feature) { function createPopoverHtml(feature) {
const container = document.createElement('div'); const container = document.createElement('div');
container.className = 'popover-content';
const title = document.createElement('div'); const title = document.createElement('div');
title.textContent = feature.get('name'); title.textContent = feature.get('name');
container.append(title); container.append(title);
if (feature.get('trackable')) {
const linkParent = document.createElement('div');
const followLink = document.createElement('a');
followLink.textContent = "Follow";
followLink.addEventListener('click', console.log(feature, followLink));
// followLink.addEventListener('click', startFollowing(feature, followLink));
linkParent.append(followLink);
container.append(linkParent);
}
return container.innerHTML; return container.innerHTML;
// if (feature.get('trackable')) {
// const linkParent = document.createElement('div');
// const followLink = document.createElement('a');
// followLink.textContent = 'Follow';
// followLink.href = '#';
// followLink.addEventListener('click', startFollowing(feature, followLink));
// linkParent.append(followLink);
// container.append(linkParent);
// }
} }
// display popup on click // display popup on click
@@ -210,7 +222,8 @@ map.on('movestart', disposePopover);
// //
const updateInterval = 5000; const updateInterval = 5000;
let followedFeature = vanFeature; // let followedFeature = vanFeature;
// let followedZoomed = false;
// let followedFeature = null; // let followedFeature = null;
function startFollowing(feature, followLink) { function startFollowing(feature, followLink) {
@@ -222,6 +235,7 @@ function startFollowing(feature, followLink) {
function stopFollowing(feature, followLink) { function stopFollowing(feature, followLink) {
followedFeature = null; followedFeature = null;
followedZoomed = false;
followLink.textContent = 'Stop following'; followLink.textContent = 'Stop following';
// followLink.removeEventListener('click', stopFollowing); // followLink.removeEventListener('click', stopFollowing);
followLink.addEventListener('click', startFollowing(feature, followLink)); followLink.addEventListener('click', startFollowing(feature, followLink));
@@ -235,13 +249,19 @@ function updateData(startInterval=false) {
const coords = [data.lon, data.lat]; const coords = [data.lon, data.lat];
vanFeature.getGeometry().setCoordinates(coords); vanFeature.getGeometry().setCoordinates(coords);
if (followedFeature) { // let zoomLevel;
view.animate({ // if (!followedZoomed) {
center: followedFeature.getGeometry().getCoordinates(), // zoomLevel = 13;
duration: 500, // followedZoomed = true;
zoom: 13 // }
});
} // if (followedFeature) {
// view.animate({
// center: followedFeature.getGeometry().getCoordinates(),
// duration: 500,
// zoom: zoomLevel
// });
// }
}); });
if (startInterval) { if (startInterval) {
@@ -250,3 +270,6 @@ function updateData(startInterval=false) {
} }
updateData(true); updateData(true);
}
main();

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "ol-vite", "name": "ol-vite",
"version": "1.1.0", "version": "1.4.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "ol-vite", "name": "ol-vite",
"version": "1.1.0", "version": "1.4.0",
"dependencies": { "dependencies": {
"ol": "latest" "ol": "latest"
}, },

View File

@@ -1,6 +1,6 @@
{ {
"name": "map", "name": "map",
"version": "1.1.0", "version": "1.4.0",
"scripts": { "scripts": {
"start": "vite", "start": "vite",
"build": "vite build", "build": "vite build",