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 () {
    // save full coordinate list for later
    //var coordinates = data.features[0].geometry.coordinates;

    // start by showing just the first coordinate
    //data.features[0].geometry.coordinates = [coordinates[0]];

    // add it to the map
    //map.addSource('trace', { type: 'geojson', data: data });

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

    map.addLayer({
        'id': 'routeTCP',
        'type': 'line',
        'source': 'routeTCP',
        'paint': {
            'line-color': 'yellow',
            'line-opacity': 0.75,
            'line-width': 5
        }
    });

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


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

    // on a regular basis, add more coordinates from the saved list and update the map
    //var i = 0;
    //var timer = window.setInterval(, 10);

})

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

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