Back

Creating Polygon

In order to create a polygon, call the CreatePolygon method of the map object like this:

 map.CreatePolygon(path, fc, fo, sw, sc, show)

path Array
Required. An array of latLng literal coordinates to be connected by a line
fc String
Optional. Fill color
fo Number
Optional. Fill color opacity [0-1]
sw Number
Optional. Stroke weight in pixels
sc String
Optional. Stroke color
show Boolean
Optional. Whether to show or hide the polygon when created. Default is true.

This will return a polygon object.

Note: You don't need to repeat the first coordinate as the last element of the path Array. Google map will automatically connect the last coordinate to the first coordinate in the array.


Creating a polygon

app.LoadPlugin("MapView");

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.9, 0.5, 7.0689323, 125.6114588, 13);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    var path = [
        {lat: 7.069226, lng: 125.604101},
        {lat: 7.067352, lng: 125.608382}, 
        {lat: 7.070056, lng: 125.610388},
        {lat: 7.071771, lng: 125.607009}
    ];
    polygon = map.CreatePolygon(path, "#009688", 0.1, 2, "#009688");
}
Copy    Run   

Primary methods

 Show()
 Hide()
 Remove()

You can review for the definitions of the methods below at google map Polygon class.

Setters

Below are the available setters for you to customize your polygon the way you want.

 SetDraggable(boolean)
 SetEditable(boolean)
 SetOptions(options) Polygon options object
 SetPath(path) Path array
 SetPaths(paths) Path array of arrays
 SetVisible(boolean)

Getters

Below are the available getters of the polygon object.
Note: All the getter functions are asynchronous. Therefore you are required to pass a callback function. Note: For version 1.11 onwards, calling GetPath is asynchronous.So there's no need to pass a callback

 GetDraggable(callback)
 GetEditable(callback)
 GetPath(callback) --> For asynchronous call, don't pass a callback
 GetPaths(callback)
 GetVisible(callback)

Event listener

You might need this at some point.
'event' and 'callback' parameter is a string

 AddListener(event, callback)

Available events
click, dblclick, drag, dragend, dragstart

This will return a stringified object. So before you can use the object, parse it first using JSON.parse(e)


Polygon drag event

app.LoadPlugin("MapView");

function OnStart() {
    lay = app.CreateLayout("Linear", "VCenter, FillXY");
        
        var apiKey = "AIzaSyD2eHntKEmh272p3ac6YjWPbPkwo3m2mck";
        
        map = app.CreateMapView(apiKey, 0.9, 0.5, 7.0689323, 125.6114588);
        map.SetOnReady(MapOnReady);
        lay.AddChild(map);

    app.AddLayout(lay);
}
function MapOnReady() {
    var path = [
        {lat: 7.069226, lng: 125.604101},
        {lat: 7.067352, lng: 125.608382},
        {lat: 7.070056, lng: 125.610388},
        {lat: 7.071771, lng: 125.607009}
    ];
    polygon = map.CreatePolygon(path, "#009688", 0.1, 2, "#009688");
    polygon.SetDraggable(true);
    polygon.AddListener('drag', 'OnDrag');
}
function OnDrag(e) {
    app.ShowPopup('Heyy! Heyy! Where are you putting me.');
    console.log(e);
}
Copy    Run