leaflet replay on map plot replay history of vehicle

Question

my question is how to replay the hisotory of vehicle on leaflet map i have plot the polyline on map but maker is not poloting the marker should plot according to start and stop button i have done this code give me suggesstion how to add anymation marker on map the marker paly using button and stop also using button

import { Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import * as moment from 'moment';
import { interval, Subject, PartialObserver, Observable, Subscriber, of, timer, Subscription } from 'rxjs';
import {  takeUntil } from 'rxjs/operators';
import { ReplayService } from 'src/app/Core/services/monitoring/replay.service';
import * as L from 'leaflet';
import 'leaflet.animatedmarker/src/AnimatedMarker'
import * as $ from 'jquery';
import { waitForAsync } from '@angular/core/testing';


@Component({
  selector: 'app-replay',
  templateUrl: './replay.component.html',
  styleUrls: ['./replay.component.css'],
})
export class ReplayComponent implements OnInit {
  displayedColumns: any[] = ['startDateTime', 'endDateTime', 'vehicleRegNo'];
  newArr: any[] = [];
  arrayofLatLng = [];
  replayFrom: FormGroup;
  map: L.Map;
  private centroid: L.LatLngExpression = [13.30153, 79.93975];//13.30153/79.93975
  ployLine: any;
  route: any;
  replayData: any[] = [];
  replayRow: any;

  nowTabelData:any[]=[];

  animatedMarker;

   myIcon=L.icon({
    iconUrl: '/assets/images/truck.png',
    iconSize: [32, 37],
    iconAnchor: [16, 37],
    popupAnchor: [0, -28]
  });



  constructor(private formBuilder: FormBuilder, private replayService: ReplayService) {
    this.replayFrom = this.formBuilder.group({
      startDateTime: ['', ''],
      endDateTime: ['', ''],
      vehicleRegNo: ['', ''],
    })
  }

  getData(replayFrom: FormGroup) {
    console.log(this.replayFrom.value);
    let startDateTime = replayFrom.value.startDateTime;
    let endDateTime = replayFrom.value.endDateTime;
    let vehicleRegNo = replayFrom.value.vehicleRegNo;
    let abc = replayFrom.value;
    let fromDateFormat = moment(new Date(startDateTime)).format("YYYY-MM-DD HH:mm:ss");
    let toDateFormat = moment(new Date(endDateTime)).format("YYYY-MM-DD HH:mm:ss");
    this.getReplayData(fromDateFormat, toDateFormat, vehicleRegNo, abc);
  }

  ngOnInit() {
  }

  sub: Subscription;

  getReplayData(startDateTime: string, endDateTime: string, vehicleRegNo: string, abc: any) {
    this.replayService.getReplay(startDateTime, endDateTime, vehicleRegNo, abc)
      .subscribe({
        next: this.handleReplayResponse.bind(this),
        error: this.handleReplayError.bind(this),
      });
  }

  handleReplayResponse(res: any): void {
    let tempArr = res.data;
    this.replayData = tempArr;
    this.myLoop();
  }

  i=0;
  j=10;
  k=0;
  t=0;
  myLoop(){
    let letLng=[] ;
    setTimeout(()=> { 
      this.i++; 
      console.log(this.i);         
 
           
      if (this.i < this.replayData.length) {   
        console.log(this.replayData.length);   

        this.myLoop();       
       console.log(this.replayData[this.i].eventLat);
        for(;this.k<this.j;this.k++){
          console.log(this.k);
          
          this.nowTabelData.push(this.replayData[this.k]);
          const latN = this.replayData[this.k].eventLat;
          const lanN = this.replayData[this.k].eventLong;
     
          if (latN > 0 && lanN > 0 && latN!=undefined && lanN!=undefined) {
            this.arrayofLatLng.push([latN, lanN]);
            letLng.push([latN,lanN]);
          }
        
        }
        this.i=this.k;
        this.k=this.j;
        this.j=this.j+10;
      }

      debugger;
        console.log(letLng);
     
        console.log(this.arrayofLatLng);
        this.ployLine = new L.Polyline([this.arrayofLatLng], {
          weight: 8,
          color: 'red'
        }).addTo(this.map);

        this.animatedMarker=L.animatedMarker(this.arrayofLatLng,{icon:this.myIcon,interval:100,autoStart:false});
        this.map.addLayer(this.animatedMarker);
     
    }, 1000);

    
    
  }

  startMarker(){
    this.t=0;
    this.animatedMarker.start();
  }


  handleReplayError(err: any) {
    console.log(err);
  } 
  private initMap(): void {
    this.map = L.map('map', {
      center: this.centroid,
      zoom: 10
    });
    const tiles = L.tileLayer('http://3.110.6.95:8070/mapcache/tms/1.0.0/osmindiamap@indiagrid/{z}/{x}/{-y}.png', {
      maxZoom: 18,
      minZoom: 2,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    })



    tiles.addTo(this.map);
  }
  ngAfterViewInit() {
    this.initMap();
  }
pauseMarker(){
    this.t=1;
    this.animatedMarker.stop();

   
  }

}