Rectangle Component

Properties

description
  Sets or gets the description displayed in the info window. The info window appears when the user taps on the Rectangle.
Data type: string
Designer Writable true <rectangle name="rectangleName" description="Test description">
Code Writeable true rectangleName.description = "Test description"
Code Readable true let variable = rectangleName.description

draggable
  Sets or gets whether or not the user can drag a map feature. This feature is accessed by long-pressing and then dragging the Rectangle to a new location.
Data type: boolean
Designer Writable true <rectangle name="rectangleName" draggable="true">
Code Writeable true rectangleName.draggable = true
Code Readable true let variable = rectangleName.draggable

eastLongitude
  Specifies the east-most edge of the Rectangle, in decimal degrees east of the prime meridian.
Data type: number
Designer Writable true <rectangle name="rectangleName" eastLongitude="152.5">
Code Writeable true rectangleName.eastLongitude = 152.5
Code Readable true let variable = rectangleName.eastLongitude

enableInfobox
  Enables or disables the infobox window display when the user taps the Rectangle.
Data type: boolean
Designer Writable true <rectangle name="rectangleName" enableInfobox="true">
Code Writeable true rectangleName.enableInfobox = true
Code Readable true let variable = rectangleName.enableInfobox

fillColor
  Sets or gets the color used to fill in the Rectangle.
Data type: color
Designer Writable true <rectangle name="rectangleName" fillColor="FF224bd4">
Code Writeable true rectangleName.fillColor = "FF224bd4"
Code Readable true let variable = rectangleName.fillColor

fillOpacity
  Sets or gets the opacity of the color used to fill the Rectangle. A value of 0.0 will be completely invisible and a value of 1.0 will be completely opaque.
Data type: number
Designer Writable true <rectangle name="rectangleName" fillOpacity="1">
Code Writeable true rectangleName.fillOpacity = 1
Code Readable true let variable = rectangleName.fillOpacity

northLatitude
  Specifies the north-most edge of the Rectangle, in decimal degrees north of the equator.
Data type: number
Designer Writable true <rectangle name="rectangleName" northLatitude="-27.5">
Code Writeable true rectangleName.northLatitude = -27.5
Code Readable true let variable = rectangleName.northLatitude

southLatitude
  Specifies the west-most edge of the Rectangle, in decimal degrees east of the prime meridian.
Data type: number
Designer Writable true <rectangle name="rectangleName" southLatitude="-27.6">
Code Writeable true rectangleName.southLatitude = -27.6
Code Readable true let variable = rectangleName.southLatitude

strokeColor
  Sets or gets the color used to outline the Rectangle.
Data type: color
Designer Writable true <rectangle name="rectangleName" strokeColor="FF0980f5">
Code Writeable true rectangleName.strokeColor = "FF0980f5"
Code Readable true let variable = rectangleName.strokeColor

strokeOpacity
  Sets or gets the opacity of the outline of the Rectangle. A value of 0.0 will be invisible and a value of 1.0 will be opaque.
Data type: number
Designer Writable true <rectangle name="rectangleName" strokeOpacity="1">
Code Writeable true rectangleName.strokeOpacity = 1
Code Readable true let variable = rectangleName.strokeOpacity

strokeWidth
  Sets or gets the width of the stroke used to outline the Rectangle.
Data type: number
Designer Writable true <rectangle name="rectangleName" strokeWidth="1">
Code Writeable true rectangleName.strokeWidth = 1
Code Readable true let variable = rectangleName.strokeWidth

title
  Sets or gets the title displayed in the info window that appears when the user clicks on the map feature.
Data type: string
Designer Writable true <rectangle name="rectangleName" title="Test title">
Code Writeable true rectangleName.title = "Test title"
Code Readable true let variable = rectangleName.title

type
  Returns the type of the feature. For rectangles, this returns MapFeature.Rectangle ("Rectangle").
Data type: string
Designer Writable false
Code Writeable false
Code Readable true let variable = rectangleName.type

