JSFiddle - React, Tailwind, and code Playground

by swarups

HTML

<script src="https://www.bing.com/api/maps/mapcontrol"></script>
<div id="highDpi"></div>

<div>
  <span id="timeTaken"></span>
</div>

CSS

#highDpi{
    position:relative;
    width:558px;
    height:243px;
    border: 1px solid black;
}

#normalDpi{
    position:relative;
    width:500px;
    height:200px;
    border: 1px solid black;
}

JavaScript

var coursePositions = [];

var trackingPoints = [
  {
    "lon": 77.1769,
    "lat": 28.4842,
    "speedMph": 376,
    "altitudeFt": 747,
    "source": "derived",
    "date": "2018-04-05T20:54:02.000Z"
  },
  {
    "lon": 77.1022,
    "lat": 28.5482,
    "speedMph": 275,
    "altitudeFt": 1326,
    "source": "derived",
    "date": "2018-04-05T20:53:02.000Z"
  },
  {
    "lon": 77.0404,
    "lat": 28.5824,
    "speedMph": 197,
    "altitudeFt": 1762,
    "source": "derived",
    "date": "2018-04-05T20:52:02.000Z"
  },
  {
    "lon": 76.9886,
    "lat": 28.5942,
    "speedMph": 156,
    "altitudeFt": 2364,
    "source": "derived",
    "date": "2018-04-05T20:51:02.000Z"
  },
  {
    "lon": 76.9364,
    "lat": 28.599,
    "speedMph": 165,
    "altitudeFt": 2945,
    "source": "derived",
    "date": "2018-04-05T20:50:02.000Z"
  },
  {
    "lon": 76.8979,
    "lat": 28.5753,
    "speedMph": 193,
    "altitudeFt": 3441,
    "source": "derived",
    "date": "2018-04-05T20:49:02.000Z"
  },
  {
    "lon": 76.8623,
    "lat": 28.5374,
    "speedMph": 207,
    "altitudeFt": 4108,
    "source": "derived",
    "date": "2018-04-05T20:48:02.000Z"
  },
  {
    "lon": 76.8291,
    "lat": 28.493,
    "speedMph": 206,
    "altitudeFt": 4937,
    "source": "derived",
    "date": "2018-04-05T20:47:02.000Z"
  },
  {
    "lon": 76.7895,
    "lat": 28.4522,
    "speedMph": 227,
    "altitudeFt": 5756,
    "source": "derived",
    "date": "2018-04-05T20:46:02.000Z"
  },
  {
    "lon": 76.7424,
    "lat": 28.4103,
    "speedMph": 261,
    "altitudeFt": 6566,
    "source": "derived",
    "date": "2018-04-05T20:45:02.000Z"
  },
  {
    "lon": 76.687,
    "lat": 28.367,
    "speedMph": 309,
    "altitudeFt": 7555,
    "source": "derived",
    "date": "2018-04-05T20:44:02.000Z"
  },
  {
    "lon": 76.6198,
    "lat": 28.3187,
    "speedMph": 341,
    "altitudeFt": 8586,
    "source": "derived",
    "date": "2018-04-05T20:43:02.000Z"
  },
  {
    "lon": 76.5357,
    "lat": 28.2807,
   ...