diff --git a/main.js b/main.js index 71c9c9c..8720e82 100644 --- a/main.js +++ b/main.js @@ -104,8 +104,7 @@ async function main() { const vanFeature= new Feature({ geometry: new Point([8.918618, 44.407408]), - name: 'Support Van', - trackable: true + name: 'Support Van' }); vectorSourceTrackedPoints.addFeature(vanFeature); @@ -191,15 +190,6 @@ async function main() { title.textContent = feature.get('name'); container.append(title); 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 @@ -208,9 +198,7 @@ async function main() { return feature; }); disposePopover(); - if (!feature) { - return; - } + if (!feature) return; popup.setPosition(evt.coordinate); popover = new bootstrap.Popover(popupEl, { placement: 'top', @@ -242,7 +230,7 @@ async function main() { 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;'; + el.style = 'width: 40px; height: 40px; border-radius: 20px; cursor: pointer'; document.getElementById('people').append(el); } @@ -261,7 +249,6 @@ async function main() { fetch('https://r2b22.kip.pe/last.json') .then(response => response.json()) .then(data => { - // console.debug(data); const vanData = data.find(i => i.name == 'satoshithevan'); const vanCoords = [vanData.lon, vanData.lat]; vanFeature.getGeometry().setCoordinates(vanCoords); @@ -272,6 +259,21 @@ async function main() { createParticipantOverlay(item.name); const overlay = peopleOverlays[item.name]; 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); } });