
<a (click)="markerDisplay()"></a>
<div id="newmap1" style="width: 100%; height: 100%;position:relative;"></div>
<div  class="row history-play" *ngIf="!isLocationTab &&  activeHistoryTrack.vehicleMarker">
          <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0px;padding-left: 0px">
            <div class="row" 
              style="position: absolute;top: -86px;background: white;border-radius: 12px;padding: 15px 20px;left: 20pc;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
              <div class="col-12">
                <div style="display: flex;">
                  <div>
                    <i class="far fa-play-circle" *ngIf="activeHistoryTrack.currentPath.flag =='init'" (click)="play(0)"
                      mdTooltip="{{'Play History' | translate}}"
                      style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
                      <i class="far fa-pause-circle" *ngIf="activeHistoryTrack.currentPath.flag=='start'" (click)="pause()"
                      mdTooltip="{{'Play History' | translate}}"
                      style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
                    <i class="far fa-play-circle" *ngIf="activeHistoryTrack.currentPath.flag =='stop'" (click)="play(activeHistoryTrack.currentVehicleIndex)"
                      mdTooltip="{{'Pause' | translate}}"
                      style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
                  </div>
                  <input type="range" min="0" max={{activeHistoryTrack.currentPath.dataArrayCoords.length}} [(ngModel)]="activeHistoryTrack.currentVehicleIndex" class="slider" id="slider5"
                    style="width: 200px;margin-left: 20px;margin-right: 20px; box-shadow: 0px 0px 6px 5px lightg"
                    (change)="zoomSet()">
                  <!-- (change)="changeRange()" -->
                  <div class="kWgQNm" id="myDIV">
                    <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" [class.active]="speed == 1" class="sc-bdVaJa dfmgGo"
                      (click)="changeSpeed(1)">1x</div>
                    <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" [class.active]="speed == 2" class="sc-bdVaJa jXaklS"
                      (click)="changeSpeed(2)">2x</div>
                    <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" [class.active]="speed == 5" class="sc-bdVaJa jXaklS"
                      (click)="changeSpeed(5)">5x</div>
                    <div width="30px" cursor="pointer" font-size="14px" color="#FFFFFF" [class.active]="speed == 10" class="sc-bdVaJa bvKoMW"
                      (click)="changeSpeed(10)">10x</div>
                  </div>
                </div>
              </div>
            </div>
           
          </div>
</div>