JSFiddle - React, Tailwind, and code Playground

by mapmyindia_map

HTML

<script src="https://apis.mapmyindia.com/advancedmaps/v1/your_map_key_here/map_load?v=1.3&plugin=polylinedecorator,path.drag"></script>
<!-- <div class="top-div">
  <span class=top-div-span1 ">MapmyIndia Maps API:</span>
            <span class=top-div-span2">Marker Animation on Polyline</span>
</div>
<div id="result">
  <div class="btn-div"><button class="carPolyLine" id="visible">Redraw Polyline</button></div>
  <div class="btn-div"><button class="drawArrowOnPolyline" id="visible">Draw Arrow on Polyline</button></div>
  <div class="btn-div"><button class="drawRepeatedPatternOnPolyline" id="visible">Draw Repeated Pattern</button></div>

  <div class="btn-div"><button class="removePolyline" id="visible">Remove Polyline</button></div>
</div>
<div id="map"></div> -->



<div class= "top-div">
        <span class="top-div-span1">MapmyIndia Maps API:</span>
        <span class="top-div-span2">Marker Animation on Polyline</span>
    </div>
    <div id="result">            
        <div class="btn-div" ><button onclick="drawCarMarkerOnPolyline()" id="visible" >Redraw Polyline</button></div>
        <div class="btn-div" ><button onclick="drawArrowOnPolyline()" id="visible" >Draw Arrow on Polyline</button></div>
        <div class="btn-div" ><button onclick="drawRepeatedPatternOnPolyline()" id="visible" >Draw Repeated Pattern</button></div>

        <div class="btn-div" ><button onclick="removePolyline()" id="visible" >Remove Polyline</button></div>
    </div>
    <div id="map"></div>

CSS

html { 
            height: 100%; 
        }
        body { 
            height: 100%;
            font-family:Verdana,sans-serif,Arial;
            color:#000;
            margin: 0; 
            font-size:14px;
            padding: 0; 
        }
        #map{
            position: absolute;
            left: 312px; top: 46px; 
            right: 2px; bottom: 2px; 
            border: 1px solid #cccccc; }
        #result {
            position: absolute;
            left: 2px; top: 46px;
            width: 306px;
            bottom: 2px; 
            border: 1px solid #cccccc;
            background-color: #FAFAFA;
            overflow: auto;
        }
        button{
            width: 220px;
            font-family:Verdana,sans-serif,Arial;
            font-size:12px;
            padding:2px 0;
            color:#333
        }
        .top-div{
            border-bottom: 1px solid #e9e9e9;
            padding:10px 12px;
            background:#fff;
        }
        .top-div-span1{
            font-size: 20px;
        }
        .top-div-span2{
            font-size:16px;color:#777
        }
        .btn-div{
            padding: 16px 12px 6px 38px;
        }


/*  html {
   height: 100%;
 }
 
 body {
   height: 100%;
   font-family: Verdana, sans-serif, Arial;
   color: #000;
   margin: 0;
   font-size: 14px;
   padding: 0;
 }
 
 #map {
   position: absolute;
   left: 312px;
   top: 46px;
   right: 2px;
   bottom: 2px;
   border: 1px solid #cccccc;
 }
 
 #result {
   position: absolute;
   left: 2px;
   top: 46px;
   width: 306px;
   bottom: 2px;
   border: 1px solid #cccccc;
   background-color: #FAFAFA;
   overflow: auto;
 }
 
 button {
   width: 220px;
   font-family: Verdana, sans-serif, Arial;
   font-size: 12px;
   padding: 2px 0;
   color: #333
 }
 
 .top-div {
   border-bottom: 1px solid #e9e9e9;
   padding: 10px 12px;
   background: #fff;
 }
 
 .top-div-span1 {
   font-size: 20px;
 }
 
 .top-div-span2 {
   font-size: 16px;
   color: #777
 }
 
...

JavaScript

var map = null;
        var poly = [];
        var decorator;
        var line;
        var interval = 0;
        var pp = [[28.56731, 77.346355], [28.567074, 77.346022], [28.566584, 77.345378], [28.565689, 77.344144], [28.563503, 77.341312], [28.563277, 77.341076], [28.562636, 77.340186],
            [28.561986, 77.339328], [28.561788, 77.338942], [28.561675, 77.338695], [28.561524, 77.33833], [28.56142, 77.338094], [28.561166, 77.337472], [28.560817, 77.336925],
            [28.560515, 77.335981], [28.560458, 77.33582], [28.560204, 77.33509], [28.559818, 77.33406], [28.558046, 77.329629], [28.557518, 77.328427], [28.556698, 77.326292],
            [28.55617, 77.325123], [28.555473, 77.323878], [28.555256, 77.323739], [28.555105, 77.323675], [28.554973, 77.323664], [28.554813, 77.323685], [28.554681, 77.323749],
            [28.554577, 77.323824], [28.554464, 77.323963], [28.554407, 77.324124], [28.554388, 77.324274], [28.554397, 77.324424], [28.554435, 77.324585], [28.55451, 77.324724],
            [28.554642, 77.324853], [28.555198, 77.325261], [28.555462, 77.3254], [28.555632, 77.325443], [28.55599, 77.325368], [28.55681, 77.324295], [28.557922, 77.322879],
            [28.558516, 77.321892], [28.55878, 77.321388], [28.559289, 77.320412], [28.55944, 77.320122], [28.560062, 77.318867], [28.560486, 77.31818], [28.56107, 77.317622],
            [28.561503, 77.317407], [28.562408, 77.316989], [28.564575, 77.315466], [28.569183, 77.312097], [28.570464, 77.311088], [28.570831, 77.310798], [28.573921, 77.308481],
            [28.575551, 77.307354], [28.579329, 77.304554], [28.581308, 77.303127], [28.58177, 77.302784], [28.581949, 77.302655], [28.582637, 77.302129], [28.583014, 77.301839],
            [28.583532, 77.301453], [28.584022, 77.301088], [28.58486, 77.30023], [28.585934, 77.298621], [28.58616, 77.298396], [28.587036, 77.297742], [28.588685, 77.296916]];
        window.onload = function () {
        var center = new L.LatLng(28.549948, 77.268241);

        ...