In order to create a circle, call the CreateCircle method of the map object like this:
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.
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); }
You can review for the definitions of the methods below at google map Circle class.
Below are the available setters for you to customize your circle the way you want.
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); }
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); }
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.
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); }); }
A very usefull method of the circle object.
'event' and 'callback' parameter is a string
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.
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); }