Add riders to map

This commit is contained in:
Râu Cao 2022-09-14 18:50:02 +02:00
parent 67707b7ded
commit bfd9b4fdf6
Signed by: raucao
GPG Key ID: 15E65F399D084BA9
8 changed files with 34 additions and 36 deletions

View File

@ -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
View File

@ -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) {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 260 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

@ -4,6 +4,7 @@ html, body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;