Onclick Cluster with Callback

    
      <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">Onclick Cluster with Callback</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"> map</span><span class="pun">,</span><span class="pln"> marker</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.544</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.5454</span><span class="pun">],</span><span class="pln">
                zoom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">9</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">on</span><span class="pun">(</span><span class="str">"load"</span><span class="pun">,</span><span class="pln"> </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">
                </span><span class="kwd">var</span><span class="pln"> geoData </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"FeatureCollection"</span><span class="pun">,</span><span class="pln">
                    features</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
                        </span><span class="pun">{</span><span class="pln">
                            type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Feature"</span><span class="pun">,</span><span class="pln">
                            properties</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                htmlPopup</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Test-1"</span><span class="pun">,</span><span class="pln">
                            </span><span class="pun">},</span><span class="pln">
                            geometry</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Point"</span><span class="pun">,</span><span class="pln">
                                coordinates</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">77.5454</span><span class="pun">,</span><span class="pln"> </span><span class="lit">28.544</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">
                            type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Feature"</span><span class="pun">,</span><span class="pln">
                            properties</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                htmlPopup</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Test-2"</span><span class="pun">,</span><span class="pln">
                            </span><span class="pun">},</span><span class="pln">
                            geometry</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Point"</span><span class="pun">,</span><span class="pln">
                                coordinates</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">77.2158203125</span><span class="pun">,</span><span class="pln"> </span><span class="lit">28.271898</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">
                            type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Feature"</span><span class="pun">,</span><span class="pln">
                            properties</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                htmlPopup</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Test-3"</span><span class="pun">,</span><span class="pln">
                            </span><span class="pun">},</span><span class="pln">
                            geometry</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Point"</span><span class="pun">,</span><span class="pln">
                                coordinates</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">77.267825</span><span class="pun">,</span><span class="pln"> </span><span class="lit">28.54959</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">
                            type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Feature"</span><span class="pun">,</span><span class="pln">
                            properties</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                htmlPopup</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Test-4"</span><span class="pun">,</span><span class="pln">
                            </span><span class="pun">},</span><span class="pln">
                            geometry</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Point"</span><span class="pun">,</span><span class="pln">
                                coordinates</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">77.545452</span><span class="pun">,</span><span class="pln"> </span><span class="lit">28.54462</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">
                            type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Feature"</span><span class="pun">,</span><span class="pln">
                            properties</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                htmlPopup</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Test-5"</span><span class="pun">,</span><span class="pln">
                            </span><span class="pun">},</span><span class="pln">
                            geometry</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Point"</span><span class="pun">,</span><span class="pln">
                                coordinates</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">77.2158203145</span><span class="pun">,</span><span class="pln"> </span><span class="lit">28.271856</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">
                            type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Feature"</span><span class="pun">,</span><span class="pln">
                            properties</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                htmlPopup</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Test-5"</span><span class="pun">,</span><span class="pln">
                            </span><span class="pun">},</span><span class="pln">
                            geometry</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Point"</span><span class="pun">,</span><span class="pln">
                                coordinates</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">77.267806</span><span class="pun">,</span><span class="pln"> </span><span class="lit">28.5496</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">
                            type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Feature"</span><span class="pun">,</span><span class="pln">
                            properties</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                htmlPopup</span><span class="pun">:</span><span class="pln"> </span><span class="str">"noida"</span><span class="pun">,</span><span class="pln">
                            </span><span class="pun">},</span><span class="pln">
                            geometry</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Point"</span><span class="pun">,</span><span class="pln">
                                coordinates</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">77.54</span><span class="pun">,</span><span class="pln"> </span><span class="lit">28.54</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">
                            type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Feature"</span><span class="pun">,</span><span class="pln">
                            properties</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                htmlPopup</span><span class="pun">:</span><span class="pln"> </span><span class="str">"delhi"</span><span class="pun">,</span><span class="pln">
                            </span><span class="pun">},</span><span class="pln">
                            geometry</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                                type</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Point"</span><span class="pun">,</span><span class="pln">
                                coordinates</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="lit">77.267</span><span class="pun">,</span><span class="pln"> </span><span class="lit">28.549</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">

                marker </span><span class="pun">=</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">
                    position</span><span class="pun">:</span><span class="pln"> geoData</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">
                    cType</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
                    clusters</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">

            map</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"click"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"cluster_mkr0"</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">e</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"> features </span><span class="pun">=</span><span class="pln"> map</span><span class="pun">.</span><span class="pln">queryRenderedFeatures</span><span class="pun">(</span><span class="pln">e</span><span class="pun">.</span><span class="pln">point</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                    layers</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"cluster_mkr0"</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"> coordinates </span><span class="pun">=</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">features</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">geometry</span><span class="pun">.</span><span class="pln">coordinates</span><span class="pun">.</span><span class="pln">slice</span><span class="pun">();</span><span class="pln">
                </span><span class="kwd">var</span><span class="pln"> clusterId </span><span class="pun">=</span><span class="pln"> features</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">properties</span><span class="pun">.</span><span class="pln">cluster_id</span><span class="pun">,</span><span class="pln">
                    point_count </span><span class="pun">=</span><span class="pln"> features</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">properties</span><span class="pun">.</span><span class="pln">point_count</span><span class="pun">,</span><span class="pln">
                    clusterSource </span><span class="pun">=</span><span class="pln"> map</span><span class="pun">.</span><span class="pln">getSource</span><span class="pun">(</span><span class="str">"cluster_mkr0"</span><span class="pun">);</span><span class="pln">

                clusterSource</span><span class="pun">.</span><span class="pln">getClusterLeaves</span><span class="pun">(</span><span class="pln">
                    clusterId</span><span class="pun">,</span><span class="pln">
                    point_count</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">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">err</span><span class="pun">,</span><span class="pln"> aFeatures</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"> popupString </span><span class="pun">=</span><span class="pln"> </span><span class="str">""</span><span class="pun">;</span><span class="pln">
                        </span><span class="kwd">var</span><span class="pln"> childrenCount </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Object</span><span class="pun">.</span><span class="pln">keys</span><span class="pun">(</span><span class="pln">aFeatures</span><span class="pun">).</span><span class="pln">length</span><span class="pun">;</span><span class="pln">
                        aFeatures</span><span class="pun">.</span><span class="pln">forEach</span><span class="pun">((</span><span class="pln">feature</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">
                            popupString </span><span class="pun">+=</span><span class="pln"> feature</span><span class="pun">.</span><span class="pln">properties</span><span class="pun">.</span><span class="pln">htmlPopup </span><span class="pun">+</span><span class="pln"> </span><span class="str">"&lt;br&gt;"</span><span class="pun">;</span><span class="pln">
                        </span><span class="pun">});</span><span class="pln">
                        </span><span class="kwd">new</span><span class="pln"> mapplsgl</span><span class="pun">.</span><span class="typ">Popup</span><span class="pun">()</span><span class="pln">
                            </span><span class="pun">.</span><span class="pln">setLngLat</span><span class="pun">(</span><span class="pln">coordinates</span><span class="pun">)</span><span class="pln">
                            </span><span class="pun">.</span><span class="pln">setHTML</span><span class="pun">(</span><span class="pln">
                                </span><span class="str">"&lt;h4&gt;Total Markers in Cluster :&lt;/h4&gt;"</span><span class="pln"> </span><span class="pun">+</span><span class="pln">
                                childrenCount </span><span class="pun">+</span><span class="pln">
                                </span><span class="str">"&lt;h3&gt;Cluster Children data&lt;/h3&gt;"</span><span class="pln"> </span><span class="pun">+</span><span class="pln">
                                popupString
                            </span><span class="pun">)</span><span class="pln">
                            </span><span class="pun">.</span><span class="pln">addTo</span><span class="pun">(</span><span class="pln">map</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 = 'Simple Circle';
        mapProps = {
        center: [28.61, 77.23],
        zoomControl: true,
        location: true
        }

        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;


            new mappls().Circle({
            map: this.mapObject,
            center: { "lat": 28.61, "lng": 77.23 },
            radius: 5000

            });
            });
            }


                  }
      </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 = "Simple Circle";
    const mapProps = {zoomControl: true};
    mapplsClassObject.map(
    {
    id: "map",
    key: "</span><span class="tag">&lt;Token&gt;</span><span class="pln">",
        properties: mapProps,
        },
        (data) =&gt; {
        mapObject = data;

        mapplsClassObject.Circle({
        map: mapObject,
        center: {"lat": 28.61,"lng": 77.23 },
        radius: 5000
        });
        })
              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>