Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
f2cc9a9783
|
||
|
|
0c1aeebdf7
|
||
|
|
3324a57206
|
||
|
|
cf8e6882f8
|
||
|
|
6c4959deda
|
||
|
|
e00b5576e6
|
||
|
|
e06b9d5109
|
11
dist/assets/index.148d1b99.js
vendored
Normal file
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
11
dist/assets/index.b64a86a4.js
vendored
11
dist/assets/index.b64a86a4.js
vendored
File diff suppressed because one or more lines are too long
2
dist/index.html
vendored
2
dist/index.html
vendored
@@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Road2Bitcoin Live Map</title>
|
||||
<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 type="module" crossorigin src="/assets/index.148d1b99.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index.eed9f443.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
98921
geo/route.json
98921
geo/route.json
File diff suppressed because it is too large
Load Diff
201
main.js
201
main.js
@@ -13,7 +13,8 @@ import geojsonPOI from './geo/poi.json'
|
||||
|
||||
useGeographic();
|
||||
|
||||
const styles = {
|
||||
async function main() {
|
||||
const styles = {
|
||||
lineOrange: new Style({
|
||||
stroke: new Stroke({
|
||||
color: '#FF9900',
|
||||
@@ -54,75 +55,77 @@ const styles = {
|
||||
}),
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Route
|
||||
//
|
||||
//
|
||||
// Route
|
||||
//
|
||||
|
||||
const lastStageFinished = 4;
|
||||
const stagesCompleted = geojsonRoute.features.slice(0, lastStageFinished);
|
||||
const stagesAhead = geojsonRoute.features.slice(lastStageFinished);
|
||||
const vectorSourceStagesCompleted = new VectorSource();
|
||||
const vectorSourceStagesAhead = new VectorSource();
|
||||
const tourStatus = await fetch('https://r2b22.kip.pe/status.json').then(res => res.json());
|
||||
|
||||
for (const stage of stagesCompleted) {
|
||||
const lastStageFinished = tourStatus.lastStageFinished;
|
||||
const stagesCompleted = geojsonRoute.features.slice(0, lastStageFinished);
|
||||
const stagesAhead = geojsonRoute.features.slice(lastStageFinished);
|
||||
const vectorSourceStagesCompleted = new VectorSource();
|
||||
const vectorSourceStagesAhead = new VectorSource();
|
||||
|
||||
for (const stage of stagesCompleted) {
|
||||
vectorSourceStagesCompleted.addFeature(new GeoJSON().readFeature(stage));
|
||||
}
|
||||
for (const stage of stagesAhead) {
|
||||
}
|
||||
for (const stage of stagesAhead) {
|
||||
vectorSourceStagesAhead.addFeature(new GeoJSON().readFeature(stage));
|
||||
}
|
||||
}
|
||||
|
||||
const stagesCompletedLayer = new VectorLayer({
|
||||
const stagesCompletedLayer = new VectorLayer({
|
||||
source: vectorSourceStagesCompleted,
|
||||
style: styles.lineOrange
|
||||
});
|
||||
});
|
||||
|
||||
const stagesAheadLayer = new VectorLayer({
|
||||
const stagesAheadLayer = new VectorLayer({
|
||||
source: vectorSourceStagesAhead,
|
||||
style: styles.lineGrey
|
||||
});
|
||||
});
|
||||
|
||||
//
|
||||
// Points of Interest
|
||||
//
|
||||
//
|
||||
// Points of Interest
|
||||
//
|
||||
|
||||
const vectorSourcePOI = new VectorSource({
|
||||
const vectorSourcePOI = new VectorSource({
|
||||
features: new GeoJSON().readFeatures(geojsonPOI),
|
||||
});
|
||||
});
|
||||
|
||||
const poiLayer = new VectorLayer({
|
||||
const poiLayer = new VectorLayer({
|
||||
source: vectorSourcePOI,
|
||||
style: styles.circleBlack,
|
||||
});
|
||||
});
|
||||
|
||||
const vectorSourceTrackedPoints = new VectorSource();
|
||||
const vectorSourceTrackedPoints = new VectorSource();
|
||||
|
||||
const vanFeature= new Feature({
|
||||
const vanFeature= new Feature({
|
||||
geometry: new Point([8.918618, 44.407408]),
|
||||
name: 'Support Van',
|
||||
trackable: true
|
||||
});
|
||||
});
|
||||
|
||||
vectorSourceTrackedPoints.addFeature(vanFeature);
|
||||
vectorSourceTrackedPoints.addFeature(vanFeature);
|
||||
|
||||
const trackedPointsLayer = new VectorLayer({
|
||||
const trackedPointsLayer = new VectorLayer({
|
||||
source: vectorSourceTrackedPoints,
|
||||
style: styles.iconVan
|
||||
});
|
||||
});
|
||||
|
||||
//
|
||||
// Map initialization
|
||||
//
|
||||
//
|
||||
// Map initialization
|
||||
//
|
||||
|
||||
const view = new View({
|
||||
const view = new View({
|
||||
center: [10.6, 46.9],
|
||||
zoom: 6.6
|
||||
})
|
||||
})
|
||||
|
||||
window.view = view;
|
||||
window.view = view;
|
||||
|
||||
const map = new Map({
|
||||
const map = new Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
new TileLayer({
|
||||
@@ -134,50 +137,59 @@ const map = new Map({
|
||||
trackedPointsLayer
|
||||
],
|
||||
view: view
|
||||
});
|
||||
});
|
||||
|
||||
//
|
||||
// Popups
|
||||
//
|
||||
const popupEl = document.getElementById('popup');
|
||||
//
|
||||
// Center map on current/next stage
|
||||
//
|
||||
|
||||
const popup = new Overlay({
|
||||
setTimeout(() => {
|
||||
const nextStageFeature = new GeoJSON().readFeature(stagesAhead[0]);
|
||||
view.fit(nextStageFeature.getGeometry(), {
|
||||
maxZoom: 10,
|
||||
duration: 1000
|
||||
});
|
||||
}, 3000);
|
||||
|
||||
//
|
||||
// Popups
|
||||
//
|
||||
const popupEl = document.getElementById('popup');
|
||||
|
||||
const popup = new Overlay({
|
||||
element: popupEl,
|
||||
positioning: 'bottom-center',
|
||||
stopEvent: false,
|
||||
});
|
||||
map.addOverlay(popup);
|
||||
});
|
||||
map.addOverlay(popup);
|
||||
|
||||
let popover;
|
||||
function disposePopover() {
|
||||
let popover;
|
||||
function disposePopover() {
|
||||
if (popover) {
|
||||
popover.dispose();
|
||||
popover = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createPopoverHtml(feature) {
|
||||
function createPopoverHtml(feature) {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'popover-content';
|
||||
const title = document.createElement('div');
|
||||
title.textContent = feature.get('name');
|
||||
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));
|
||||
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);
|
||||
// linkParent.append(followLink);
|
||||
// container.append(linkParent);
|
||||
// }
|
||||
}
|
||||
|
||||
return container.innerHTML;
|
||||
}
|
||||
|
||||
// display popup on click
|
||||
map.on('click', function (evt) {
|
||||
// display popup on click
|
||||
map.on('click', function (evt) {
|
||||
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
|
||||
return feature;
|
||||
});
|
||||
@@ -192,42 +204,44 @@ map.on('click', function (evt) {
|
||||
content: createPopoverHtml(feature)
|
||||
});
|
||||
popover.show();
|
||||
});
|
||||
});
|
||||
|
||||
// change mouse cursor when over marker
|
||||
map.on('pointermove', function (evt) {
|
||||
// change mouse cursor when over marker
|
||||
map.on('pointermove', function (evt) {
|
||||
map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel)
|
||||
? 'pointer'
|
||||
: '';
|
||||
});
|
||||
});
|
||||
|
||||
// Close the popup when the map is moved
|
||||
map.on('movestart', disposePopover);
|
||||
// Close the popup when the map is moved
|
||||
map.on('movestart', disposePopover);
|
||||
|
||||
|
||||
//
|
||||
// Tracking
|
||||
//
|
||||
//
|
||||
// Tracking
|
||||
//
|
||||
|
||||
const updateInterval = 5000;
|
||||
let followedFeature = vanFeature;
|
||||
// let followedFeature = null;
|
||||
const updateInterval = 5000;
|
||||
// let followedFeature = vanFeature;
|
||||
// let followedZoomed = false;
|
||||
// let followedFeature = null;
|
||||
|
||||
function startFollowing(feature, followLink) {
|
||||
function startFollowing(feature, followLink) {
|
||||
followedFeature = feature;
|
||||
followLink.textContent = 'Stop following';
|
||||
// followLink.removeEventListener('click', startFollowing);
|
||||
followLink.addEventListener('click', stopFollowing(feature, followLink));
|
||||
}
|
||||
}
|
||||
|
||||
function stopFollowing(feature, followLink) {
|
||||
function stopFollowing(feature, followLink) {
|
||||
followedFeature = null;
|
||||
followedZoomed = false;
|
||||
followLink.textContent = 'Stop following';
|
||||
// followLink.removeEventListener('click', stopFollowing);
|
||||
followLink.addEventListener('click', startFollowing(feature, followLink));
|
||||
}
|
||||
}
|
||||
|
||||
function updateData(startInterval=false) {
|
||||
function updateData(startInterval=false) {
|
||||
fetch('https://r2b22.kip.pe/last.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
@@ -235,18 +249,27 @@ function updateData(startInterval=false) {
|
||||
const coords = [data.lon, data.lat];
|
||||
vanFeature.getGeometry().setCoordinates(coords);
|
||||
|
||||
if (followedFeature) {
|
||||
view.animate({
|
||||
center: followedFeature.getGeometry().getCoordinates(),
|
||||
duration: 500,
|
||||
zoom: 13
|
||||
});
|
||||
}
|
||||
// let zoomLevel;
|
||||
// if (!followedZoomed) {
|
||||
// zoomLevel = 13;
|
||||
// followedZoomed = true;
|
||||
// }
|
||||
|
||||
// if (followedFeature) {
|
||||
// view.animate({
|
||||
// center: followedFeature.getGeometry().getCoordinates(),
|
||||
// duration: 500,
|
||||
// zoom: zoomLevel
|
||||
// });
|
||||
// }
|
||||
});
|
||||
|
||||
if (startInterval) {
|
||||
setInterval(updateData, updateInterval);
|
||||
}
|
||||
}
|
||||
|
||||
updateData(true);
|
||||
}
|
||||
|
||||
updateData(true);
|
||||
main();
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "ol-vite",
|
||||
"version": "1.1.0",
|
||||
"version": "1.3.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "ol-vite",
|
||||
"version": "1.1.0",
|
||||
"version": "1.3.0",
|
||||
"dependencies": {
|
||||
"ol": "latest"
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "map",
|
||||
"version": "1.1.0",
|
||||
"version": "1.3.0",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"build": "vite build",
|
||||
|
||||
Reference in New Issue
Block a user