Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
1dc218ca8a
|
||
|
|
bfd9b4fdf6
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
dist/img/avatars/raucao.png
vendored
BIN
dist/img/avatars/raucao.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 260 KiB |
BIN
dist/img/avatars/tobyyoungfox.jpg
vendored
BIN
dist/img/avatars/tobyyoungfox.jpg
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
3
dist/index.html
vendored
3
dist/index.html
vendored
@@ -7,11 +7,12 @@
|
||||
<title>Road2Bitcoin Live Map</title>
|
||||
<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>
|
||||
<script type="module" crossorigin src="/assets/index.24fe7964.js"></script>
|
||||
<script type="module" crossorigin src="/assets/index.2d0ee7b9.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index.eed9f443.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"><div id="popup"></div></div>
|
||||
<div id="people"></div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"><div id="popup"></div></div>
|
||||
<div id="people"></div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script type="module" src="./main.js"></script>
|
||||
</body>
|
||||
|
||||
68
main.js
68
main.js
@@ -8,9 +8,9 @@ import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
|
||||
import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style';
|
||||
import {OSM, Vector as VectorSource} from 'ol/source';
|
||||
import {useGeographic} from 'ol/proj';
|
||||
import geojsonRoute from './geo/r2b22-route.json'
|
||||
import geojsonPOI from './geo/r2b22-poi.json';
|
||||
import geojsonLegacy from './geo/legacy-route.json';
|
||||
import geojsonRoute from './data/r2b22-route.json'
|
||||
import geojsonPOI from './data/r2b22-poi.json';
|
||||
import geojsonLegacy from './data/legacy-route.json';
|
||||
|
||||
useGeographic();
|
||||
|
||||
@@ -230,53 +230,49 @@ async function main() {
|
||||
// Close the popup when the map is moved
|
||||
map.on('movestart', disposePopover);
|
||||
|
||||
|
||||
//
|
||||
// Tracking
|
||||
//
|
||||
|
||||
const updateInterval = 5000;
|
||||
// let followedFeature = vanFeature;
|
||||
// let followedZoomed = false;
|
||||
// let followedFeature = null;
|
||||
const updateInterval = 10000;
|
||||
const peopleOverlays = {};
|
||||
|
||||
function startFollowing(feature, followLink) {
|
||||
followedFeature = feature;
|
||||
followLink.textContent = 'Stop following';
|
||||
// followLink.removeEventListener('click', startFollowing);
|
||||
followLink.addEventListener('click', stopFollowing(feature, followLink));
|
||||
function createParticipantHTML (name) {
|
||||
if (document.getElementById(`user-${name}`)) return;
|
||||
const el = document.createElement('img');
|
||||
el.src = `https://r2b22.kip.pe/avatars/${name}.png`;
|
||||
el.id = `user-${name}`;
|
||||
el.style = 'width: 40px; height: 40px; border-radius: 20px;';
|
||||
document.getElementById('people').append(el);
|
||||
}
|
||||
|
||||
function stopFollowing(feature, followLink) {
|
||||
followedFeature = null;
|
||||
followedZoomed = false;
|
||||
followLink.textContent = 'Stop following';
|
||||
// followLink.removeEventListener('click', stopFollowing);
|
||||
followLink.addEventListener('click', startFollowing(feature, followLink));
|
||||
function createParticipantOverlay (name) {
|
||||
if (peopleOverlays[name]) return;
|
||||
const overlayElement = new Overlay({
|
||||
stopEvent: false,
|
||||
positioning: 'center-center',
|
||||
element: document.getElementById(`user-${name}`)
|
||||
});
|
||||
peopleOverlays[name] = overlayElement;
|
||||
map.addOverlay(overlayElement);
|
||||
}
|
||||
|
||||
function updateData(startInterval=false) {
|
||||
fetch('https://r2b22.kip.pe/last.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
const van_data = data.find(i => i.name == 'satoshithevan');
|
||||
const van_coords = [van_data.lon, van_data.lat];
|
||||
vanFeature.getGeometry().setCoordinates(van_coords);
|
||||
// console.debug(data);
|
||||
const vanData = data.find(i => i.name == 'satoshithevan');
|
||||
const vanCoords = [vanData.lon, vanData.lat];
|
||||
vanFeature.getGeometry().setCoordinates(vanCoords);
|
||||
|
||||
// let zoomLevel;
|
||||
// if (!followedZoomed) {
|
||||
// zoomLevel = 13;
|
||||
// followedZoomed = true;
|
||||
// }
|
||||
|
||||
// if (followedFeature) {
|
||||
// view.animate({
|
||||
// center: followedFeature.getGeometry().getCoordinates(),
|
||||
// duration: 500,
|
||||
// zoom: zoomLevel
|
||||
// });
|
||||
// }
|
||||
for (const item of data) {
|
||||
if (!tourStatus.participants.includes(item.name)) continue;
|
||||
createParticipantHTML(item.name);
|
||||
createParticipantOverlay(item.name);
|
||||
const overlay = peopleOverlays[item.name];
|
||||
overlay.setPosition([item.lon, item.lat]);
|
||||
}
|
||||
});
|
||||
|
||||
if (startInterval) {
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "ol-vite",
|
||||
"version": "1.6.0",
|
||||
"version": "1.7.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "ol-vite",
|
||||
"version": "1.6.0",
|
||||
"version": "1.7.0",
|
||||
"dependencies": {
|
||||
"ol": "latest"
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "map",
|
||||
"version": "1.6.0",
|
||||
"version": "1.7.0",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"build": "vite build",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Reference in New Issue
Block a user