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=0.1"></script>
<script src="https://www.mapmyindia.com/api/leaflet.polylineDecorator.js"></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>

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;
 }

JavaScript

var map = null;
 var poly = [];
 var decorator;
 var line;
 var center = new L.LatLng(28.549948, 77.268241);
 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,...