<div id="map">
</div>
<script>
    first=true;
    lat=24.0634929;
    lng=120.5228926;
    zoom=14;
    initMap();
    loadMenu();
    addRoute();
    //loadTrace();
    function initMap(){
        mapboxgl.accessToken='pk.eyJ1IjoibWFoYWxqc3AiLCJhIjoiY2xua2RvcTNqMGFiOTJpczFvdTg1azVvdyJ9.8uafvaaXmM59bmLeYNoa5Q';
        map = new mapboxgl.Map({
            container: 'map', // container ID
            style: 'mapbox://styles/mapbox/streets-v12', // style URL
            center: [lng, lat], // starting position [lng, lat]
            zoom: zoom, // starting zoom
        });
    }

    function addRoute() {
        map.on('load', () => {
            map.addSource('route', {
                'type': 'geojson',
                'data': {
                    'type': 'Feature',
                    'properties': {},
                    'geometry': {
                        'type': 'LineString',
                        'coordinates': [
                            [120.52582727, 24.06761747],
                            [121.5134698, 25.0490469]
                        ]
                    }
                }
            });
            map.addLayer({
                'id': 'route',
                'type': 'line',
                'source': 'route',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': '#888',
                    'line-width': 8
                }
            });
        });

    }
</script>

<div id="map">
</div>
<script>
    first=true;
    lat=24.0634929;
    lng=120.5228926;
    zoom=14;
    route_layers=0;
    const dashArraySequence = [[0, 4, 3],[0.5, 4, 2.5],[1, 4, 2],[1.5, 4, 1.5],[2, 4, 1],[2.5, 4, 0.5],[3, 4, 0],[0, 0.5, 3, 3.5],[0, 1, 3, 3],[0, 1.5, 3, 2.5],[0, 2, 3, 2],[0, 2.5, 3, 1.5],[0, 3, 3, 1],[0, 3.5, 3, 0.5]];
    initMap();
    loadMenu();
    //addRoute();
    function initMap(){
        mapboxgl.accessToken='pk.eyJ1IjoibWFoYWxqc3AiLCJhIjoiY2xua2RvcTNqMGFiOTJpczFvdTg1azVvdyJ9.8uafvaaXmM59bmLeYNoa5Q';
        map = new mapboxgl.Map({
            container: 'map', // container ID
            style: 'mapbox://styles/mapbox/streets-v12', // style URL
            center: [lng, lat], // starting position [lng, lat]
            zoom: zoom, // starting zoom
        });
    }

    function draw_route(coords, i){
        map.addLayer({
            id: i+"-background",
            "type": "line",
            "source": {
                "type": "geojson",
                "data": {
                    "type": "Feature",
                    "properties": {},
                    "geometry": {
                        "type": "LineString",
                        "coordinates": coords
                    }
                }
            },
            paint: {
                'line-color': 'blue',
                'line-width': 6,
                'line-opacity': 0.4
            }
        });
        map.addLayer({
            id: i+"-dashed",
            "type": "line",
            "source": {
                "type": "geojson",
                "data": {
                    "type": "Feature",
                    "properties": {},
                    "geometry": {
                        "type": "LineString",
                        "coordinates": coords
                    }
                }
            },
            paint: {
                'line-color': 'yellow',
                'line-width': 6,
                'line-dasharray': [0, 4, 3]
            }
        });
        let step = 0;
        animateDashArray(0);
        function animateDashArray(timestamp) {
            newStep = parseInt((timestamp / 50) % dashArraySequence.length);
            if (newStep !== step) {
                map.setPaintProperty(
                    i+"-dashed",
                    'line-dasharray',
                    dashArraySequence[step]
                );
                step = newStep;
            }
            requestAnimationFrame(animateDashArray);
        }
    }

    function loadRoute(currentDay){
        first=true;
       if (window.XMLHttpRequest){
         route_http=new XMLHttpRequest();
       }
       else{
         route_http=new ActiveXObject("Microsoft.XMLHTTP");
       }
       route_http.onreadystatechange=function(){
          if (route_http.readyState==4 && route_http.status==200){
              route=JSON.parse(route_http.responseText)["route"];
              for (i=0;i<route_layers;i++){
                    map.removeLayer(i+"-background");
                    map.removeSource(i+"-background");
                    map.removeLayer(i+"-dashed");
                    map.removeSource(i+"-dashed");
              }
              route_layers=route.length;
              for (i=0;i<route_layers;i++){
                    draw_route(route[i], i);
                }
          }
       }
       route_http.open("GET","/travel_route/?currentDay="+currentDay,true);
       route_http.send();
    }

function addMarker(coord){
    const marker = new mapboxgl.Marker({ color: 'blue', rotation: 0 })
    .setLngLat([coord[0], coord[1]])
    .addTo(map);
}