function computeDirections() {
    function directionsHandler(error, data) {
        data["routes"].forEach(function(route, routeIdx) {
            if (routeIdx !== 0) { return; }
    
            map.removeOverlays(overlays);
    
            let firstPath = route['path'][0];
            let lastPath = route['path'][route['path'].length - 1];
            pointA.coordinate = firstPath[0];
            pointB.coordinate = lastPath[lastPath.length - 1];
    
            overlays = [];
    
            route['path'].forEach(function(path) {
                let overlayStyle = new mapkit.Style({
                    lineWidth: 5,
                    strokeColor: "#0000FF"
                });
                let overlay = new mapkit.PolylineOverlay(path, {
                    style: overlayStyle
                });
                overlays.push(overlay);
            });
    
            map.addOverlays(overlays);
        });
    }

    let directionsOptions = { 
        origin: pointA.coordinate, 
        destination: pointB.coordinate, 
        transportType: mapkit.Directions.Transport.Walking 
    };

    directions.route(directionsOptions, directionsHandler);
}

mapkit.init({
    // If you plan to use this code please use your own JWT key
    authorizationCallback: function(done) {
        done("eyJhbGciOiJFUzI1NiIsImFsZyI6IkVTMjU2Iiwia2lkIjoiREJMQ0JQRlBMNiJ9.eyJpc3MiOiI2M05HRDc0R040IiwiaWF0IjoxNTI4NzUxNjg1LCJleHAiOjE1NjAyODc2ODV9.wr1vqwjkc43-x6D-go1LLgUHBz6S5HpZeyFjalrRfSwg0yCRTb1tAEGkY4hh-ORiCOmu2PYREAxgrKHcwOdRAw");
    },
    language: "en"
});

var region = new mapkit.CoordinateRegion(
    new mapkit.Coordinate(47.421671, 9.371896),
    new mapkit.CoordinateSpan(0.00414, 0.0217)
);

var map = new mapkit.Map("map", {
    region: region,
    showsUserLocation: false,
    showsUserLocationControl: false,
    mapType: mapkit.Map.MapTypes.Hybrid
});

var pointA = new mapkit.MarkerAnnotation(new mapkit.Coordinate(47.421671, 9.371896), {
    draggable: true,
    selected: true,
    title: "START - DRAG ME",
    color: '#1ecf1a'
});
var pointB = new mapkit.MarkerAnnotation(new mapkit.Coordinate(47.427797, 9.374042), {
    draggable: true,
    selected: true,
    title: "END - DRAG ME"
});
map.addAnnotations([pointA, pointB]);
map.addTileOverlay(new mapkit.TileOverlay('https://tiles.arcgis.com/tiles/QHC5QIxkyl7GRuXB/arcgis/rest/services/Fussweg_G%C3%BCteklassen_StGallen_20150922/MapServer/WMTS/tile/1.0.0/Fussweg_G%C3%BCteklassen_StGallen_20150922/default/default028mm/{z}/{y}/{x}.png'))

pointA.addEventListener("drag-end", computeDirections);
pointB.addEventListener("drag-end", computeDirections);

var overlays = [];

var directions = new mapkit.Directions();
computeDirections();