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

var 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': 'blue',
            'line-opacity': 0.75,
            'line-width': 5
        }
    });

    map.addLayer({
        'id': 'routeSERIAL',
        'type': 'line',
        'source': 'routeSERIAL',
        'layout': {
            'visibility': 'visible'
        },
        'paint': {
            'line-color': 'red',
            'line-opacity': 0.75,
            'line-width': 5
        }
    });


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

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

/*function updateMap (TCPlong, TCPlat, SERIALlong, SERIALlat) {
    if(!(TCPlong === 0) && !(TCPlat === 0)){
        emptyTCP.features[0].geometry.coordinates.push([TCPlong, TCPlat]);
        map.getSource('routeTCP').setData(emptyTCP);
    }
    if(!(SERIALlong === 0) && !(SERIALlat === 0)){
        emptySERIAL.features[0].geometry.coordinates.push([SERIALlong, SERIALlat]);
        map.getSource('routeSERIAL').setData(emptySERIAL);
    }
    // else if (!([TCPlong, TCPlat] = [0,0])) {
    //     map.panTo([TCPlong, TCPlat]);
    // }
    map.panTo([TCPlong, TCPlat]);
}*/

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

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