javascript - mapkit JS: how to draw polyline with multiple coordinate

Question

I am trying to draw polyline on apple map with mapkit js. Unable to show anything on map.

My project is consist of many location on the map. All the markers are there on the map, clicking on the one marker will open the info-window and draw a polyline on the map itself.

map = new mapkit.Map("map");
function plottrailsCompound(data,map){
    if(data.reststatus.status == "OK"){
        if(annotations){
            map.removeAnnotations(annotations); 
            annotations = [];
        }
        var landmarkAnnotationCallout = {
            calloutElementForAnnotation: function(annotation) {
            var cccDiv = calloutForLandmarkAnnotation(annotation,map);
            return cccDiv;
            },
            calloutAppearanceAnimationForAnnotation: function(annotation) {
            return "scale-and-fadein .4s 0 1 normal cubic-bezier(8, 1, 0, 1.5)";
            }
        };
    }
}
function calloutForLandmarkAnnotation(data,map){
    DrawPolyLine(map);
}
function DrawPolyLine(map){
    var points = [[37.73438, -119.56517], [37.73435, -119.56513], [37.73431, -119.56509]];
    var coords = points.map(function(point) {
        return new mapkit.Coordinate(point[0], point[1]);
    });
    var style = new mapkit.Style({
        lineWidth: 2,
        lineJoin: "round",
        lineDash: [8, 4],
        strokeColor: "#F0F"
    });
    var polyline = new mapkit.PolylineOverlay(coords, { style: style });
    map.addOverlay(polyline);
}

I am drawing my info window in calloutForLandmarkAnnotation, which i am not showing over here. DrawPolyLine function has points variable and it has three coordinates but in actual i have more than this. Some has around 100's of coordinates. Please let me know if any other info you guys need to solve this.

question from:https://stackoverflow.com/questions/65938936/mapkit-js-how-to-draw-polyline-with-multiple-coordinate

Answer 1

Waitting for answers