Advance Cluster Marker

10 km
Map Data © MapmyIndia | Report
Sample Implementation

    
      <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">Advance Cluster Marker</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="com">/*Map Initialization*/</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.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">
                zoom</span><span class="pun">:</span><span class="lit">8</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">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="kwd">var</span><span class="pln"> all_data </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">let</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"> </span><span class="lit">1000</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="kwd">let</span><span class="pln"> lt </span><span class="pun">=</span><span class="pln"> randomNumber</span><span class="pun">(</span><span class="lit">26</span><span class="pun">,</span><span class="pln"> </span><span class="lit">29</span><span class="pun">);</span><span class="pln">
                    </span><span class="kwd">let</span><span class="pln"> ln </span><span class="pun">=</span><span class="pln"> randomNumber</span><span class="pun">(</span><span class="lit">76</span><span class="pun">,</span><span class="pln"> </span><span class="lit">79</span><span class="pun">);</span><span class="pln">
                    obj </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        </span><span class="str">"type"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Feature"</span><span class="pun">,</span><span class="pln">
                        </span><span class="str">"properties"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                            </span><span class="str">"htmlPopup"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"MapmyIndia "</span><span class="pun">+</span><span class="pln">i</span><span class="pun">+</span><span class="str">""</span><span class="pun">,</span><span class="pln"> </span><span class="str">"icon-size1"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.55</span><span class="pln">
                        </span><span class="pun">},</span><span class="pln">
                        </span><span class="str">"geometry"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                            </span><span class="str">"type"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Point"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"coordinates"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">lt</span><span class="pun">,</span><span class="pln"> ln</span><span class="pun">]</span><span class="pln">
                        </span><span class="pun">}</span><span class="pln">
                    </span><span class="pun">}</span><span class="pln">
                    all_data</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">obj</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"> </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">
                    position</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        </span><span class="str">"id"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"ravi"</span><span class="pun">,</span><span class="pln">
                        </span><span class="str">"type"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"FeatureCollection"</span><span class="pun">,</span><span class="pln">
                        </span><span class="str">"features"</span><span class="pun">:</span><span class="pln"> all_data
                    </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">
                    icon</span><span class="pun">:</span><span class="pln"> </span><span class="str">'https://apis.mapmyindia.com/map_v3/2.png'</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">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">40</span><span class="pun">],</span><span class="pln">
                    draggable</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln">
                    clustersOptions</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                        background</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="pun">,</span><span class="pln"> </span><span class="str">'green'</span><span class="pun">],</span><span class="pln">
                            </span><span class="pun">[</span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="str">'red'</span><span class="pun">],</span><span class="pln">
                            </span><span class="pun">[</span><span class="lit">10</span><span class="pun">,</span><span class="pln"> </span><span class="str">'yellow'</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="str">'orange'</span><span class="pun">],</span><span class="pln">
                            </span><span class="pun">[</span><span class="lit">35</span><span class="pun">,</span><span class="pln"> </span><span class="str">'blue'</span><span class="pun">]</span><span class="pln">
                        </span><span class="pun">],</span><span class="pln"> </span><span class="com">// steps in background color (in pixels)</span><span class="pln">
                        maxZoom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">7</span><span class="pun">,</span><span class="pln"> </span><span class="com">// that zoom for split cluster circle </span><span class="pln">
                        radius</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="pun">,</span><span class="pln"> </span><span class="lit">15</span><span class="pun">],</span><span class="pln">
                            </span><span class="pun">[</span><span class="lit">5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">20</span><span class="pun">],</span><span class="pln">
                            </span><span class="pun">[</span><span class="lit">10</span><span class="pun">,</span><span class="pln"> </span><span class="lit">30</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">40</span><span class="pun">],</span><span class="pln">
                            </span><span class="pun">[</span><span class="lit">35</span><span class="pun">,</span><span class="pln"> </span><span class="lit">50</span><span class="pun">],</span><span class="pln">
                        </span><span class="pun">]</span><span class="pln"> </span><span class="com">// steps in cluster radius (in pixels)</span><span class="pln">
                    </span><span class="pun">}</span><span class="pln">
                    </span><span class="com">/*Using steps expressions - introduced in background color, and radius - Produces discrete,
                    stepped results by evaluating a piecewise-constant function defined by pairs of input and 
                    output values ("stops"). Stop inputs must be numeric literals in strictly ascending order. */</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">// generate random lat lng    </span><span class="pln">
        </span><span class="kwd">function</span><span class="pln"> randomNumber</span><span class="pun">(</span><span class="pln">min</span><span class="pun">,</span><span class="pln"> max</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="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="pun">(</span><span class="pln">max </span><span class="pun">-</span><span class="pln"> min</span><span class="pun">)</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> min
        </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 = ' Advance Cluster of marker';
      mapProps = {
	  center: [28.61, 77.23],
	  zoomControl: true,
	  zoom: 8,
	  location: true,
      }
      randomNumber=(min: number, max: number)=&gt; {
	  return Math.random() * (max - min) + min
      }


      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;
		this.mapObject.addListener('load', () =&gt; {
			let all_data = [];
			for (let i = 0; i &lt; 1000; i++) {
				let lt = randomNumber(26, 29);
				let ln = randomNumber(76, 79);
				let obj = {
					"type": "Feature",
					"properties": {
						"htmlPopup": "MapmyIndia " + i + "", "icon-size1": 0.55
					},
					"geometry": {
						"type": "Point",
						"coordinates": [lt, ln]
					}
				}
				all_data.push(obj);
			}
			new mappls().Marker({
				map: this.mapObject,
				position: {
					"id": "Neel",
					"type": "FeatureCollection",
					"features": all_data
				},
				fitbounds: true,
				icon: 'https://apis.mapmyindia.com/map_v3/2.png',
				offset: [0, -40],
				draggable: false,
				clustersOptions: {
					background: [
						[2, 'green'],
						[5, 'red'],
						[10, 'yellow'],
						[20, 'orange'],
						[35, 'blue']
					], // steps in background color (in pixels)
					maxZoom: 7, // that zoom for split cluster circle 
					radius: [
						[2, 15],
						[5, 20],
						[10, 30],
						[20, 40],
						[35, 50],
						] // steps in cluster radius (in pixels)
					}
				});
			});
		});
	}
      }
      </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 = "Advance Cluster Marker";
      const mapProps = { center: [28.61, 77.23] };
      mapplsClassObject.map(
	{
		id: "map",
		key: "</span><span class="tag">&lt;Token&gt;</span><span class="pln">",
		properties: mapProps,
	},
	(data) =&gt; {
		mapObject = data;
		mapObject.addListener("load", () =&gt; {
			const all_data = [];
			for (let i = 0; i &lt; 1000; i++) {
				let lt = randomNumber(26, 29);
				let ln = randomNumber(76, 79);
				const obj = {
					type: "Feature",
					properties: {
						htmlPopup: "MapmyIndia " + i + "",
						"icon-size1": 0.55,
					},
					geometry: {
						type: "Point",
						coordinates: [lt, ln],
					},
				};
				all_data.push(obj);
			}
			mapplsClassObject.Marker({
				map: mapObject,
				position: {
					id: "ravi",
					type: "FeatureCollection",
					features: all_data,
				},
				fitbounds: true,
				icon: "https://apis.mapmyindia.com/map_v3/2.png",
				offset: [0, -40],
				draggable: false,
				clustersOptions: {
					background: [
						[2, "green"],
						[5, "red"],
						[10, "yellow"],
						[20, "orange"],
						[35, "blue"],
					],
					maxZoom: 7,
					radius: [
						[2, 15],
						[5, 20],
						[10, 30],
						[20, 40],
						[35, 50],
					],
				},
			});
		});
	});
	const randomNumber = (min, max) =&gt; {
		return Math.random() * (max - min) + min;
	};
      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>
Request Call Back
There's so much that Mappls MapmyIndia can do for your enterprise or individual requirements. Explore our website to learn more or request a callback/email if you'd like us to connect with you.
For Solutions : +91-7829 774 111
For Gadgets : +91-9999 333 223