DRIP/js/DRIPS.js

// 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);
// }