Add GeoJSON

3 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">Add GeoJSON</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">

        </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="pln">
            </span><span class="pun">});</span><span class="pln">
            </span><span class="kwd">var</span><span class="pln"> mixjson </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">"FeatureCollection"</span><span class="pun">,</span><span class="pln">
                </span><span class="str">"features"</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">"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="lit">28.54950</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.2678540</span><span class="pun">]</span><span class="pln">
                        </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">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"MapmyIndia old Office"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"description"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Okhla delhi"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"icon"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"https://apis.mapmyindia.com/map_v3/1.png"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"icon-size"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"text"</span><span class="pun">:</span><span class="pln"> </span><span class="str">""</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"text-size"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"text-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="lit">0</span><span class="pun">],</span><span class="pln">
                            </span><span class="str">"text-color"</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="pln">
                    </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">"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="lit">28.5510446</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.268952</span><span class="pun">]</span><span class="pln">
                        </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">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"&lt;div onclick=\"function1()\"&gt;MapmyIndia New Office&lt;/div&gt;"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"description"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"68,Okhla delhi"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"icon"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"https://apis.mapmyindia.com/map_v3/1.png"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"icon-size"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.55</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"text"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"1"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"icon-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">20</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="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">"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">"LineString"</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">
                                </span><span class="pun">[</span><span class="lit">28.551042</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.268953</span><span class="pun">],</span><span class="pln">
                                </span><span class="pun">[</span><span class="lit">28.551005</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.268649</span><span class="pun">],</span><span class="pln">
                                </span><span class="pun">[</span><span class="lit">28.550986</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.268392</span><span class="pun">],</span><span class="pln">
                                </span><span class="pun">[</span><span class="lit">28.550967</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.268231</span><span class="pun">],</span><span class="pln">
                                </span><span class="pun">[</span><span class="lit">28.550967</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.268177</span><span class="pun">],</span><span class="pln">
                                </span><span class="pun">[</span><span class="lit">28.550958</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.268016</span><span class="pun">],</span><span class="pln">
                                </span><span class="pun">[</span><span class="lit">28.55092</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.267587</span><span class="pun">],</span><span class="pln">
                                </span><span class="pun">[</span><span class="lit">28.550722</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.267651</span><span class="pun">],</span><span class="pln">
                                </span><span class="pun">[</span><span class="lit">28.55042</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.267823</span><span class="pun">],</span><span class="pln">
                                </span><span class="pun">[</span><span class="lit">28.550128</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.267802</span><span class="pun">],</span><span class="pln">
                                </span><span class="pun">[</span><span class="lit">28.549751</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.267995</span><span class="pun">],</span><span class="pln">
                                </span><span class="pun">[</span><span class="lit">28.549652</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.268039</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="str">"properties"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                            </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Direction1"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"description"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Direction2"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"stroke"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"#33CC00"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"stroke-opacity"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.6509803921568628</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"stroke-width"</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">
                    </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">"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">"Polygon"</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">
                                </span><span class="pun">[</span><span class="pln">
                                    </span><span class="pun">[</span><span class="lit">28.550868798522835</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.26878225803375</span><span class="pun">],</span><span class="pln">
                                    </span><span class="pun">[</span><span class="lit">28.550868798522835</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.26899683475493</span><span class="pun">],</span><span class="pln">
                                    </span><span class="pun">[</span><span class="lit">28.550383454405356</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.26903975009918</span><span class="pun">],</span><span class="pln">
                                    </span><span class="pun">[</span><span class="lit">28.550388166494926</span><span class="pun">,</span><span class="pln"> </span><span class="lit">77.26883590221404</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="str">"properties"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                            </span><span class="str">"name"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"MapmyIndia Head Office"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"stroke"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"#33CC00"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"stroke-opacity"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.6509803921568628</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"stroke-width"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"fill"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"#33CC00"</span><span class="pun">,</span><span class="pln">
                            </span><span class="str">"fill-opacity"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.6509803921568628</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="kwd">var</span><span class="pln"> jsonData </span><span class="pun">=</span><span class="pln"> mappls</span><span class="pun">.</span><span class="pln">addGeoJson</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">
                data</span><span class="pun">:</span><span class="pln"> mixjson</span><span class="pun">,</span><span class="pln">
                fitbounds</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
            </span><span class="pun">});</span><span class="pln">
        </span><span class="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 = 'Add GeoJson';
      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;
		let mixjson = {
			"type": "FeatureCollection",
			"features": [{
				"type": "Feature",
				"geometry": {
					"type": "Point",
					"coordinates": [28.54950, 77.2678540]
				},
				"properties": {
					"name": "MapmyIndia old Office",
					"description": "Okhla delhi",
					"icon": "https://apis.mapmyindia.com/map_v3/1.png",
					"icon-size": 1,
					"text": "",
					"text-size": 20,
					"text-offset": [0, 0],
					"text-color": "red",
				}
			},
			{
				"type": "Feature",
				"geometry": {
					"type": "Point",
					"coordinates": [28.5510446, 77.268952]
				},
				"properties": {
					"name": "MapmyIndia New Office",
					"description": "68,Okhla delhi",
					"icon": "https://apis.mapmyindia.com/map_v3/1.png",
					"icon-size": 0.55,
					"text": "1",
					"icon-offset": [0, -20],
				}
			},
			{
				"type": "Feature",
				"geometry": {
					"type": "LineString",
					"coordinates": [
						[28.551042, 77.268953],
						[28.551005, 77.268649],
						[28.550986, 77.268392],
						[28.550967, 77.268231],
						[28.550967, 77.268177],
						[28.550958, 77.268016],
						[28.55092, 77.267587],
						[28.550722, 77.267651],
						[28.55042, 77.267823],
						[28.550128, 77.267802],
						[28.549751, 77.267995],
						[28.549652, 77.268039]
						]
					},
					"properties": {
						"name": "Direction1",
						"description": "Direction2",
						"stroke": "#33CC00",
						"stroke-opacity": 0.6509803921568628,
						"stroke-width": 10,
					}
				},
				{
					"type": "Feature",
					"geometry": {
						"type": "Polygon",
						"coordinates": [
							[
								[28.550868798522835, 77.26878225803375],
								[28.550868798522835, 77.26899683475493],
								[28.550383454405356, 77.26903975009918],
								[28.550388166494926, 77.26883590221404]
								]
								]
							},
							"properties": {
								"name": "MapmyIndia Head Office",
								"stroke": "#33CC00",
								"stroke-opacity": 0.6509803921568628,
								"stroke-width": 3,
								"fill": "#33CC00",
								"fill-opacity": 0.6509803921568628
							}
						}
						]
					};
		new mappls().addGeoJson({
			map: this.mapObject,
			data: mixjson,
			fitbounds: true
		});
	});
	}
      }
      </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 = "Add GeoJSON";
      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;
		const mixjson = {
			"type": "FeatureCollection",
			"features": [{
				"type": "Feature",
				"geometry": {
					"type": "Point",
					"coordinates": [28.54950, 77.2678540]
				},
				"properties": {
					"name": "MapmyIndia old Office",
					"description": "Okhla delhi",
					"icon": "https://apis.mapmyindia.com/map_v3/1.png",
					"icon-size": 1,
					"text": "",
					"text-size": 20,
					"text-offset": [0, 0],
					"text-color": "red",
				}
			},
			{
				"type": "Feature",
				"geometry": {
					"type": "Point",
					"coordinates": [28.5510446, 77.268952]
				},
				"properties": {
					"name": "MapmyIndia New Office",
					"description": "68,Okhla delhi",
					"icon": "https://apis.mapmyindia.com/map_v3/1.png",
					"icon-size": 0.55,
					"text": "1",
					"icon-offset": [0, -20],
				}
			},
			{
				"type": "Feature",
				"geometry": {
					"type": "LineString",
					"coordinates": [
						[28.551042, 77.268953],
						[28.551005, 77.268649],
						[28.550986, 77.268392],
						[28.550967, 77.268231],
						[28.550967, 77.268177],
						[28.550958, 77.268016],
						[28.55092, 77.267587],
						[28.550722, 77.267651],
						[28.55042, 77.267823],
						[28.550128, 77.267802],
						[28.549751, 77.267995],
						[28.549652, 77.268039]
						]
					},
					"properties": {
						"name": "Direction1",
						"description": "Direction2",
						"stroke": "#33CC00",
						"stroke-opacity": 0.6509803921568628,
						"stroke-width": 10,
					}
				},
				{
					"type": "Feature",
					"geometry": {
						"type": "Polygon",
						"coordinates": [
							[
								[28.550868798522835, 77.26878225803375],
								[28.550868798522835, 77.26899683475493],
								[28.550383454405356, 77.26903975009918],
								[28.550388166494926, 77.26883590221404]
								]
								]
								
							},
							"properties": {
								"name": "MapmyIndia Head Office",
								"stroke": "#33CC00",
								"stroke-opacity": 0.6509803921568628,
								"stroke-width": 3,
								"fill": "#33CC00",
								"fill-opacity": 0.6509803921568628
							}
						}
						]
					};
		mapplsClassObject.addGeoJson({
			map: mapObject,
			data: mixjson,
			fitbounds: true
		});
	});
      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