polygon.md

< Back to Table of Contents

MapmyIndia Interactive Vector Maps JS SDK for Web !

Polygon

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

Drawing Polygon

	new mappls.Polygon

Polygon

Polygon Properties

Required

• Map
• Path: This could be be the array of lat lng.

Code Snippets

	mappls_polygon = new mappls.Polygon({
		map: map,
		paths: [{"lng":"77.26872","lat": "28.55101"},
			{"lng":"77.26849","lat":"28.55099"},{"lng":"77.26831","lat":"28.55097"},
			{"lng":"77.26794","lat":"28.55093"},{"lng":"77.2676","lat":"28.55089"},
			{"lng":"77.26756","lat":"28.55123"},{"lng":"77.26758","lat":"28.55145"},
			{"lng":"77.26758","lat":"28.55168"},{"lng":"77.26759","lat":"28.55172"}]
	});

Optional Properties

• fillcolor: Fills the color of the polygon and All CSS3 colors are supported except for extended named colors.

	{
		fillcolor: "red"
	}

• fillOpacity: Fills the opacity of the polygon.

	{
		fillOpacity: 0.8
	}

• strokeColor: Fills the Stroke color of the polygon.

	{
		strokeColor: "blue"
	}

• strokeOpacity: Fills the Stroke opacity of the polygon.

	{
		strokeOpacity: "black"
	}

• fitbounds: Fits in the map layer automatically to a bound on which geoJson has made.

	{
		fitbounds: true
	}

• fitboundOptions: This shows the options aailable on the fitBound property.

	{
		fitboundOptions: {padding: 120,duration:1000}
	}

• popupHtml: This shows the message you want to print while clicking on the polygon.

	{
		popupHtml: 'Route 1'
	}

• popupOptions: Options available in printing the message through popupHtml.

	{
		popupOptions: {offset: {'bottom': [0, -20]}}
	}

Example - Code Snippets

	mappls_polygon = new mappls.Polygon({
		map: map,
		paths: [{"lng":"77.26872","lat": "28.55101"},
			{"lng":"77.26849","lat":"28.55099"},{"lng":"77.26831","lat":"28.55097"},
			{"lng":"77.26794","lat":"28.55093"},{"lng":"77.2676","lat":"28.55089"},
			{"lng":"77.26756","lat":"28.55123"},{"lng":"77.26758","lat":"28.55145"},
			{"lng":"77.26758","lat":"28.55168"},{"lng":"77.26759","lat":"28.55172"}],
		fillColor: "red",
		fillOpacity: 0.8,
		strokeColor: "red",
		strokeOpacity: 0.8,
		fitbounds: true
		fitboundOptions: {padding: 120,duration:1000},
		popupHtml: 'Route 1',
		popupOptions: {offset: {'bottom': [0, -20]}}
	});

Remove Polygon

	mappls.remove({map: map_object, layer: Polygon_object);

Polygon Events

click

	Polygon_object.addListener(('click')), function() {
			alert(`Click Event Works`);
	});

dblclick

	Polygon_object.addListener(('dblclick')), function() {
			alert(`Double Click Event Works`);
	});

drag

	Polygon_object.addListener(('drag')), function() {
			alert(`Drag Event Works`);
	});

dragstart

	Polygon_object.addListener(('dragstart')), function() {
			alert(`Drag Start Event Works`);
	});

dragend

	Polygon_object.addListener(('dragend')), function() {
			alert(`Dragend Event Works`);
	});

mousemove

	Polygon_object.addListener(('mousemove')), function() {
			alert(`Mouse Move Event Works`);
	});

mouseover

	Polygon_object.addListener(('mouseover')), function() {
			alert(`Mouse Over Event Works`);
	});

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.

Terms & Conditions | Privacy Policy | Supplier Sustainability Policy | Health & Safety Policy | Environmental Policy & CSR Report

Customer Care: +91-9999333223