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": -122.38,
        "lat": 37.62
    },
    {
        "lon": -122.27,
        "lat": 37.69
    },
    {
        "lon": -122.26,
        "lat": 37.69
    },
    {
        "lon": -122.26,
        "lat": 37.69
    },
    {
        "lon": -122.21,
        "lat": 37.72
    },
    {
        "lon": -122.21,
        "lat": 37.76
    },
    {
        "lon": -122.21,
        "lat": 37.76
    },
    {
        "lon": -122.2,
        "lat": 37.8
    },
    {
        "lon": -122.19,
        "lat": 37.86
    },
    {
        "lon": -122.19,
        "lat": 37.87
    },
    {
        "lon": -122.17,
        "lat": 37.97
    },
    {
        "lon": -122.15,
        "lat": 38.14
    },
    {
        "lon": -122.14,
        "lat": 38.17
    },
    {
        "lon": -122.13,
        "lat": 38.22
    },
    {
        "lon": -122.12,
        "lat": 38.3
    },
    {
        "lon": -122.11,
        "lat": 38.34
    },
    {
        "lon": -122.07,
        "lat": 38.46
    },
    {
        "lon": -122.07,
        "lat": 38.47
    },
    {
        "lon": -121.99,
        "lat": 38.66
    },
    {
        "lon": -121.93,
        "lat": 38.82
    },
    {
        "lon": -121.91,
        "lat": 38.9
    },
    {
        "lon": -121.85,
        "lat": 39.05
    },
    {
        "lon": -121.85,
        "lat": 39.06
    },
    {
        "lon": -121.82,
        "lat": 39.12
    },
    {
        "lon": -121.8,
        "lat": 39.19
    },
    {
        "lon": -121.78,
        "lat": 39.25
    },
    {
        "lon": -121.69,
        "lat": 39.47
    },
    {
        "lon": -121.11,
        "lat": 41
    },
    {
        "lon": -121.06,
        "lat": 41.13
    },
    {
        "lon": -120.51,
        "lat": 42.49
    },
    {
        "lon": -120.05,
        "lat": 43.75
    },
    {
        "lon": -119.89,
        "lat": 44.17
    },
    {
        "lon": -119.71,
        "lat": 44.65
    },
    {
        "lon": -119.34,
       ...