<div class="container">
  <div id="map" style="width:100%;height: 100%;"></div>
      <div class="row" *ngFor="let historyArr of tempMapHistory ; let i = index" style="position: absolute; top: 10px;background: white; border-radius: 2px;padding: 3px 20px;left: 215px;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="tempMapHistory[i].flag=='init'" (click)="play(i)" mdTooltip="{{'Play History' | translate}}" style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
            <i class="far fa-play-circle" *ngIf="tempMapHistory[i].flag=='start'" (click)="play(i)" mdTooltip="{{'Play History' | translate}}" style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
            <i class="far fa-pause-circle" *ngIf="tempMapHistory[i].flag=='stop'" (click)="play(i)" mdTooltip="{{'Pause' | translate}}" style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
            </div>
            <input type="range" min="0" max={{seekBarValue}}  [(ngModel)]="sliderValue" class="slider" id="slider1" style="width: 200px;margin-left: 20px;margin-right: 20px; box-shadow: 0px 0px 6px 5px lightg"  (change)="zoomSet()">
            <!-- <div class="kWgQNm" id="myDIV">
              <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa dfmgGo active" (click)="changeSpeed(1)">1x</div>
              <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa jXaklS" (click)="changeSpeed(2)">2x</div>
              <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa jXaklS" (click)="changeSpeed(5)">5x</div>
              <div width="30px" cursor="pointer" font-size="14px" color="#FFFFFF" class="sc-bdVaJa bvKoMW" (click)="changeSpeed(10)">10x</div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="row" style="padding:0;position: absolute;top: 432px;background: white;border-radius: 2px;padding: 10px 0px;width: 62%;left: 40px;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
        <div class="col-3">
           <p style="font-weight: 700;text-align: center;margin: 0;">Distance</p>
           <p style="text-align: center;margin: 0;">{{tdistance}}</p>
        </div>
        <div class="col-5">
          <p style="font-weight: 700;text-align: center;margin: 0;">Cumulative Distance (Kms.)</p>
          <p style="text-align: center;margin: 0;">{{cummulative_Distance}}</p>
        </div>
        <div class="col-4">
          <p style="font-weight: 700;text-align: center;margin: 0;">Speed (Kmph)</p>
          <p style="text-align: center;margin: 0;">{{speeed2}}</p>
        </div>
        <!-- <div class="col-2">
          <p style="font-weight: 700;text-align: center;margin: 0;">Time</p>
          <p style="text-align: center;margin: 0;">{{triptime|date:'medium'}}</p>
        </div> -->
      </div>
</div>