Marker Component

Properties

anchorHorizontal
  Sets or gets the horizontal offset of the Marker center relative to its image. Valid values are 'left', 'right' and 'center'
Data type: string
Designer Writable true <marker name="markerName" anchorHorizontal="right">
Code Writeable true markerName.anchorHorizontal = "right"
Code Readable true let variable = markerName.anchorHorizontal

anchorVertical
  Sets or gets the vertical offset of the Marker center relative to its image. Valid values are 'top', 'center' and 'bottom'
Data type: string
Designer Writable true <marker name="markerName" anchorVertical="bottom">
Code Writeable true markerName.anchorVertical = "bottom"
Code Readable true let variable = markerName.anchorVertical

description
  Sets or gets the description displayed in the info window. The info window appears when the user taps on the Marker.
Data type: string
Designer Writable true <marker name="markerName" description="Test description">
Code Writeable true markerName.description = "Test description"
Code Readable true let variable = markerName.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 Marker to a new location.
Data type: boolean
Designer Writable true <marker name="markerName" draggable="true">
Code Writeable true markerName.draggable = true
Code Readable true let variable = markerName.draggable

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

fillColor
  Sets or gets the color used to fill in the Marker.
Data type: color
Designer Writable true <marker name="markerName" fillColor="FF660cce">
Code Writeable true markerName.fillColor = "FF660cce"
Code Readable true let variable = markerName.fillColor

fillOpacity
  Sets or gets the opacity of the color used to fill the Marker. 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 <marker name="markerName" fillOpacity="1">
Code Writeable true markerName.fillOpacity = 1
Code Readable true let variable = markerName.fillOpacity

height
  Specifies the Marker's vertical height, measured in pixels.
Data type: number
Designer Writable false
Code Writeable true markerName.height = 50
Code Readable true let variable = markerName.height

heightPercent
  Specifies the Marker's vertical height as a percentage of the Screen's Height.
Data type: number
Designer Writable false
Code Writeable true markerName.heightPercent = 10
Code Readable false

imageAsset
  Specifies the image shown for the Marker. If set to the empty string "", then the default marker icon will be used.
Data type: string
Designer Writable true <marker name="markerName" imageAsset="cat.png">
Code Writeable true markerName.imageAsset = "cat.png"
Code Readable true let variable = markerName.imageAsset

latitude
  Sets or gets the latitude of the Marker, in degrees, with positive values representing north of the equator and negative values representing south of the equator. To update the Latitude and Longitude simultaneously, use the SetLocation method.
Data type: number
Designer Writable true <marker name="markerName" latitude="-27.5083">
Code Writeable true markerName.latitude = -27.5083
Code Readable true let variable = markerName.latitude

longitude
  Sets or gets the longitude of the Marker, in degrees, with positive values representing east of the prime meridian and negative values representing west of the prime meridian. To update the Latitude and Longitude simultaneously, use the SetLocation method.
Data type: number
Designer Writable true <marker name="markerName" longitude="152.9281">
Code Writeable true markerName.longitude = 152.9281
Code Readable true let variable = markerName.longitude

strokeColor
  Sets or gets the color used to outline the Marker.
Data type: color
Designer Writable true <marker name="markerName" strokeColor="FFbf50e3">
Code Writeable true markerName.strokeColor = "FFbf50e3"
Code Readable true let variable = markerName.strokeColor

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

strokeWidth
  Sets or gets the width of the stroke used to outline the Marker.
Data type: number
Designer Writable true <marker name="markerName" strokeWidth="4">
Code Writeable true markerName.strokeWidth = 4
Code Readable true let variable = markerName.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 <marker name="markerName" title="Test title">
Code Writeable true markerName.title = "Test title"
Code Readable true let variable = markerName.title

type
  Return the type of the map feature. For Marker, this returns the text "Marker".
Data type: string
Designer Writable false
Code Writeable false
Code Readable true let variable = markerName.type

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

width
  Specifies the horizontal width of the Marker, measured in pixels.
Data type: number
Designer Writable false
Code Writeable true markerName.width = 50
Code Readable true let variable = markerName.width

widthPercent
  Specifies the horizontal width of the Marker as a percentage of the Screen's Width.
Data type: number
Designer Writable false
Code Writeable true markerName.widthPercent = 25
Code Readable false

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

id
  The styling id of the the component
Data type: string
Designer Writable true <marker name="markerName" 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 <marker name="markerName" name="testComponent">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
bearingToFeature Returns the bearing from the Marker to the given map feature, in degrees from due north. If the centroids parameter is true, the bearing will be to the center of the map feature. Otherwise, the bearing will be computed to the point in the feature nearest the Marker.
markerName.bearingToFeature(mapFeature, centroids)
markerName.bearingToFeature("componentName", true)
mapFeature component
centroids boolean
bearingToPoint Returns the bearing from the Marker to the given latitude and longitude, in degrees from due north.
markerName.bearingToPoint(latitude, longitude)
markerName.bearingToPoint(-27, 152)
latitude number
longitude number
distanceToFeature Computes the distance between the Marker 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 Marker intersects or contains the mapFeature. If an error occurs, this method will return -1.
markerName.distanceToFeature(mapFeature, centroids)
markerName.distanceToFeature("componentName", true)
mapFeature component
centroids boolean
distanceToPoint Compute the distance, in meters, between a Marker and a latitude, longitude point.
markerName.distanceToPoint(latitude, longitude)
markerName.distanceToPoint(-27, 152)
latitude number
longitude number
hideInfobox Hides the Marker's info box if it is visible. Otherwise, no action is taken.
markerName.hideInfobox()
setLocation Sets the location of the Marker.
markerName.setLocation(latitude, longitude)
markerName.setLocation(-27.5083, 152.9281)
latitude number
longitude number
showInfobox Shows the info box for the Marker 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.
markerName.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 Marker.
markerName.addEventListener(
    "click",
    function () {
        //Your code here
    }
)
drag The Drag event runs in response to position updates of the Marker as the user drags it.
markerName.addEventListener(
    "drag",
    function () {
        //Your code here
    }
)
longClick The LongClick event runs when the user presses and holds the Marker and then releases it. This event will only trigger if Draggable is false because it uses the same gesture as StartDrag.
markerName.addEventListener(
    "longClick",
    function () {
        //Your code here
    }
)
startDrag The StartDrag event runs when the user presses and holds the Marker and then proceeds to move their finger on the screen. It will be followed by the Drag and StopDrag events.
markerName.addEventListener(
    "startDrag",
    function () {
        //Your code here
    }
)
stopDrag The StopDrag event runs when the user releases the Marker at the end of a drag.
markerName.addEventListener(
    "stopDrag",
    function () {
        //Your code here
    }
)