raucao/r2b22-map
raucao/r2b22-map
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Add riders to map

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
geo/legacy-route.json → data/legacy-route.json
View File

0
geo/r2b22-poi.json → data/r2b22-poi.json
View File

0
geo/r2b22-route.json → data/r2b22-route.json
View File

1
index.html
View File

@ -10,6 +10,7 @@
</head> </head>
<body> <body>
<div id="map"><div id="popup"></div></div> <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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="./main.js"></script> <script type="module" src="./main.js"></script>
</body> </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 {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style';
import {OSM, Vector as VectorSource} from 'ol/source'; import {OSM, Vector as VectorSource} from 'ol/source';
import {useGeographic} from 'ol/proj'; import {useGeographic} from 'ol/proj';
import geojsonRoute from './geo/r2b22-route.json' import geojsonRoute from './data/r2b22-route.json'
import geojsonPOI from './geo/r2b22-poi.json'; import geojsonPOI from './data/r2b22-poi.json';
import geojsonLegacy from './geo/legacy-route.json'; import geojsonLegacy from './data/legacy-route.json';
useGeographic(); useGeographic();
@ -230,53 +230,49 @@ async function main() {
// Close the popup when the map is moved // Close the popup when the map is moved
map.on('movestart', disposePopover); map.on('movestart', disposePopover);
// //
// Tracking // Tracking
// //
const updateInterval = 5000; const updateInterval = 10000;
// let followedFeature = vanFeature; const peopleOverlays = {};
// let followedZoomed = false;
// let followedFeature = null;
function startFollowing(feature, followLink) { function createParticipantHTML (name) {
followedFeature = feature; if (document.getElementById(`user-${name}`)) return;
followLink.textContent = 'Stop following'; const el = document.createElement('img');
// followLink.removeEventListener('click', startFollowing); el.src = `https://r2b22.kip.pe/avatars/${name}.png`;
followLink.addEventListener('click', stopFollowing(feature, followLink)); el.id = `user-${name}`;
el.style = 'width: 40px; height: 40px; border-radius: 20px;';
document.getElementById('people').append(el);
} }
function stopFollowing(feature, followLink) { function createParticipantOverlay (name) {
followedFeature = null; if (peopleOverlays[name]) return;
followedZoomed = false; const overlayElement = new Overlay({
followLink.textContent = 'Stop following'; stopEvent: false,
// followLink.removeEventListener('click', stopFollowing); positioning: 'center-center',
followLink.addEventListener('click', startFollowing(feature, followLink)); element: document.getElementById(`user-${name}`)
});
peopleOverlays[name] = overlayElement;
map.addOverlay(overlayElement);
} }
function updateData(startInterval=false) { function updateData(startInterval=false) {
fetch('https://r2b22.kip.pe/last.json') fetch('https://r2b22.kip.pe/last.json')
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
console.log(data); // console.debug(data);
const van_data = data.find(i => i.name == 'satoshithevan'); const vanData = data.find(i => i.name == 'satoshithevan');
const van_coords = [van_data.lon, van_data.lat]; const vanCoords = [vanData.lon, vanData.lat];
vanFeature.getGeometry().setCoordinates(van_coords); vanFeature.getGeometry().setCoordinates(vanCoords);
// let zoomLevel; for (const item of data) {
// if (!followedZoomed) { if (!tourStatus.participants.includes(item.name)) continue;
// zoomLevel = 13; createParticipantHTML(item.name);
// followedZoomed = true; createParticipantOverlay(item.name);
// } const overlay = peopleOverlays[item.name];
overlay.setPosition([item.lon, item.lat]);
// if (followedFeature) { }
// view.animate({
// center: followedFeature.getGeometry().getCoordinates(),
// duration: 500,
// zoom: zoomLevel
// });
// }
}); });
if (startInterval) { if (startInterval) {

BIN
public/img/avatars/raucao.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 260 KiB

BIN
public/img/avatars/tobyyoungfox.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

1
style.css
View File

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