mapboxgl.accessToken = 'pk.eyJ1IjoiZmhlcmtvbW0iLCJhIjoiY2tobm81bXppMGVuNzMyazY3eDU0M2dyaSJ9.qWJrwtv7KitW60pzs6h3Gg';
let map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-v9',
    zoom: 0
});
let emptyTCP = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            geometry: {
                type: "LineString",
                coordinates: []
            }
        }]
}

let emptySERIAL = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            geometry: {
                type: "LineString",
                coordinates: []
            }
        }]
}

map.on('load', function () {

    map.addSource('routeTCP', { 'type': 'geojson', 'data': emptyTCP })
    map.addSource('routeSERIAL', { 'type': 'geojson', 'data': emptySERIAL })

    map.addLayer({
        'id': 'routeTCP',
        'type': 'line',
        'source': 'routeTCP',
        'layout': {
            'visibility': 'visible'
        },
        'paint': {
            'line-color': 'rgba(30, 139, 195, 1)',
            'line-opacity': 1,
            'line-width': 5
        }
    });

    map.addLayer({
        'id': 'routeSERIAL',
        'type': 'line',
        'source': 'routeSERIAL',
        'layout': {
            'visibility': 'visible'
        },
        'paint': {
            'line-color': 'rgba(214, 69, 65, 1)',
            'line-opacity': 1,
            'line-width': 5
        }
    });


    map.jumpTo({ 'center': [9.19640999, 49.12283027], 'zoom': 16 });
    map.setPitch(30);

    let stateLegendEl = document.getElementById('state-legend');
    stateLegendEl.style.display = 'block';
})

function updateMapTCP (TCPlong, TCPlat) {
    emptyTCP.features[0].geometry.coordinates.push([TCPlong, TCPlat]);
    map.getSource('routeTCP').setData(emptyTCP);
}

function updateMapSERIAL (SERIALlong, SERIALlat) {
    emptySERIAL.features[0].geometry.coordinates.push([SERIALlong, SERIALlat]);
    map.getSource('routeSERIAL').setData(emptySERIAL);
}