Skip to content

Latest commit

 

History

History
281 lines (239 loc) · 7.94 KB

geoJson.md

File metadata and controls

281 lines (239 loc) · 7.94 KB
Raw

< Back to Table of Contents

MapmyIndia Interactive Vector Maps JS SDK for Web !

For access, you can get your api key from Mappls Console

GeoJSON Overlays

Supported Object Types

  • Markers

  • Polylines

  • Polygons

Overlaying Objects via GeoJSON on map

Add GeoJSON Properties

Required

  • Map
  • data: This could be be in the form of 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": "<div onclick=\"function1()\">MapmyIndia New Office</div>",
				"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
			}

Optional

  • fitbounds: Automatically adjusts the map layer to fit within the boundaries defined by the GeoJSON data.
	{
		fitbounds: true
	}
  • fitboundOptions: This shows the options available on the fitBound property.
	{
		fitboundOptions: {padding: 120,duration:1000}
	}
  • cType: It is for geojson data geometry
    • 0: for lat,lng combination (Default)
    • 1: for lng,lat conbination
    {
        cType: 1
    }

addGeoJson Method

mappls.addGeoJson()

	for marker can use : "icon": "1.png", "icon-size":0.55, "icon-offset":[0,-20],
	var mixjson={ 
		"type": "FeatureCollection", 
		"features": [
			{ 
				"type": "Feature", 
				"geometry": {
					"type": "Point",
					"coordinates": [ 77.268038, 28.549652, 0 ] 
					}, 
				"properties": { 
					"name": "MapmyIndia old Office", 
					"description": "Okhla delhi", 
					"styleUrl": "#mmi_office", 
					"styleHash": "-3cca3c32", 
					"icon": "1.png", 
					"stroke": "#33CC00", 
					"stroke-opacity": 0.6509803921568628, 
					"stroke-width": 10, 
					"fill": "#FF0000", 
					"fill-opacity": 0.10196078431372549 
					} 
			}, 
			{ 
				"type": "Feature", 
				"geometry": { 
					"type": "Point", 
					"coordinates": [ 77.268952, 28.5510446, 0 ] 
					}, 
				"properties": { 
					"name": "MapmyIndia New Office", 
					"description": "68,Okhla delhi", 
					"styleUrl": "#mmi_office", 
					"styleHash": "-3cca3c32", 
					"icon": "1.png", 
					"stroke": "#33CC00", 
					"stroke-opacity": 0.6509803921568628, 
					"stroke-width": 10, 
					"fill": "#FF0000", 
					"fill-opacity": 0.10196078431372549 
					} 
			}, 
			{ 
				"type": "Feature", 
				"geometry": { 
					"type": "LineString", 
					"coordinates": [[ 77.268953, 28.551042 ], [ 77.268649, 28.551005 ], 
						[ 77.268392, 28.550986 ], [ 77.268231, 28.550967 ], 
						[ 77.268177, 28.550967 ], [ 77.268016, 28.550958 ], 
						[ 77.267587, 28.55092 ], [ 77.267651, 28.550722 ], 
						[ 77.267823, 28.55042 ], [ 77.267802, 28.550128 ], 
						[ 77.267995, 28.549751 ], [ 77.268039, 28.549652 ]]
					}, 
				"properties": { 
					"name": "Direction1", 
					"styleUrl": "#mmi_office", 
					"styleHash": "-3cca3c32", 
					"icon": "1.png", 
					"description": "Direction2", 
					"stroke": "#33CC00", 
					"stroke-opacity": 0.6509803921568628, 
					"stroke-width": 10, 
					"fill": "#FF0000", 
					"fill-opacity": 1.10196078431372549 
					} 
				}, 
				{ 
					"type": "Feature", 
					"geometry": { 
						"type": "Polygon", 
						"coordinates": [[ 77.2687822, 28.550868 ],[ 77.268996, 28.550868 ],
							[ 77.269039, 28.550383 ], [ 77.268835, 28.550388]] 
						}, 
					"properties": { 
						"name": "MapmyIndia Head Office", 
						"styleUrl": "#mmi_area", 
						"styleHash": "5617b970", 
						"stroke": "#33CC00", 
						"stroke-opacity": 0.6509803921568628, 
						"stroke-width": 3, 
						"fill": "#33CC00", 
						"fill-opacity": 0.6509803921568628 
						} 
				}] 
		};
	var mix=mappls.addGeoJson({
		map:map,
		data:mixjson,
		overlap:false, //or false; default: true; not mandatory for markers.
		preserveViewport:true
	});

Additional Properties for Markers

	"icon": "1.png",  //for customizing marker
	"icon-size":1,  // size percentage of the marker: ranging from 
	"text":"2",  // text on marker
	"text-size":10,  // font size on marker
	"text-offset":[0,0],  //map anchor offset from the center of icon image.
	"text-color":"red" //color of text on marker

Remove GeoJSON Layer

	mappls.remove({map:map,layer:geoJSONLayer});

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!





@ Copyright 2022 CE Info Systems Ltd. All Rights Reserved.