Bezier Curve Dashed 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">Bezier Curve Dashed 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">
        curveLine </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">p</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"> strt</span><span class="pun">,</span><span class="pln"> end</span><span class="pun">,</span><span class="pln"> ang </span><span class="pun">=</span><span class="pln"> </span><span class="lit">45</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">p</span><span class="pun">.</span><span class="pln">start </span><span class="pun">!=</span><span class="pln"> </span><span class="kwd">undefined</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> strt </span><span class="pun">=</span><span class="pln"> p</span><span class="pun">.</span><span class="pln">start </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">p</span><span class="pun">.</span><span class="pln">end </span><span class="pun">!=</span><span class="pln"> </span><span class="kwd">undefined</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> end </span><span class="pun">=</span><span class="pln"> p</span><span class="pun">.</span><span class="pln">end </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">p</span><span class="pun">.</span><span class="pln">angle </span><span class="pun">!=</span><span class="pln"> </span><span class="kwd">undefined</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> ang </span><span class="pun">=</span><span class="pln"> p</span><span class="pun">.</span><span class="pln">angle </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">ang </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">45</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"Angle should be less than 45."</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</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">strt </span><span class="pun">||</span><span class="pln"> </span><span class="pun">!</span><span class="pln">end</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"Start and End point required."</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</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"> st_lat </span><span class="pun">=</span><span class="pln"> strt</span><span class="pun">.</span><span class="pln">lat</span><span class="pun">,</span><span class="pln"> st_lng </span><span class="pun">=</span><span class="pln"> strt</span><span class="pun">.</span><span class="pln">lng</span><span class="pun">,</span><span class="pln"> end_lat </span><span class="pun">=</span><span class="pln"> end</span><span class="pun">.</span><span class="pln">lat</span><span class="pun">,</span><span class="pln"> end_lng </span><span class="pun">=</span><span class="pln"> end</span><span class="pun">.</span><span class="pln">lng</span><span class="pun">,</span><span class="pln"> fx </span><span class="pun">=</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> fy </span><span class="pun">=</span><span class="pln"> ang </span><span class="pun">&lt;</span><span class="pln"> </span><span class="lit">45</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> </span><span class="lit">0.8</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"> points </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[],</span><span class="pln"> path </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[],</span><span class="pln"> resolution </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0.01</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> bearing1 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">bearing</span><span class="pun">(</span><span class="pln">st_lat</span><span class="pun">,</span><span class="pln"> st_lng</span><span class="pun">,</span><span class="pln"> end_lat</span><span class="pun">,</span><span class="pln"> end_lng</span><span class="pun">);</span><span class="pln">
            bearing1 </span><span class="pun">=</span><span class="pln"> bearing1 </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">180</span><span class="pln"> </span><span class="pun">?</span><span class="pln"> bearing1 </span><span class="pun">+</span><span class="pln"> ang </span><span class="pun">:</span><span class="pln"> bearing1 </span><span class="pun">-</span><span class="pln"> ang</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> dia </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">distance</span><span class="pun">(</span><span class="pln">st_lat</span><span class="pun">,</span><span class="pln"> st_lng</span><span class="pun">,</span><span class="pln"> end_lat</span><span class="pun">,</span><span class="pln"> end_lng</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> fx</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> hyp </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">2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="pun">((</span><span class="pln">dia </span><span class="pun">*</span><span class="pln"> fy</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"> pos </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">destinationpoint</span><span class="pun">(</span><span class="pln">strt</span><span class="pun">,</span><span class="pln"> bearing1</span><span class="pun">,</span><span class="pln"> hyp</span><span class="pun">);</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> mid_lat </span><span class="pun">=</span><span class="pln"> pos</span><span class="pun">.</span><span class="pln">lat</span><span class="pun">,</span><span class="pln"> mid_lng </span><span class="pun">=</span><span class="pln"> pos</span><span class="pun">.</span><span class="pln">lng</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="pln">it </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> it </span><span class="pun">&lt;=</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln"> it </span><span class="pun">+=</span><span class="pln"> resolution</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> points</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">getBezier</span><span class="pun">({</span><span class="pln"> x</span><span class="pun">:</span><span class="pln"> st_lat</span><span class="pun">,</span><span class="pln"> y</span><span class="pun">:</span><span class="pln"> st_lng</span><span class="pun">,</span><span class="pln"> </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"> mid_lat</span><span class="pun">,</span><span class="pln"> y</span><span class="pun">:</span><span class="pln"> mid_lng</span><span class="pun">,</span><span class="pln"> </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"> end_lat</span><span class="pun">,</span><span class="pln"> y</span><span class="pun">:</span><span class="pln"> end_lng</span><span class="pun">,</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> it</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"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> i </span><span class="pun">&lt;</span><span class="pln"> points</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"> i</span><span class="pun">++)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                path</span><span class="pun">.</span><span class="pln">push</span><span class="pun">({</span><span class="pln"> lat</span><span class="pun">:</span><span class="pln"> points</span><span class="pun">[</span><span class="pln">i</span><span class="pun">].</span><span class="pln">x</span><span class="pun">,</span><span class="pln"> lng</span><span class="pun">:</span><span class="pln"> points</span><span class="pun">[</span><span class="pln">i</span><span class="pun">].</span><span class="pln">y </span><span class="pun">});</span><span class="pln">
            </span><span class="pun">};</span><span class="pln">
            setTimeout</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">
                path</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">strt</span><span class="pun">);</span><span class="pln">
                </span><span class="kwd">return</span><span class="pln"> call</span><span class="pun">(</span><span class="pln">path</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">
        B1 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">t</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"> t </span><span class="pun">*</span><span class="pln"> t</span><span class="pun">;</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
        B2 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">t</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="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="pln"> </span><span class="pun">-</span><span class="pln"> t</span><span class="pun">)</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> t</span><span class="pun">;</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
        B3 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">t</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="lit">1</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> t</span><span class="pun">)</span><span class="pln"> </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"> t</span><span class="pun">);</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
        getBezier </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">C1</span><span class="pun">,</span><span class="pln"> C2</span><span class="pun">,</span><span class="pln"> C3</span><span class="pun">,</span><span class="pln"> percent</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"> pos </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{};</span><span class="pln">
            pos</span><span class="pun">.</span><span class="pln">x </span><span class="pun">=</span><span class="pln"> C1</span><span class="pun">.</span><span class="pln">x </span><span class="pun">*</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">B1</span><span class="pun">(</span><span class="pln">percent</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> C2</span><span class="pun">.</span><span class="pln">x </span><span class="pun">*</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">B2</span><span class="pun">(</span><span class="pln">percent</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> C3</span><span class="pun">.</span><span class="pln">x </span><span class="pun">*</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">B3</span><span class="pun">(</span><span class="pln">percent</span><span class="pun">);</span><span class="pln">
            pos</span><span class="pun">.</span><span class="pln">y </span><span class="pun">=</span><span class="pln"> C1</span><span class="pun">.</span><span class="pln">y </span><span class="pun">*</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">B1</span><span class="pun">(</span><span class="pln">percent</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> C2</span><span class="pun">.</span><span class="pln">y </span><span class="pun">*</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">B2</span><span class="pun">(</span><span class="pln">percent</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> C3</span><span class="pun">.</span><span class="pln">y </span><span class="pun">*</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">B3</span><span class="pun">(</span><span class="pln">percent</span><span class="pun">);</span><span class="pln">
            </span><span class="kwd">return</span><span class="pln"> pos</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">},</span><span class="pln">
        distance </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </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">const</span><span class="pln"> R </span><span class="pun">=</span><span class="pln"> </span><span class="lit">6378137</span><span class="pun">;</span><span class="pln"> </span><span class="com">// metres</span><span class="pln">
            </span><span class="kwd">const</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"> </span><span class="pun">(</span><span class="pln">lat1 </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="lit">180</span><span class="pun">;</span><span class="pln"> </span><span class="com">// φ, λ in radians</span><span class="pln">
            </span><span class="kwd">const</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="pln">lat2 </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="lit">180</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">const</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">lat2 </span><span class="pun">-</span><span class="pln"> lat1</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="lit">180</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">const</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">lon2 </span><span class="pun">-</span><span class="pln"> lon1</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="lit">180</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">const</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">const</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">const</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="com">// in metres</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">
        bearing </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </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="pun">,</span><span class="pln"> </span><span class="pun">λ</span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </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="kwd">const</span><span class="pln"> lat1 </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"> </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="lit">180</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">const</span><span class="pln"> lat2 </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="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="lit">180</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">const</span><span class="pln"> dLon </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="pun">*</span><span class="pln"> </span><span class="pun">(</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="lit">180</span><span class="pun">);</span><span class="pln">
            </span><span class="kwd">const</span><span class="pln"> y </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">dLon</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="pln">lat2</span><span class="pun">);</span><span class="pln">
            </span><span class="kwd">const</span><span class="pln"> x </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="pln">lat1</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">lat2</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">lat1</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="pln">lat2</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="pln">dLon</span><span class="pun">);</span><span class="pln">
            </span><span class="kwd">const</span><span class="pln"> brng </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">y</span><span class="pun">,</span><span class="pln"> x</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">brng </span><span class="pun">*</span><span class="pln"> </span><span class="pun">(</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="pun">+</span><span class="pln"> </span><span class="lit">360</span><span class="pun">)</span><span class="pln"> </span><span class="pun">%</span><span class="pln"> </span><span class="lit">360</span><span class="pun">;</span><span class="pln">
        </span><span class="pun">},</span><span class="pln">
        destinationpoint </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">point</span><span class="pun">,</span><span class="pln"> brng</span><span class="pun">,</span><span class="pln"> dist</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            dist </span><span class="pun">=</span><span class="pln"> dist </span><span class="pun">/</span><span class="pln"> </span><span class="lit">6378137</span><span class="pun">;</span><span class="pln">
            brng </span><span class="pun">=</span><span class="pln"> brng </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="lit">180</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> lat1 </span><span class="pun">=</span><span class="pln"> point</span><span class="pun">.</span><span class="pln">lat </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="lit">180</span><span class="pun">,</span><span class="pln"> lon1 </span><span class="pun">=</span><span class="pln"> point</span><span class="pun">.</span><span class="pln">lng </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="lit">180</span><span class="pun">;</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> lat2 </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Math</span><span class="pun">.</span><span class="pln">asin</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">sin</span><span class="pun">(</span><span class="pln">lat1</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="pln">dist</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="pln">lat1</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">dist</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="pln">brng</span><span class="pun">));</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> lon2 </span><span class="pun">=</span><span class="pln"> lon1 </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">sin</span><span class="pun">(</span><span class="pln">brng</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">dist</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="pln">lat1</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="pln">dist</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">lat1</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">lat2</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"> lat</span><span class="pun">:</span><span class="pln"> lat2 </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"> lng</span><span class="pun">:</span><span class="pln"> lon2 </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="pun">}</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> map</span><span class="pun">,</span><span class="pln">polyline</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">
            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">28.61</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.23</span><span class="pun">],</span><span class="pln">
                zoomControl</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
                location</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
            </span><span class="pun">});</span><span class="pln">
            map</span><span class="pun">.</span><span class="pln">addListener</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="pln"> </span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                curveLine</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"> lng</span><span class="pun">:</span><span class="pln"> </span><span class="lit">77.27428863526279</span><span class="pun">,</span><span class="pln"> lat</span><span class="pun">:</span><span class="pln"> </span><span class="lit">28.550908438470714</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
                    end</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> lng</span><span class="pun">:</span><span class="pln"> </span><span class="lit">77.53557294755876</span><span class="pun">,</span><span class="pln"> lat</span><span class="pun">:</span><span class="pln"> </span><span class="lit">28.660477852756003</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
                    angle</span><span class="pun">:</span><span class="pln"> </span><span class="lit">30</span><span class="pln"> </span><span class="com">// lessthan 45 deegree </span><span class="pln">
                </span><span class="pun">},</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">data</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    </span><span class="com">//console.log(data);</span><span class="pln">
                    </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">polyline</span><span class="pun">)</span><span class="pln"> mappls</span><span class="pun">.</span><span class="pln">remove</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"> layer</span><span class="pun">:</span><span class="pln"> polyline </span><span class="pun">});</span><span class="pln">
                    polyline </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"> data</span><span class="pun">,</span><span class="pln">
                        strokeColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">"#333"</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">
                        dasharray</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">2</span><span class="pun">,</span><span class="pln"> </span><span class="lit">2</span><span class="pun">],</span><span class="pln">
                        strokeWeight</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2</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="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="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 = "Bezier Curve Dashed Polyline";
      polylineObj : any;
      mapProps = { center: [28.6330, 77.2194], traffic:  false, zoom:  4, geolocation:  false, clickableIcons:  false }

      curveLine =  (p:any, call:any) : any =&gt; {
        var strt : any, end, ang = 45;
        if (p.start != undefined) { strt = p.start }
        if (p.end != undefined) { end = p.end }
        if (p.angle != undefined) { ang = p.angle };
        if (ang &gt; 45) { console.log("Angle should be less than 45."); return false; }
        if (!strt || !end) { console.log("Start and End point required."); return false; }
        var st_lat = strt.lat, st_lng = strt.lng, end_lat = end.lat, end_lng = end.lng, fx = 1, fy = ang &lt; 45 ? 0.8 : 1, points : any = [], path : any = [], resolution = 0.01;
        var bearing1 = this.bearing(st_lat, st_lng, end_lat, end_lng);
        bearing1 = bearing1 &gt; 180 ? bearing1 + ang : bearing1 - ang;
        var dia = this.distance(st_lat, st_lng, end_lat, end_lng) * fx;
        var hyp = Math.sqrt(2) * ((dia * fy) / 2);
        var pos = this.destinationpoint(strt, bearing1, hyp);
        var mid_lat = pos.lat, mid_lng = pos.lng;
        for (var it = 0; it &lt;= 1; it += resolution) { points.push(this.getBezier({ x: st_lat, y: st_lng, }, { x: mid_lat, y: mid_lng, }, { x: end_lat, y: end_lng, }, it)); }
        for (var i = 0; i &lt; points.length - 1; i++) {
            path.push({ lat: points[i].x, lng: points[i].y });
        };
        setTimeout(() =&gt; {
            path.push(strt);
            return call(path);
        }, 100);
      }

      B1 = function (t:any) : any { return t * t; }
      B2 = function (t:any) : any { return 2 * (1 - t) * t; }
      B3 = function (t:any) : any { return (1 - t) * (1 - t); }

      getBezier =  (C1 : any, C2 : any, C3 : any, percent : any) =&gt; {
        var pos : any = [];
        pos.x = C1.x * this.B1(percent) + C2.x * this.B2(percent) + C3.x * this.B3(percent);
        pos.y = C1.y * this.B1(percent) + C2.y * this.B2(percent) + C3.y * this.B3(percent);
        return pos;
      }

      distance = (lat1 : any, lon1 : any, lat2 : any, lon2 : any) =&gt; {
        const R = 6378137; // metres
        const φ1 = (lat1 * Math.PI) / 180; // φ, λ in radians
        const φ2 = (lat2 * Math.PI) / 180;
        const Δφ = ((lat2 - lat1) * Math.PI) / 180;
        const Δλ = ((lon2 - lon1) * Math.PI) / 180;
        const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        const d = R * c; // in metres
        return d;
      }

      bearing = (λ1 : any, φ1 : any, λ2 : any, φ2 : any) =&gt; {
        const lat1 = (λ1 * Math.PI) / 180;
        const lat2 = (λ2 * Math.PI) / 180;
        const dLon = (φ2 - φ1) * (Math.PI / 180);
        const y = Math.sin(dLon) * Math.cos(lat2);
        const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
        const brng = Math.atan2(y, x);
        return (brng * (180 / Math.PI) + 360) % 360;
      }

      destinationpoint = (point : any, brng : any, dist : any) =&gt; {
        dist = dist / 6378137;
        brng = brng * Math.PI / 180;
        var lat1 = point.lat * Math.PI / 180, lon1 = point.lng * Math.PI / 180;
        var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) + Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
        var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) * Math.cos(lat1), Math.cos(dist) - Math.sin(lat1) * Math.sin(lat2));
        return { lat: lat2 * 180 / Math.PI, lng: lon2 * 180 / Math.PI };
      }

      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 //callback function return map object
      this.curveLine({
        start: { lng: 77.27428863526279, lat: 28.550908438470714 },
        end: { lng: 77.53557294755876, lat: 28.660477852756003 },
        angle: 30 // less than 45 degree 
      },  (data:any) =&gt; {
        if (this.polylineObj)  this.mapplsClassObject.removeLayer({ map: this.mapObject, layer: this.polylineObj });
        this.polylineObj =  this.mapplsClassObject.Polyline({
            map: this.mapObject,
            path: data,
            strokeColor: "#333",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            fitbounds: true,
            dasharray: [2, 2],
        });
      });
      });
}
      }
      </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 = "Bezier Curve Dashed Polyline";
  const mapProps = { center: [28.544, 77.2454] };
  mapplsClassObject.map(
    {
      id: "map",
      key: "</span><span class="tag">&lt;Token&gt;</span><span class="pln">",
      properties: mapProps,
    },
    (data) =&gt; {
        const mapObject = data;
        const curveLine = (p, call)=&gt; {
            var strt,
              end,
              ang = 45;
            if (p.start != undefined) {
              strt = p.start;
            }
            if (p.end != undefined) {
              end = p.end;
            }
            if (p.angle != undefined) {
              ang = p.angle;
            }
            if (ang &gt; 45) {
              console.log("Angle should be less than 45.");
              return false;
            }
            if (!strt || !end) {
              console.log("Start and End point required.");
              return false;
            }
            var st_lat = strt.lat,
              st_lng = strt.lng,
              end_lat = end.lat,
              end_lng = end.lng,
              fx = 1,
              fy = ang &lt; 45 ? 0.8 : 1,
              points = [],
              path = [],
              resolution = 0.01;
            var bearing1 = bearing(st_lat, st_lng, end_lat, end_lng);
            bearing1 = bearing1 &gt; 180 ? bearing1 + ang : bearing1 - ang;
            var dia = distance(st_lat, st_lng, end_lat, end_lng) * fx;
            var hyp = Math.sqrt(2) * ((dia * fy) / 2);
            var pos = destinationpoint(strt, bearing1, hyp);
            var mid_lat = pos.lat,
              mid_lng = pos.lng;
            for (let it = 0; it &lt;= 1; it += resolution) {
              points.push(
                getBezier(
                  { x: st_lat, y: st_lng },
                  { x: mid_lat, y: mid_lng },
                  { x: end_lat, y: end_lng },
                  it
                )
              );
            }
            for (var i = 0; i &lt; points.length - 1; i++) {
              path.push({ lat: points[i].x, lng: points[i].y });
            }
            setTimeout(() =&gt; {
              path.push(strt);
              return call(path);
            }, 100);
          };
        
         const B1 =  (t)=&gt; {
            return t * t;
          };
          const B2 =  (t)=&gt; {
            return 2 * (1 - t) * t;
          };
          const B3 =  (t)=&gt; {
            return (1 - t) * (1 - t);
          };
        
        const  getBezier =  (C1, C2, C3, percent)=&gt; {
            var pos = {};
            pos.x = C1.x * B1(percent) + C2.x * B2(percent) + C3.x * B3(percent);
            pos.y = C1.y * B1(percent) + C2.y * B2(percent) + C3.y * B3(percent);
            return pos;
        }
        const distance =  (lat1, lon1, lat2, lon2)=&gt; {
            const R = 6378137; // metres
            const φ1 = (lat1 * Math.PI) / 180; // φ, λ in radians
            const φ2 = (lat2 * Math.PI) / 180;
            const Δφ = ((lat2 - lat1) * Math.PI) / 180;
            const Δλ = ((lon2 - lon1) * Math.PI) / 180;
            const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + Math.cos(φ1) * Math.cos(φ2) * Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            const d = R * c; // in metres
            return d;
        }
        const bearing =  (λ1, φ1, λ2, φ2)=&gt; {
            const lat1 = (λ1 * Math.PI) / 180;
            const lat2 = (λ2 * Math.PI) / 180;
            const dLon = (φ2 - φ1) * (Math.PI / 180);
            const y = Math.sin(dLon) * Math.cos(lat2);
            const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(dLon);
            const brng = Math.atan2(y, x);
            return (brng * (180 / Math.PI) + 360) % 360;
        }
        const destinationpoint = (point, brng, dist)=&gt; {
            dist = dist / 6378137;
            brng = brng * Math.PI / 180;
            var lat1 = point.lat * Math.PI / 180, lon1 = point.lng * Math.PI / 180;
            var lat2 = Math.asin(Math.sin(lat1) * Math.cos(dist) + Math.cos(lat1) * Math.sin(dist) * Math.cos(brng));
            var lon2 = lon1 + Math.atan2(Math.sin(brng) * Math.sin(dist) * Math.cos(lat1), Math.cos(dist) - Math.sin(lat1) * Math.sin(lat2));
            return { lat: lat2 * 180 / Math.PI, lng: lon2 * 180 / Math.PI };
        }
      mapObject.addListener('load',()=&gt; {
        curveLine({
            start: { lng: 77.27428863526279, lat: 28.550908438470714 },
            end: { lng: 77.53557294755876, lat: 28.660477852756003 },
            angle: 30 // lessthan 45 deegree 
        }, function (data) {
            console.log(data);
            // if (polyline) mapplsClassObject.remove({ map: mapObject, layer: polyline });
           const polyline = new mapplsClassObject.Polyline({
                map: mapObject,
                path: data,
                strokeColor: "#333",
                strokeOpacity: 1.0,
                strokeWeight: 2,
                fitbounds: true,
                dasharray: [2, 2],
            });
        });
    })
    }
  );
      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>