Back

Creating Circle

In order to create a circle, call the CreateCircle method of the map object like this:

 map.CreateCircle(lat, lng, radius, fc, fo, sw, sc, show)

lat Number
Required. The latitude of the center coordinate.
lng Number
Required. The longitude of the center coordinate.
radius Number
Optional. The radius of the circle in meters. Default is 500 meters.
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 circle when created. Default is true.

This will return a circle object.


Creating a circle

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() {
    circle = map.CreateCircle(7.0689323, 125.6114588);
}
Copy    Run   

Primary methods

 Show()
 Hide()
 Remove()

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

Setters

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

 SetCenter(lat, lng)
 SetDraggable(boolean)
 SetEditable(boolean)
 SetOptions(options) Circle options object
 SetRadius(meters)
 SetVisible(boolean)

Draggable Circle

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() {
    circle = map.CreateCircle(7.0689323, 125.6114588, 500, "#009688", 0.3, 3, "#009688", true);
    circle.SetDraggable(true);
}
Copy    Run   

Editable Circle

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() {
    circle = map.CreateCircle(7.0689323, 125.6114588, 500, "#009688", 0.3, 3, "#009688", true);
    circle.SetEditable(true);
}
Copy    Run   

Getters

Below are the available getters of the circle object.
Note: All the getter functions are asynchronous. Therefore you are required to pass a callback function.

 GetBounds(callback)
 GetCenter(callback)
 GetDraggable(callback)
 GetEditable(callback)
 GetRadius(callback)
 GetVisible(callback)

Editable Circle

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);

        btn = app.CreateButton("Get Radius");
        btn.SetOnTouch(btnOnTouch);
        btn.Hide();
        lay.AddChild(btn);

    app.AddLayout(lay);
}
function MapOnReady() {
    circle = map.CreateCircle(7.0689323, 125.6114588, 500, "#009688", 0.3, 3, "#009688", true);
    circle.SetEditable(true);
    btn.Show();
    app.ShowPopup("Make the circle larger.");
}
function btnOnTouch() {
    circle.GetRadius(function(rad){
        app.ShowPopup(rad);
    });
}
Copy    Run   

Event listener

A very usefull method of the circle object.
'event' and 'callback' parameter is a string

 AddListener(event, callback)

Available events
center_changed, click, dblclick, drag, dragend, dragstart

This will return a stringified object. So before you can use the object, parse it first.


Circle click 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() {
    circle = map.CreateCircle(7.0689323, 125.6114588, 500, "#009688", 0.3, 3, "#009688", true);
    circle.SetDraggable(true);
    circle.AddListener('dragend', 'OnCircleDragEnd');
}
function OnCircleDragEnd(e) {
    app.ShowPopup('You drag me!');
    console.log(e);
}
Copy    Run