Circle class

This class extends BaseClass.

Contents

• Overview
  • Create one circle
  • Click event
  • bindTo() method
• API Reference

---

Overview

Create one circle

The map.addCircleSync() method adds one circle onto the map.

loadMap() {

  let GOOGLE: ILatLng = {"lat" : 37.422858, "lng" : -122.085065};
  this.map = GoogleMaps.create('map_canvas');

  // Add circle
  let circle: Circle = this.map.addCircleSync({
    'center': GOOGLE,
    'radius': 300,
    'strokeColor' : '#AA00FF',
    'strokeWidth': 5,
    'fillColor' : '#880000'
  });

  this.map.moveCamera({
    target: circle.getBounds()
  });

}

---

Listen CIRCLE_CLICK event

In order to listen the CIRCLE_CLICK event, you need to specify the clickable option. You can get the latitude/longitude pair of clicked position.

loadMap() {

  // Add a circle
  let circle: Circle = this.map.addCircleSync({
    'center': GOOGLE,
    'radius': 300,
    'strokeColor' : '#AA00FF',
    'strokeWidth': 5,
    'fillColor' : '#880000',
    'clickable' : true   // default = false
  });

  this.map.moveCamera({
    target: circle.getBounds()
  });

  // Catch the CIRCLE_CLICK event
  circle.on(GoogleMapsEvent.CIRCLE_CLICK).subscribe(this.onCircleClick.bind(this));

}

onCircleClick(params: any[]) {
  let latLng: ILatLng = params[0];
  let circle: Circle = params[1];

  ...
}

---

bindTo() method

The bindTo() method is useful when you manipulate multiple overlays with the same value. The bindTo() method comes from BaseClass.

loadMap() {
  ...

  let marker: Marker = this.map.addMarkerSync({
    position: {lat: 43.0741704, lng: -89.3809802},
    draggable: true
  });

  let circle: Circle = this.map.addCircleSync({
    center: marker.getPosition(),
    radius: 10,
    fillColor: "rgba(0, 0, 255, 0.5)",
    strokeColor: "rgba(0, 0, 255, 0.75)",
    strokeWidth: 1
  });

  // circle.center = marker.position
  marker.bindTo("position", circle, "center");
}

---

API Reference

---

Create methods

• map.addCircle() :orange_book:

  Adds a circle onto the map asynchronously.

  :arrow_right: Returns Promise<Circle>

• map.addCircleSync() :orange_book:

  Adds a circle onto the map synchronously.

  :arrow_right: Returns Circle

---

Instance methods

• getId()

  Returns the ID of instance.

  :arrow_right: Returns string

• getMap()

  Return the map instance.

  :arrow_right: Returns GoogleMap instance.

• setCenter(latLng) :orange_book:

  Changes the center position.

  Params	Type	Details
  latLng	ILatLng	new position

• getCenter()

  Returns the current center position

  :arrow_right: Returns ILatLng.

• setRadius(radius) :orange_book:

  Changes the circle radius.

  Params	Type	Details
  radius	number	Radius in meter

• getRadius()

  Returns the current circle radius.

  :arrow_right: Returns number.

• setFillColor(color) :orange_book:

  Changes the filling color (inner color).

  Params	Type	Details
  color	number	HTML color strings

• getFillColor()

  Returns the current circle filling color (inner color).

  :arrow_right: Returns string.

• setStrokeWidth(strokeWidth) :orange_book:

  Changes the stroke width.

  Params	Type	Details
  strokeWidth	number	stroke width in pixel

• getStrokeWidth()

  Returns the current circle stroke width (unit: pixel).

  :arrow_right: Returns number.

• setStrokeColor(color)

  Changes the stroke color (outter color).

  Params	Type	Details
  color	string	HTML color strings

• getStrokeColor()

  Returns the current circle stroke color (outer color).

  :arrow_right: Returns string.

• setClickable(clickable) :orange_book:

  Changes click-ability of the circle.

  Params	Type	Details
  clickable	boolean	true or false

• getClickable()

  Returns true if the circle is clickable.

  :arrow_right: Returns boolean.

• setVisible(clickable) :orange_book:

  Set circle visibility

  Params	Type	Details
  visible	boolean	true or false

• getVisible()

  Returns true if the circle is visible.

  :arrow_right: Returns boolean.

• getBounds()

  Returns the latLngBounds (rectangle) that contains the circle.

  :arrow_right: Returns LatLngBounds.

• setZIndex(index) :orange_book:

  Changes the circle zIndex order.

  Params	Type	Details
  index	number	z-index

• getZIndex()

  Returns the current circle zIndex.

  :arrow_right: Returns number.

• remove() :orange_book:

  Remove the circle.

---

Event

• CIRCLE_CLICK :orange_book:

  This event is fired when you click on a circle.

  Params	Type	Details
  params[0]	LatLng	clicked position
  params[1]	Circle	circle instance