MVP
This commit is contained in:
parent
b527049acb
commit
e06b9d5109
57
main.js
57
main.js
@ -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) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user