Animated Marker with Polyline

    
      <span class="pln">
      </span><span class="tag">&lt;html&gt;</span><span class="pln">
        </span><span class="tag">&lt;head&gt;</span><span class="pln">
          </span><span class="tag">&lt;title&gt;</span><span class="pln">Animated Marker with Polyline</span><span class="tag">&lt;/title&gt;</span><span class="pln">
          </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"initial-scale=1.0"</span><span class="tag">&gt;</span><span class="pln">
          </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
          </span><span class="tag">&lt;style&gt;</span><span class="pln">
          html</span><span class="pun">,</span><span class="pln">
          body</span><span class="pun">,</span><span class="pln">
          </span><span class="com">#map {</span><span class="pln">
            margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
            padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
            width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln">
            height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100vh</span><span class="pun">;</span><span class="pln">
          </span><span class="pun">}</span><span class="pln">
                          
          </span><span class="tag">&lt;/style&gt;</span><span class="pln">
             &lt;script src="https://apis.mappls.com/advancedmaps/api/</span><span class="tag">&lt;Token&gt;</span><span class="pun">/</span><span class="pln">map_sdk</span><span class="pun">?</span><span class="pln">layer</span><span class="pun">=</span><span class="pln">vector</span><span class="pun">&amp;</span><span class="pln">v</span><span class="pun">=</span><span class="lit">3.0</span><span class="pun">&amp;</span><span class="pln">callback</span><span class="pun">=</span><span class="pln">initMap1</span><span class="str">" defer async&gt;</span><span class="tag">&lt;/script&gt;</span><span class="pln">
            </span><span class="tag">&lt;/head&gt;</span><span class="pln">
        </span><span class="tag">&lt;body&gt;</span><span class="pln">
                    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"map"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
                        </span><span class="tag">&lt;script&gt;</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> marker</span><span class="pun">,</span><span class="pln"> map</span><span class="pun">,</span><span class="pln"> add</span><span class="pun">,</span><span class="pln"> poly</span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> coordinates </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
            </span><span class="pun">[</span><span class="lit">70.7805</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270962</span><span class="pun">],[</span><span class="lit">70.7805</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270962</span><span class="pun">],[</span><span class="lit">70.7805</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270962</span><span class="pun">],[</span><span class="lit">70.7805</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270962</span><span class="pun">],[</span><span class="lit">70.7805</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270962</span><span class="pun">],[</span><span class="lit">70.7812666</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.27086</span><span class="pun">],[</span><span class="lit">70.7812516</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.2708966</span><span class="pun">],[</span><span class="lit">70.78121</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270955</span><span class="pun">],[</span><span class="lit">70.7811466</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.2710466</span><span class="pun">],[</span><span class="lit">70.7810883</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.2711133</span><span class="pun">],[</span><span class="lit">70.7810749</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.2711266</span><span class="pun">],[</span><span class="lit">70.7810516</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.2711333</span><span class="pun">],[</span><span class="lit">70.7810066</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.2711349</span><span class="pun">],[</span><span class="lit">70.78057</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271192</span><span class="pun">],[</span><span class="lit">70.780485</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270991</span><span class="pun">],[</span><span class="lit">70.780326</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271051</span><span class="pun">],[</span><span class="lit">70.780322</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271045</span><span class="pun">],[</span><span class="lit">70.780254</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271237</span><span class="pun">],[</span><span class="lit">70.780163</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271351</span><span class="pun">],[</span><span class="lit">70.779931</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271851</span><span class="pun">],[</span><span class="lit">70.779641</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.272741</span><span class="pun">],[</span><span class="lit">70.779183</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.273374</span><span class="pun">],[</span><span class="lit">70.778699</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.274174</span><span class="pun">],[</span><span class="lit">70.778463</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.274734</span><span class="pun">],[</span><span class="lit">70.778456</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.274748</span><span class="pun">],[</span><span class="lit">70.778101</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.275522</span><span class="pun">],[</span><span class="lit">70.777984</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.27572</span><span class="pun">],[</span><span class="lit">70.777934</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.275759</span><span class="pun">],[</span><span class="lit">70.777919</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.275765</span><span class="pun">],[</span><span class="lit">70.777827</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.275772</span><span class="pun">],[</span><span class="lit">70.777792</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.275753</span><span class="pun">],[</span><span class="lit">70.777518</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.27561</span><span class="pun">],[</span><span class="lit">70.776659</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.275137</span><span class="pun">],[</span><span class="lit">70.775883</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.274709</span><span class="pun">],[</span><span class="lit">70.775555</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.274529</span><span class="pun">],[</span><span class="lit">70.774687</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.274026</span><span class="pun">],[</span><span class="lit">70.773818</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.273528</span><span class="pun">],[</span><span class="lit">70.773405</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.273297</span><span class="pun">],[</span><span class="lit">70.773251</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.273211</span><span class="pun">],[</span><span class="lit">70.773177</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.273169</span><span class="pun">],[</span><span class="lit">70.772965</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.273051</span><span class="pun">],[</span><span class="lit">70.772575</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.272797</span><span class="pun">],[</span><span class="lit">70.772169</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.272528</span><span class="pun">],[</span><span class="lit">70.77123</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.272163</span><span class="pun">],[</span><span class="lit">70.770271</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.27189</span><span class="pun">],[</span><span class="lit">70.770132</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271853</span><span class="pun">],[</span><span class="lit">70.77008</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.27184</span><span class="pun">],[</span><span class="lit">70.769977</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271812</span><span class="pun">],[</span><span class="lit">70.769741</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271748</span><span class="pun">],[</span><span class="lit">70.768802</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271471</span><span class="pun">],[</span><span class="lit">70.76865</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271424</span><span class="pun">],[</span><span class="lit">70.768541</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271391</span><span class="pun">],[</span><span class="lit">70.768029</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271221</span><span class="pun">],[</span><span class="lit">70.767633</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271083</span><span class="pun">],[</span><span class="lit">70.76745</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271024</span><span class="pun">],[</span><span class="lit">70.766682</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270685</span><span class="pun">],[</span><span class="lit">70.76637</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270526</span><span class="pun">],[</span><span class="lit">70.766044</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270366</span><span class="pun">],[</span><span class="lit">70.765706</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270221</span><span class="pun">],[</span><span class="lit">70.764748</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270018</span><span class="pun">],[</span><span class="lit">70.764585</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270052</span><span class="pun">],[</span><span class="lit">70.764449</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270101</span><span class="pun">],[</span><span class="lit">70.764175</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270207</span><span class="pun">],[</span><span class="lit">70.764155</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270273</span><span class="pun">],[</span><span class="lit">70.764162</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.27032</span><span class="pun">],[</span><span class="lit">70.764183</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270352</span><span class="pun">],[</span><span class="lit">70.764209</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.27041</span><span class="pun">],[</span><span class="lit">70.764192</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.270636</span><span class="pun">],[</span><span class="lit">70.764172</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271058</span><span class="pun">],[</span><span class="lit">70.764299</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.271838</span><span class="pun">],[</span><span class="lit">70.764252</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.2723</span><span class="pun">],[</span><span class="lit">70.76414</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.2726</span><span class="pun">],[</span><span class="lit">70.763923</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.273193</span><span class="pun">],[</span><span class="lit">70.763612</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.274072</span><span class="pun">],[</span><span class="lit">70.763544</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.274286</span><span class="pun">],[</span><span class="lit">70.763477</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.274482</span><span class="pun">],[</span><span class="lit">70.763204</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.27509</span><span class="pun">],[</span><span class="lit">70.76293</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.27548</span><span class="pun">],[</span><span class="lit">70.762584</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.276097</span><span class="pun">],[</span><span class="lit">70.762353</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.277029</span><span class="pun">],[</span><span class="lit">70.76218</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.277738</span><span class="pun">],[</span><span class="lit">70.762136</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.27792</span><span class="pun">],[</span><span class="lit">70.762126</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.277959</span><span class="pun">],[</span><span class="lit">70.762076</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.278182</span><span class="pun">],[</span><span class="lit">70.762184</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.278274</span><span class="pun">],[</span><span class="lit">70.762296</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.278375</span><span class="pun">],[</span><span class="lit">70.762672</span><span class="pun">,</span><span class="pln"> </span><span class="lit">22.27871</span><span class="pun">]</span><span class="pln">
        </span><span class="pun">];</span><span class="pln">

        </span><span class="kwd">function</span><span class="pln"> initMap1</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="com">/* create map */</span><span class="pln">
            map </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> mappls</span><span class="pun">.</span><span class="typ">Map</span><span class="pun">(</span><span class="str">'map'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                center</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">22.278482453646376</span><span class="pun">,</span><span class="pln"> </span><span class="lit">70.76971779758742</span><span class="pun">],</span><span class="pln">
                zoom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10</span><span class="pln">
            </span><span class="pun">});</span><span class="pln">
            map</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">'load'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                </span><span class="com">/* create polyline */</span><span class="pln">
                poly </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> mappls</span><span class="pun">.</span><span class="typ">Polyline</span><span class="pun">({</span><span class="pln">
                    map</span><span class="pun">:</span><span class="pln"> map</span><span class="pun">,</span><span class="pln">
                    paths</span><span class="pun">:</span><span class="pln"> coordinates</span><span class="pun">,</span><span class="pln">
                    strokeColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">'blue'</span><span class="pun">,</span><span class="pln">
                    strokeOpacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.0</span><span class="pun">,</span><span class="pln">
                    strokeWeight</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln">
                    cType</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
                    fitbounds</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
                </span><span class="pun">});</span><span class="pln">
                </span><span class="com">/* create marker */</span><span class="pln">
                marker </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> mappls</span><span class="pun">.</span><span class="typ">Marker</span><span class="pun">({</span><span class="pln">
                    map</span><span class="pun">:</span><span class="pln"> map</span><span class="pun">,</span><span class="pln">
                    width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">60</span><span class="pun">,</span><span class="pln">
                    height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">60</span><span class="pun">,</span><span class="pln">
                    html</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;img id="m1" src="https://www.mapmyindia.com/api/advanced-maps/doc/sample/map_sdk/car.png" style="width:20px; margin-left:0px;" /&gt;'</span><span class="pun">,</span><span class="pln">
                    offset</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">20</span><span class="pun">,</span><span class="pln"> </span><span class="lit">5</span><span class="pun">],</span><span class="pln">
                    position</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        lat</span><span class="pun">:</span><span class="pln"> coordinates</span><span class="pun">[</span><span class="lit">0</span><span class="pun">][</span><span class="lit">1</span><span class="pun">],</span><span class="pln">
                        lng</span><span class="pun">:</span><span class="pln"> coordinates</span><span class="pun">[</span><span class="lit">0</span><span class="pun">][</span><span class="lit">0</span><span class="pun">]</span><span class="pln">
                    </span><span class="pun">},</span><span class="pln">
                    fitbounds</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pln">
                </span><span class="pun">});</span><span class="pln">
                marker</span><span class="pun">[</span><span class="str">'id'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="str">"m1"</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* store id in marker object */</span><span class="pln">
                </span><span class="kwd">var</span><span class="pln"> c </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
                smoothll</span><span class="pun">(</span><span class="pln">coordinates</span><span class="pun">,</span><span class="pln"> m </span><span class="pun">=</span><span class="pln"> </span><span class="lit">2</span><span class="pun">,</span><span class="pln"> hed </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">crd</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    start </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">add</span><span class="pun">)</span><span class="pln"> </span><span class="kwd">return</span><span class="pun">;</span><span class="pln">
                        add </span><span class="pun">=</span><span class="pln"> setInterval</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=&gt;</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                            c</span><span class="pun">++;</span><span class="pln">
                            </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">crd</span><span class="pun">[</span><span class="pln">c</span><span class="pun">])</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                marker</span><span class="pun">.</span><span class="pln">setPosition</span><span class="pun">([</span><span class="pln">crd</span><span class="pun">[</span><span class="pln">c</span><span class="pun">][</span><span class="lit">0</span><span class="pun">],</span><span class="pln"> crd</span><span class="pun">[</span><span class="pln">c</span><span class="pun">][</span><span class="lit">1</span><span class="pun">]]);</span><span class="pln"> </span><span class="com">/* change marker position */</span><span class="pln">
                                document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="pln">marker</span><span class="pun">.</span><span class="pln">id</span><span class="pun">).</span><span class="pln">style</span><span class="pun">.</span><span class="pln">transform </span><span class="pun">=</span><span class="pln"> </span><span class="str">"rotate("</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> crd</span><span class="pun">[</span><span class="pln">c</span><span class="pun">][</span><span class="lit">2</span><span class="pun">]</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="str">"deg)"</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* change heading of marker */</span><span class="pln">
                                </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">c </span><span class="pun">==</span><span class="pln"> </span><span class="pun">(</span><span class="pln">crd</span><span class="pun">.</span><span class="pln">length </span><span class="pun">-</span><span class="pln"> </span><span class="lit">1</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                    clearInterval</span><span class="pun">(</span><span class="pln">add</span><span class="pun">);</span><span class="pln">
                                </span><span class="pun">}</span><span class="pln">
                            </span><span class="pun">}</span><span class="pln">
                        </span><span class="pun">},</span><span class="pln"> </span><span class="lit">10</span><span class="pun">);</span><span class="pln">
                    </span><span class="pun">};</span><span class="pln">
                    start</span><span class="pun">();</span><span class="pln">
                </span><span class="pun">});</span><span class="pln">
            </span><span class="pun">});</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
        </span><span class="com">/* create lnglat between nodes for smooth movement of marker*/</span><span class="pln">
        </span><span class="kwd">function</span><span class="pln"> smoothll</span><span class="pun">(</span><span class="pln">arr</span><span class="pun">,</span><span class="pln"> m</span><span class="pun">,</span><span class="pln"> h</span><span class="pun">,</span><span class="pln"> call</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> prv </span><span class="pun">=</span><span class="pln"> arr</span><span class="pun">[</span><span class="lit">0</span><span class="pun">],</span><span class="pln">
                next </span><span class="pun">=</span><span class="pln"> arr</span><span class="pun">[</span><span class="lit">1</span><span class="pun">],</span><span class="pln">
                allCrd </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[],</span><span class="pln">
                mtr </span><span class="pun">=</span><span class="pln"> m</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* the number of coordinate you want meter/second */</span><span class="pln">
            </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> j </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> j </span><span class="pun">&lt;</span><span class="pln"> arr</span><span class="pun">.</span><span class="pln">length</span><span class="pun">;</span><span class="pln"> j</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                prv </span><span class="pun">=</span><span class="pln"> arr</span><span class="pun">[</span><span class="pln">j</span><span class="pun">],</span><span class="pln"> next </span><span class="pun">=</span><span class="pln"> arr</span><span class="pun">[</span><span class="pln">j </span><span class="pun">+</span><span class="pln"> </span><span class="lit">1</span><span class="pun">];</span><span class="pln">
                </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">prv </span><span class="pun">&amp;&amp;</span><span class="pln"> next</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    </span><span class="kwd">var</span><span class="pln"> hed </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
                    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">h </span><span class="pun">===</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">)</span><span class="pln"> hed </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="lit">90</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span><span class="pun">(</span><span class="pln">ac</span><span class="pun">(</span><span class="pln">prv</span><span class="pun">[</span><span class="lit">0</span><span class="pun">],</span><span class="pln"> prv</span><span class="pun">[</span><span class="lit">1</span><span class="pun">],</span><span class="pln"> next</span><span class="pun">[</span><span class="lit">0</span><span class="pun">],</span><span class="pln"> next</span><span class="pun">[</span><span class="lit">1</span><span class="pun">])));</span><span class="pln">
                    </span><span class="kwd">var</span><span class="pln"> dis </span><span class="pun">=</span><span class="pln"> dis1</span><span class="pun">(</span><span class="pln">prv</span><span class="pun">,</span><span class="pln"> next</span><span class="pun">);</span><span class="pln">
                    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">dis </span><span class="pun">&gt;</span><span class="pln"> mtr</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        </span><span class="kwd">var</span><span class="pln"> n </span><span class="pun">=</span><span class="pln"> dis </span><span class="pun">/</span><span class="pln"> mtr</span><span class="pun">;</span><span class="pln">
                        </span><span class="kwd">var</span><span class="pln"> crd </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">
                        </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> i </span><span class="pun">=</span><span class="pln"> n </span><span class="pun">-</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln"> i </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i</span><span class="pun">--)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                            crd</span><span class="pun">.</span><span class="pln">push</span><span class="pun">([</span><span class="pln">prv</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> i </span><span class="pun">/</span><span class="pln"> n </span><span class="pun">+</span><span class="pln"> next</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="pun">(</span><span class="pln">n </span><span class="pun">-</span><span class="pln"> i</span><span class="pun">)</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> n</span><span class="pun">,</span><span class="pln"> prv</span><span class="pun">[</span><span class="lit">1</span><span class="pun">]</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> i </span><span class="pun">/</span><span class="pln"> n </span><span class="pun">+</span><span class="pln"> next</span><span class="pun">[</span><span class="lit">1</span><span class="pun">]</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="pun">(</span><span class="pln">n </span><span class="pun">-</span><span class="pln"> i</span><span class="pun">)</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> n</span><span class="pun">,</span><span class="pln"> hed</span><span class="pun">]);</span><span class="pln">
                            </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">ceil</span><span class="pun">(</span><span class="pln">i</span><span class="pun">)</span><span class="pln"> </span><span class="pun">==</span><span class="pln"> </span><span class="lit">1</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                crd</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">next</span><span class="pun">);</span><span class="pln">
                            </span><span class="pun">}</span><span class="pln">
                        </span><span class="pun">}</span><span class="pln">
                    </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        crd </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">
                    </span><span class="pun">}</span><span class="pln">
                    allCrd</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">crd</span><span class="pun">);</span><span class="pln">
                </span><span class="pun">}</span><span class="pln">
            </span><span class="pun">}</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> finalcrd </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Array</span><span class="pun">.</span><span class="pln">prototype</span><span class="pun">.</span><span class="pln">concat</span><span class="pun">.</span><span class="pln">apply</span><span class="pun">([],</span><span class="pln"> allCrd</span><span class="pun">);</span><span class="pln">
            call</span><span class="pun">(</span><span class="pln">finalcrd</span><span class="pun">)</span><span class="pln">
        </span><span class="pun">};</span><span class="pln">
        </span><span class="com">/* calculate Distance between 2 point*/</span><span class="pln">
        </span><span class="kwd">function</span><span class="pln"> dis1</span><span class="pun">(</span><span class="pln">start</span><span class="pun">,</span><span class="pln"> destination</span><span class="pun">,</span><span class="pln"> radius </span><span class="pun">=</span><span class="pln"> </span><span class="lit">6371008.8</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> R </span><span class="pun">=</span><span class="pln"> radius</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> </span><span class="pun">φ</span><span class="lit">1</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> toRadians</span><span class="pun">(</span><span class="pln">start</span><span class="pun">[</span><span class="lit">1</span><span class="pun">]),</span><span class="pln">
                </span><span class="pun">λ</span><span class="lit">1</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> toRadians</span><span class="pun">(</span><span class="pln">start</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]);</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> </span><span class="pun">φ</span><span class="lit">2</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> toRadians</span><span class="pun">(</span><span class="pln">destination</span><span class="pun">[</span><span class="lit">1</span><span class="pun">]),</span><span class="pln">
                </span><span class="pun">λ</span><span class="lit">2</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> toRadians</span><span class="pun">(</span><span class="pln">destination</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]);</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> </span><span class="pun">Δφ</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">φ</span><span class="lit">2</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span><span class="pun">φ</span><span class="lit">1</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> </span><span class="pun">Δλ</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">λ</span><span class="lit">2</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span><span class="pun">λ</span><span class="lit">1</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> a </span><span class="pun">=</span><span class="pln">
                </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(Δφ</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="lit">2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(Δφ</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="lit">2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln">
                </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">cos</span><span class="pun">(φ</span><span class="lit">1</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">cos</span><span class="pun">(φ</span><span class="lit">2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(Δλ</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="lit">2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(Δλ</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="lit">2</span><span class="pun">);</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> c </span><span class="pun">=</span><span class="pln"> </span><span class="lit">2</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">atan2</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sqrt</span><span class="pun">(</span><span class="pln">a</span><span class="pun">),</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sqrt</span><span class="pun">(</span><span class="lit">1</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> a</span><span class="pun">));</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> d </span><span class="pun">=</span><span class="pln"> R </span><span class="pun">*</span><span class="pln"> c</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> d</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">};</span><span class="pln">

        </span><span class="kwd">function</span><span class="pln"> toRadians</span><span class="pun">(</span><span class="pln">value</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">(</span><span class="pln">value </span><span class="pun">/</span><span class="pln"> </span><span class="lit">180</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">PI</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">};</span><span class="pln">
        </span><span class="com">/* calculate heading between 2 point*/</span><span class="pln">
        </span><span class="kwd">function</span><span class="pln"> ac</span><span class="pun">(</span><span class="pln">lat1</span><span class="pun">,</span><span class="pln"> lon1</span><span class="pun">,</span><span class="pln"> lat2</span><span class="pun">,</span><span class="pln"> lon2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> p1 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                x</span><span class="pun">:</span><span class="pln"> lat1</span><span class="pun">,</span><span class="pln">
                y</span><span class="pun">:</span><span class="pln"> lon1
            </span><span class="pun">};</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> p2 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                x</span><span class="pun">:</span><span class="pln"> lat2</span><span class="pun">,</span><span class="pln">
                y</span><span class="pun">:</span><span class="pln"> lon2
            </span><span class="pun">};</span><span class="pln">
            </span><span class="com">/*angle in radians */</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> angleRadians </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">atan2</span><span class="pun">(</span><span class="pln">p2</span><span class="pun">.</span><span class="pln">y </span><span class="pun">-</span><span class="pln"> p1</span><span class="pun">.</span><span class="pln">y</span><span class="pun">,</span><span class="pln"> p2</span><span class="pun">.</span><span class="pln">x </span><span class="pun">-</span><span class="pln"> p1</span><span class="pun">.</span><span class="pln">x</span><span class="pun">);</span><span class="pln">
            </span><span class="com">/*angle in degrees*/</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> angleDeg </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">atan2</span><span class="pun">(</span><span class="pln">p2</span><span class="pun">.</span><span class="pln">y </span><span class="pun">-</span><span class="pln"> p1</span><span class="pun">.</span><span class="pln">y</span><span class="pun">,</span><span class="pln"> p2</span><span class="pun">.</span><span class="pln">x </span><span class="pun">-</span><span class="pln"> p1</span><span class="pun">.</span><span class="pln">x</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">180</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">PI</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> angleDeg</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">};</span><span class="pln">
    </span><span class="tag">&lt;/script&gt;</span><span class="pln">
        </span><span class="tag">&lt;/body&gt;</span><span class="pln">
      </span><span class="tag">&lt;/html&gt;</span><span class="pln">
      </span>
      <span class="pln">
      /* First install : npm install mappls-web-maps */

      import { Component, OnInit, ElementRef } from '@angular/core';
      import { mappls } from 'mappls-web-maps';
      @Component({
      selector: 'app-root',
      template: '</span><span class="tag">&lt;div</span><span class="pln">  </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"map"</span><span class="pln">  </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">99</span><span class="pun">%;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">99vh</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> white</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">',
      styleUrls: ['./app.component.css']
      })
      export class AppComponent implements OnInit {
          mapObject: any;
          mapplsClassObject = new mappls();
                  title = 'Default Map';
        mapProps = { center: [28.6330, 77.2194] }

        ngOnInit() {
        this.mapplsClassObject.map({ id: "map", key: "</span><span class="tag">&lt;Token&gt;</span><span class="pln">", properties: this.mapProps }, (data: any) =&gt; {
            this.mapObject = data;
            });
            }

              }
      </span>
      <span class="pln">
      /* First install : npm install mappls-web-maps */
      
      import { mappls } from  'mappls-web-maps';
      import  './App.css';
      function  App() {
      const  styleMap  = {width:  '99%', height:  '99vh', display:'inline-block'}
      var mapObject ;
      var mapplsClassObject=  new  mappls();
          const title="Default Map"
    const mapProps = { center: [28.6330, 77.2194]}
    const map=mapplsClassObject.map({id:"map",key:"</span><span class="tag">&lt;Token&gt;</span><span class="pln">", properties: mapProps},(data)=&gt;{
        mapObject = data;
        });
          return (
         </span><span class="tag">&lt;div</span><span class="pln">  </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"map"</span><span class="pln">  </span><span class="atn">style</span><span class="pun">={</span><span class="pln">styleMap</span><span class="pun">}</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
         );
      }
      export  default  App;
      </span>