WIP tracked POIs
This commit is contained in:
parent
9e839def7a
commit
18ea53313f
88
main.js
88
main.js
|
@ -7,7 +7,7 @@ import Point from 'ol/geom/Point';
|
|||
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
|
||||
import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style';
|
||||
import {OSM, Vector as VectorSource} from 'ol/source';
|
||||
import {useGeographic} from 'ol/proj';
|
||||
import {useGeographic, fromLonLat} from 'ol/proj';
|
||||
import geojsonRoute from './geo/route.json'
|
||||
import geojsonPOI from './geo/poi.json'
|
||||
|
||||
|
@ -96,17 +96,18 @@ const poiLayer = new VectorLayer({
|
|||
style: styles.circleBlack,
|
||||
});
|
||||
|
||||
const vectorSourceVan = new VectorSource();
|
||||
const vectorSourceTrackedPoints = new VectorSource();
|
||||
|
||||
const vanFeature= new Feature({
|
||||
geometry: new Point([ 12.498556, 45.780383 ]),
|
||||
name: 'Support Van'
|
||||
geometry: new Point([8.918618, 44.407408]),
|
||||
name: 'Support Van',
|
||||
trackable: true
|
||||
});
|
||||
|
||||
vectorSourceVan.addFeature(vanFeature);
|
||||
vectorSourceTrackedPoints.addFeature(vanFeature);
|
||||
|
||||
const vanLayer = new VectorLayer({
|
||||
source: vectorSourceVan,
|
||||
const trackedPointsLayer = new VectorLayer({
|
||||
source: vectorSourceTrackedPoints,
|
||||
style: styles.iconVan
|
||||
});
|
||||
|
||||
|
@ -119,6 +120,8 @@ const view = new View({
|
|||
zoom: 6.6
|
||||
})
|
||||
|
||||
window.view = view;
|
||||
|
||||
const map = new Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
|
@ -128,7 +131,7 @@ const map = new Map({
|
|||
stagesCompletedLayer,
|
||||
stagesAheadLayer,
|
||||
poiLayer,
|
||||
vanLayer
|
||||
trackedPointsLayer
|
||||
],
|
||||
view: view
|
||||
});
|
||||
|
@ -153,6 +156,26 @@ 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;
|
||||
}
|
||||
|
||||
// display popup on click
|
||||
map.on('click', function (evt) {
|
||||
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
|
||||
|
@ -166,7 +189,7 @@ map.on('click', function (evt) {
|
|||
popover = new bootstrap.Popover(popupEl, {
|
||||
placement: 'top',
|
||||
html: true,
|
||||
content: feature.get('name'),
|
||||
content: createPopoverHtml(feature)
|
||||
});
|
||||
popover.show();
|
||||
});
|
||||
|
@ -180,3 +203,50 @@ map.on('pointermove', function (evt) {
|
|||
|
||||
// Close the popup when the map is moved
|
||||
map.on('movestart', disposePopover);
|
||||
|
||||
|
||||
//
|
||||
// Tracking
|
||||
//
|
||||
|
||||
const updateInterval = 5000;
|
||||
let followedFeature = vanFeature;
|
||||
// let followedFeature = null;
|
||||
|
||||
function startFollowing(feature, followLink) {
|
||||
followedFeature = feature;
|
||||
followLink.textContent = 'Stop following';
|
||||
// followLink.removeEventListener('click', startFollowing);
|
||||
followLink.addEventListener('click', stopFollowing(feature, followLink));
|
||||
}
|
||||
|
||||
function stopFollowing(feature, followLink) {
|
||||
followedFeature = null;
|
||||
followLink.textContent = 'Stop following';
|
||||
// followLink.removeEventListener('click', stopFollowing);
|
||||
followLink.addEventListener('click', startFollowing(feature, followLink));
|
||||
}
|
||||
|
||||
function updateData(startInterval=false) {
|
||||
fetch('https://r2b22.kip.pe/last.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
const coords = [data.lon, data.lat];
|
||||
vanFeature.getGeometry().setCoordinates(coords);
|
||||
|
||||
if (followedFeature) {
|
||||
view.animate({
|
||||
center: followedFeature.getGeometry().getCoordinates(),
|
||||
duration: 500,
|
||||
zoom: 13
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (startInterval) {
|
||||
setInterval(updateData, updateInterval);
|
||||
}
|
||||
}
|
||||
|
||||
updateData(true);
|
||||
|
|
Loading…
Reference in New Issue