visible
  Specifies whether the Rectangle should be visible on the screen. Value is true{
Data type: boolean
Designer Writable true <rectangle name="rectangleName" visible="true">
Code Writeable true rectangleName.visible = true
Code Readable true let variable = rectangleName.visible

westLongitude
  Specifies the south-most edge of the Rectangle, in decimal degrees south of the equator.
Data type: number
Designer Writable true <rectangle name="rectangleName" westLongitude="153">
Code Writeable true rectangleName.westLongitude = 153
Code Readable true let variable = rectangleName.westLongitude

class
  The styling class of the the component
Data type: string
Designer Writable true <rectangle name="rectangleName" class="Test class">
Code Writeable false
Code Readable false

id
  The styling id of the the component
Data type: string
Designer Writable true <rectangle name="rectangleName" id="Test id">
Code Writeable false
Code Readable false

name
  The name of the component that will be used to refer to it in code.
Data type: string
Designer Writable true <rectangle name="rectangleName" name="testComponent">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
bounds Returns the bounding box of the Rectangle in the format ((North West) (South East)).
rectangleName.bounds()
center Returns the center of the Rectangle as a list of the form (Latitude Longitude).
rectangleName.center()
distanceToFeature Computes the distance between the Rectangle and the given mapFeature. If centroids is true, the computation is done between the centroids of the two features. Otherwise, the distance will be computed between the two features based on the closest points. Further, when centroids is false, this method will return 0 if the Rectangle intersects or contains the mapFeature. If an error occurs, this method will return -1.
rectangleName.distanceToFeature(mapFeature, centroids)
rectangleName.distanceToFeature("componentName", true)
mapFeature component
centroids boolean
distanceToPoint Computes the distance between the Rectangle and the given latitude and longitude. If centroids is true, the distance is computed from the center of the Rectangle to the given point. Otherwise, the distance is computed from the closest point on the Rectangle to the given point. Further, this method will return 0 if centroids is false and the point is in the Rectangle. If an error occurs, -1 will be returned.
rectangleName.distanceToPoint(latitude, longitude, centroid)
rectangleName.distanceToPoint(-27.5083, 152.9281, true)
latitude number
longitude number
centroid boolean
hideInfobox Hides the Rectangle's info box if it is visible. Otherwise, no action is taken.
rectangleName.hideInfobox()
setCenter Move the Rectangle to be centered on the given latitude and longitude, attempting to keep the width and height (in meters) as equal as possible adjusting for changes in latitude.
rectangleName.setCenter(latitude, longitude)
rectangleName.setCenter(-27.5, 152.9)
latitude number
longitude number
showInfobox Shows the info box for the Rectangle if it is not visible. Otherwise, this method has no effect. This method can be used to show the info box even if EnableInfobox is false.
rectangleName.showInfobox()
addEventListener Method used to create event listeners.
See Events below for samples.
eventName string
eventCallbackFunction callback

Events

Event name Description Parameters
click The Click event runs when the user taps on the Rectangle.
rectangleName.addEventListener(
    "click",
    function () {
        //Your code here
    }
)
drag The Drag event runs in response to position updates of the Rectangle as the user drags it.
rectangleName.addEventListener(
    "drag",
    function () {
        //Your code here
    }
)
longClick The LongClick event runs when the user presses and holds the Rectangle and then releases it. This event will only trigger if Draggable is false because it uses the same gesture as StartDrag.
rectangleName.addEventListener(
    "longClick",
    function () {
        //Your code here
    }
)
startDrag The StartDrag event runs when the user presses and holds the Rectangle and then proceeds to move their finger on the screen. It will be followed by the Drag and StopDrag events.
rectangleName.addEventListener(
    "startDrag",
    function () {
        //Your code here
    }
)
stopDrag The StopDrag event runs when the user releases the Rectangle at the end of a drag.
rectangleName.addEventListener(
    "stopDrag",
    function () {
        //Your code here
    }
)