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