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

Add popover for rider markers

Browse Source
This commit is contained in:
Râu Cao 2022-09-14 19:05:15 +02:00
parent 1dc218ca8a
commit 9c18cc19b7
Signed by: raucao
GPG Key ID: 15E65F399D084BA9
1 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
main.js
View File

@ -104,8 +104,7 @@ async function main() {
const vanFeature= new Feature({ const vanFeature= new Feature({
geometry: new Point([8.918618, 44.407408]), geometry: new Point([8.918618, 44.407408]),
name: 'Support Van', name: 'Support Van'
trackable: true
}); });
vectorSourceTrackedPoints.addFeature(vanFeature); vectorSourceTrackedPoints.addFeature(vanFeature);
@ -191,15 +190,6 @@ async function main() {
title.textContent = feature.get('name'); title.textContent = feature.get('name');
container.append(title); container.append(title);
return container.innerHTML; 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);
// }
} }
// display popup on click // display popup on click
@ -208,9 +198,7 @@ async function main() {
return feature; return feature;
}); });
disposePopover(); disposePopover();
if (!feature) { if (!feature) return;
return;
}
popup.setPosition(evt.coordinate); popup.setPosition(evt.coordinate);
popover = new bootstrap.Popover(popupEl, { popover = new bootstrap.Popover(popupEl, {
placement: 'top', placement: 'top',
@ -242,7 +230,7 @@ async function main() {
const el = document.createElement('img'); const el = document.createElement('img');
el.src = `https://r2b22.kip.pe/avatars/${name}.png`; el.src = `https://r2b22.kip.pe/avatars/${name}.png`;
el.id = `user-${name}`; el.id = `user-${name}`;
el.style = 'width: 40px; height: 40px; border-radius: 20px;'; el.style = 'width: 40px; height: 40px; border-radius: 20px; cursor: pointer';
document.getElementById('people').append(el); document.getElementById('people').append(el);
} }
@ -261,7 +249,6 @@ async function main() {
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.debug(data);
const vanData = data.find(i => i.name == 'satoshithevan'); const vanData = data.find(i => i.name == 'satoshithevan');
const vanCoords = [vanData.lon, vanData.lat]; const vanCoords = [vanData.lon, vanData.lat];
vanFeature.getGeometry().setCoordinates(vanCoords); vanFeature.getGeometry().setCoordinates(vanCoords);
@ -272,6 +259,21 @@ async function main() {
createParticipantOverlay(item.name); createParticipantOverlay(item.name);
const overlay = peopleOverlays[item.name]; const overlay = peopleOverlays[item.name];
overlay.setPosition([item.lon, item.lat]); overlay.setPosition([item.lon, item.lat]);
function clickHandler () {
disposePopover();
popup.setPosition([item.lon, item.lat]);
popover = new bootstrap.Popover(popupEl, {
placement: 'top',
html: true,
content: `Rider: ${item.name}`
});
popover.show();
}
const avatarEl = document.getElementById(`user-${item.name}`);
avatarEl.removeEventListener('click', clickHandler);
avatarEl.addEventListener('click', clickHandler);
} }
}); });