124 lines
5.2 KiB
JavaScript
124 lines
5.2 KiB
JavaScript
// Setup XML requester
|
|
var request = new XMLHttpRequest();
|
|
|
|
// Setup mapbox
|
|
mapboxgl.accessToken = 'pk.eyJ1IjoidGhlLXJlYWwtbWNhcm4iLCJhIjoiY2p5bXo1dXJsMG1oNzNvbzU0dW84NmlmaSJ9.RiPJ7xRtmO6y4daFXB4Byg';
|
|
var map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/streets-v11',
|
|
center: [5.46, 52.1],
|
|
zoom: 6
|
|
});
|
|
|
|
map.addControl(new mapboxgl.NavigationControl());
|
|
|
|
// Open xml file containing the statuses of the VMS units
|
|
request.open("GET", "xml/DRIPS.xml", false);
|
|
request.send();
|
|
var xmlContents = request.responseXML;
|
|
document.getElementById("updated").innerHTML = `Last updated: ${request.responseXML.lastModified}`;
|
|
|
|
// Open xml file containing the locations of the VMS units
|
|
request.open("GET", "xml/LocatietabelDRIPS.xml", false);
|
|
request.send();
|
|
var xmlLocation = request.responseXML;
|
|
|
|
// Create array of VMS Id's using the status xml file
|
|
var unitArray = xmlContents.getElementsByTagName('vmsUnit');
|
|
var statusArray = [];
|
|
|
|
for (let index = 0; index < unitArray.length; index++) {
|
|
statusArray.push(unitArray[index].childNodes[1].getAttribute('id'));
|
|
}
|
|
|
|
// Create array of VMS Id's using the locations xml file
|
|
var recordArray = xmlLocation.getElementsByTagName('vmsUnitRecord');
|
|
var referenceArray = [];
|
|
|
|
for (let index = 0; index < recordArray.length; index++) {
|
|
referenceArray.push(recordArray[index].getAttribute('id'));
|
|
}
|
|
|
|
// Remove VMS units which do not have fixed location
|
|
// var dripsArray = [];
|
|
|
|
for (let referenceIndex = 0; referenceIndex < referenceArray.length; referenceIndex++) {
|
|
var referenceId = referenceArray[referenceIndex];
|
|
if (statusArray.includes(referenceId)) {
|
|
var statusIndex = statusArray.indexOf(referenceId);
|
|
var statusId = statusArray[statusIndex];
|
|
|
|
// Check if the VMS unit has a fixed location
|
|
if (xmlLocation.querySelectorAll('vmsUnitRecord[id="' + referenceId + '"] > vmsRecord > vmsRecord > vmsLocation > locationForDisplay')[0]) {
|
|
// Add the needed data to the array set
|
|
const latitude = xmlLocation.querySelectorAll('vmsUnitRecord[id="' + referenceId + '"] > vmsRecord > vmsRecord > vmsLocation > locationForDisplay > latitude')[0].innerHTML;
|
|
const longitude = xmlLocation.querySelectorAll('vmsUnitRecord[id="' + referenceId + '"] > vmsRecord > vmsRecord > vmsLocation > locationForDisplay > longitude')[0].innerHTML;
|
|
const type = xmlLocation.querySelectorAll('vmsUnitRecord > vmsRecord > vmsRecord > vmsType')[referenceIndex].innerHTML;
|
|
|
|
// Check wether VMS unit is dislaying text or an image
|
|
var vmsElement = xmlContents.querySelectorAll('vmsUnit > vmsUnitReference[id="' + statusId + '"]')[0].parentElement;
|
|
|
|
if (vmsElement.querySelectorAll('vms > vms > vmsMessage > vmsMessage > vmsMessageExtension > vmsMessageExtension > vmsImage > imageData > binary').length) {
|
|
const base64Image = vmsElement.querySelectorAll('vms > vms > vmsMessage > vmsMessage > vmsMessageExtension > vmsMessageExtension > vmsImage > imageData > binary')[0].innerHTML;
|
|
var content = '<img class="vmsImage" src="data:image/png;base64, ' + base64Image + '" alt="' + statusId + '"/>';
|
|
} else if (vmsElement.querySelectorAll('vms > vms > vmsMessage > vmsMessage > textPage > vmsText > vmsTextLine').length) {
|
|
var content = ''
|
|
var textLines = vmsElement.querySelectorAll('vms > vms > vmsMessage > vmsMessage > textPage > vmsText > vmsTextLine > vmsTextLine > vmsTextLine');
|
|
for (let index = 0; index < textLines.length; index++) {
|
|
if (textLines[index].innerHTML == '' && index == 0) {
|
|
content = 'No data<br>';
|
|
} else {
|
|
content += textLines[index].innerHTML + '<br>';
|
|
}
|
|
}
|
|
} else {
|
|
var content = 'No data'
|
|
}
|
|
|
|
// Push VMS Id to array
|
|
addMarker([longitude, latitude], content);
|
|
// dripsArray.push({
|
|
// statusId,
|
|
// longitude,
|
|
// latitude,
|
|
// type,
|
|
// content
|
|
// });
|
|
} else {
|
|
console.log('Location not Found');
|
|
}
|
|
} else {
|
|
console.log('VMS ID not found');
|
|
}
|
|
}
|
|
|
|
//// Add markers to the map
|
|
async function addMarker(coordinates, content) {
|
|
var popup = new mapboxgl.Popup({
|
|
offset: 25
|
|
})
|
|
// .setHTML(contentArray[index]);
|
|
.setHTML(content)
|
|
|
|
new mapboxgl.Marker()
|
|
.setLngLat(coordinates)
|
|
.setPopup(popup)
|
|
.addTo(map);
|
|
}
|
|
|
|
// for (let index = 0; index < dripsArray.length; index++) {
|
|
// const coordinates = [
|
|
// dripsArray[index]['longitude'],
|
|
// dripsArray[index]['latitude']
|
|
// ];
|
|
// var popup = new mapboxgl.Popup({
|
|
// offset: 25
|
|
// })
|
|
// // .setHTML(contentArray[index]);
|
|
// .setHTML(dripsArray[index]['content'])
|
|
|
|
// new mapboxgl.Marker()
|
|
// .setLngLat(coordinates)
|
|
// .setPopup(popup)
|
|
// .addTo(map);
|
|
// }
|