diff --git a/geo/legacy-route.json b/data/legacy-route.json
similarity index 100%
rename from geo/legacy-route.json
rename to data/legacy-route.json
diff --git a/geo/r2b22-poi.json b/data/r2b22-poi.json
similarity index 100%
rename from geo/r2b22-poi.json
rename to data/r2b22-poi.json
diff --git a/geo/r2b22-route.json b/data/r2b22-route.json
similarity index 100%
rename from geo/r2b22-route.json
rename to data/r2b22-route.json
diff --git a/index.html b/index.html
index 74fec79..ae330c5 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
+
diff --git a/main.js b/main.js
index 6f33c1d..71c9c9c 100644
--- a/main.js
+++ b/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) {
diff --git a/public/img/avatars/raucao.png b/public/img/avatars/raucao.png
deleted file mode 100644
index 2761dab..0000000
Binary files a/public/img/avatars/raucao.png and /dev/null differ
diff --git a/public/img/avatars/tobyyoungfox.jpg b/public/img/avatars/tobyyoungfox.jpg
deleted file mode 100644
index e4e76e8..0000000
Binary files a/public/img/avatars/tobyyoungfox.jpg and /dev/null differ
diff --git a/style.css b/style.css
index 8a920c9..4781dec 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,7 @@ html, body {
margin: 0;
height: 100%;
}
+
#map {
position: absolute;
top: 0;