Callout QML Type

  • Callout
  • A view for displaying information at a geographic location on a Map. More...

    Since: Esri.ArcGISRuntime 100.10




    Detailed Description

    A Callout can be displayed for several different scenarios:

    • To display the coordinates where a user tapped on the map.
    • To display information about a GeoElement that has been identified on the MapView.
    • To display a callout at your current location.

    For more information, please see the CalloutData documentation.

    Example code in the QML API (C++ API might differ):

            MapView {
                id: view
                Map {
                    initBasemapStyle: Enums.BasemapStyleArcGISDarkGray
                calloutData {
                    imageUrl: "qrc:///"
                    title: "This is the location callout"
                    detail: "x: " + xClickLoc + " y: " + yClickLoc
                Callout {
                    calloutData: view.calloutData
                    accessoryButtonVisible: false
                    implicitHeight: 100
                    leaderPosition: Callout.LeaderPosition.Automatic
                    maxWidth: 250
                    background: Rectangle {
                        radius: 5
                        border.width: 2
                        border.color: "black"
                    palette.windowText: "black"
                onMouseClicked : (mouse) => {
                    if (calloutData.visible) {
                    } else {
                        xClickLoc = mouse.mapPoint.x.toFixed(2);
                        yClickLoc = mouse.mapPoint.y.toFixed(2);
                        calloutData.location = mouse.mapPoint

    Note: That the Callout has gone through a major revision as of ArcGISRuntime 100.14. Part of this revision has been a change to the styling behaviour of the Callout, making the Callout compliant with your currently applied theme. To revert to the classic Callout look, you can supply the old style properties to the Callout as provided below. \oldcode Callout { calloutData: myCalloutData } \newcode Callout { calloutData: myCalloutData palette.windowText: "#000000" background: Rectangle { color: "#ffffff" border.color: "#000000" border.width: 2 radius: 5 } leaderHeight: 10 leaderWidth: 20 leaderPosition: Callout.LeaderPosition.Bottom }

    Property Documentation

    accessoryButtonType : string

    The type of accessory button to be displayed in the Callout.

    Default is "Info".

    • "Info"
    • "Add"
    • "Custom"

    accessoryButtonVisible : bool

    Whether to show the accessoryButton of the Callout.

    The default is true.

    autoAdjustWidth : bool

    When true, the width of the callout content automatically resizes up to the value of maxWidth. When false, the content width will fixed to the size of maxWidth.

    This property defaults to true.

    calloutData : var

    The CalloutData to display in the Callout.

    The CalloutData controls the data that is being displayed in the Callout view. Use CalloutData to set title text, detail text, images, GeoElements, and so on. CalloutData is obtained from the MapView.

    customImageUrl : string

    The url of the image to be used for the accessory button of the Callout if the type of the accessoryButton is "Custom".

    leaderHeight : int

    The height of the leader line in the Callout.

    The default leader height is 15.

    leaderPosition : var

    The property to set the leader position of the callout.

    leaderPosition can be one of:

    Callout.LeaderPosition.Automatic(8) The default.

    Callout.LeaderPosition.Automatic will decide the best placement, based on the location of the callout within the visible area of the MapView.

    The default is Callout.LeaderPosition.Automatic.

    leaderWidth : int

    The width of the leader line in the Callout.

    The default leader width is 30.

    maxWidth : real

    The width of the callout contents.

    When autoAdjustWidth is false, the width of the callout content will be fixed to this value.

    When autoAdjustWidth is true, the content width is calculated dynamically and may be smaller than this value, but will be no greater than this value.

    This property defaults to 300.

    screenOffsetX : int

    The x offset of the placement of the Callout.

    The default is 0.

    screenOffsetY : int

    The y offset of the placement of the Callout.

    The default is 0.

    Signal Documentation


    The signal emitted when the accessory button is clicked.

    Note: The corresponding handler is onAccessoryButtonClicked.

    Method Documentation


    Dismisses the Callout from the MapView.

    The Callout does not hide itself automatically, so you must explicitly call this method to hide the Callout from the MapView.


    Show the Callout on the MapView.

    Before showing the callout, set your desired properties for CalloutData (which controls the information that is displayed) and for Callout (which controls how the view appears on the MapView).

    Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.