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

MVP

Browse Source
This commit is contained in:
Râu Cao 2022-09-06 21:09:06 +02:00
parent b527049acb
commit e06b9d5109
Signed by: raucao
GPG Key ID: 15E65F399D084BA9
1 changed files with 37 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
main.js
View File

@ -60,7 +60,7 @@ const styles = {
// Route
//
const lastStageFinished = 4;
const lastStageFinished = 1;
const stagesCompleted = geojsonRoute.features.slice(0, lastStageFinished);
const stagesAhead = geojsonRoute.features.slice(lastStageFinished);
const vectorSourceStagesCompleted = new VectorSource();
@ -136,6 +136,18 @@ const map = new Map({
view: view
});
//
// Center map on current/next stage
//
setTimeout(() => {
const nextStageFeature = new GeoJSON().readFeature(stagesAhead[0]);
view.fit(nextStageFeature.getGeometry(), {
maxZoom: 10,
duration: 1000
});
}, 3000);
//
// Popups
//
@ -158,22 +170,19 @@ function disposePopover() {
function createPopoverHtml(feature) {
const container = document.createElement('div');
container.className = 'popover-content';
const title = document.createElement('div');
title.textContent = feature.get('name');
container.append(title);
if (feature.get('trackable')) {
const linkParent = document.createElement('div');
const followLink = document.createElement('a');
followLink.textContent = "Follow";
followLink.addEventListener('click', console.log(feature, followLink));
// followLink.addEventListener('click', startFollowing(feature, followLink));
linkParent.append(followLink);
container.append(linkParent);
}
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
@ -211,6 +220,7 @@ map.on('movestart', disposePopover);
const updateInterval = 5000;
let followedFeature = vanFeature;
let followedZoomed = false;
// let followedFeature = null;
function startFollowing(feature, followLink) {
@ -222,6 +232,7 @@ function startFollowing(feature, followLink) {
function stopFollowing(feature, followLink) {
followedFeature = null;
followedZoomed = false;
followLink.textContent = 'Stop following';
// followLink.removeEventListener('click', stopFollowing);
followLink.addEventListener('click', startFollowing(feature, followLink));
@ -235,13 +246,19 @@ function updateData(startInterval=false) {
const coords = [data.lon, data.lat];
vanFeature.getGeometry().setCoordinates(coords);
if (followedFeature) {
view.animate({
center: followedFeature.getGeometry().getCoordinates(),
duration: 500,
zoom: 13
});
}
// let zoomLevel;
// if (!followedZoomed) {
// zoomLevel = 13;
// followedZoomed = true;
// }
// if (followedFeature) {
// view.animate({
// center: followedFeature.getGeometry().getCoordinates(),
// duration: 500,
// zoom: zoomLevel
// });
// }
});
if (startInterval) {