Can't set location of Callout

TimConfare1 · ‎09-29-2020

I've followed a couple Callout samples when creating my own but I can't get the location of the callout to display where I clicked or the xy coordinate of the feature I am selecting. Every time the callout displays in the upper left of the screen like below:

Callouts appear to be pretty straightforward so I'm not sure why I can't get mine to work. (I am using a mmpk)

property Point clickedPoint

calloutData {
    }
Callout {
        id: callout
        calloutData: parent.calloutData
        accessoryButtonHidden: true
        leaderPosition: leaderPositionEnum.Automatic
    }
onMouseClicked: {        clickedPoint = mouse.mapPoint;
        var tolerance = 5,
        returnPopupsOnly = false,
        maximumResults = 1;
        mapView.identifyLayerWithMaxResults(featureLayer, mouse.x, mouse.y, tolerance, returnPopupsOnly, maximumResults);
    }

onIdentifyLayerStatusChanged: {
         if (identifyLayerStatus === Enums.TaskStatusCompleted) {
             featureLayer.clearSelection();
             const elem = identifyLayerResult.geoElements[0];
             const count = identifyLayerResult.geoElements.length;
             featureLayer.selectFeatures(elem);
             var featureName = elem.attributes.attributeValue("Name");
             var xcoord = elem.attributes.attributeValue("POINT_X");
             var ycoord = elem.attributes.attributeValue("POINT_Y");
             mapView.calloutData.geoElement = elem;
             mapView.calloutData.detail = featureName;
             mapView.calloutData.location = clickedPoint;
             callout.showCallout();
         }
    }

JamesBallard1 · ‎09-29-2020

Hi Tim Confare‌,

Thanks for reaching out to the team. In our example code, the "parent" is the MapView object. I can't tell from your code if that's the case, but can you double check that?

This might work:

calloutData: mapView.calloutData‍

TimConfare1 · ‎09-29-2020

Hi James,

Yes, the parent is the MapView object in my code. I did change that line to mapView.calloutData but it does the same thing.

Any other ideas?

Thanks!

LucasDanzinger · ‎09-30-2020

Do you get any errors in your console about undefined references or anything like that? I took your code and added some layers and was able to get it to work as expected:

import QtQuick 2.6
import QtQuick.Controls 2.2
import Esri.ArcGISRuntime 100.9
import Esri.ArcGISRuntime.Toolkit.Controls 100.9

ApplicationWindow {
    id: appWindow
    width: 800
    height: 600
    title: "Test"

    property Point clickedPoint

    // add a mapView component
    MapView {
        id: mapView
        anchors.fill: parent
        // set focus to enable keyboard navigation
        focus: true

        // add a map to the mapview
        Map {
            // add the BasemapTopographic basemap to the map
            BasemapTopographic {}
            FeatureLayer {
                id: featureLayer
                ServiceFeatureTable {
                    url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/DamageAssessment/FeatureServer/0"
                }
            }
        }

        calloutData {
        }
        Callout {
            id: callout
            calloutData: parent.calloutData
            accessoryButtonHidden: true
            leaderPosition: leaderPositionEnum.Automatic
        }
        onMouseClicked: {
            clickedPoint = mouse.mapPoint;
            var tolerance = 5,
            returnPopupsOnly = false,
            maximumResults = 1;
            mapView.identifyLayerWithMaxResults(featureLayer, mouse.x, mouse.y, tolerance, returnPopupsOnly, maximumResults);
        }

        onIdentifyLayerStatusChanged: {
            if (identifyLayerStatus === Enums.TaskStatusCompleted) {
                featureLayer.clearSelection();
                const elem = identifyLayerResult.geoElements[0];
                const count = identifyLayerResult.geoElements.length;
                featureLayer.selectFeatures(elem);
                //                var featureName = elem.attributes.attributeValue("Name");
                //                var xcoord = elem.attributes.attributeValue("POINT_X");
                //                var ycoord = elem.attributes.attributeValue("POINT_Y");
                mapView.calloutData.geoElement = elem;
                //                mapView.calloutData.detail = featureName;
                mapView.calloutData.location = clickedPoint;
                callout.showCallout();
            }
        }
    }
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

TimConfare1 · ‎09-30-2020

Thanks for the reply. I do not have any errors in my console. The only thing different with our code is that I am using a mmpk instead of pointing to a service. I thought maybe it had something to do with spatial reference since my POI layer (which is the geoElements layer) is in a different coordinate system than the basemap and the data frame. I projected that layer to the same coord system but it still puts the callout in the upper left.

LucasDanzinger · ‎09-30-2020

Can you share your code that gets a reference to the featureLayer?

TimConfare1 · ‎09-30-2020

Map{

        id: map

        MobileMapPackage {

            id: mmpk

            path: filePath + inputdata

            Component.onCompleted: {

                mmpk.load();

            onLoadStatusChanged: {

                if (loadStatus === Enums.LoadStatusLoaded) {

                    mapView.map = mmpk.maps[0];

                    mapView.map.minScale = 15000;

                    mapView.map.maxScale = 1000;

                    var identLayerList = mmpk.maps[0].operationalLayers;

                    featureLayer = identLayerList.get(app.idOfPOI);

                    var identLayerName = featureLayer.name;

                    var featureTable = featureLayer.featureTable;

                    console.log("Identify Layer name is " + identLayerName);

                    mapView.setViewpointScale(initialScale);

                    locationDisplay.start();

LucasDanzinger · ‎10-01-2020

I tried that and the following code worked for me as well. Does this work for you?

import QtQuick 2.6
import QtQuick.Controls 2.2
import Esri.ArcGISRuntime 100.9
import Esri.ArcGISRuntime.Toolkit.Controls 100.9

ApplicationWindow {
    id: appWindow
    width: 800
    height: 600
    title: "test"

    property Point clickedPoint
    property FeatureLayer featureLayer

    // add a mapView component
    MapView {
        id: mapView
        anchors.fill: parent
        // set focus to enable keyboard navigation
        focus: true

        // add a map to the mapview
        Map {
            MobileMapPackage {
                id: mmpk
                path: "file:///Users/luca6804/ArcGIS/Runtime/UnitTests/mmpks/advancedSymbols.mmpk"
                Component.onCompleted: {
                    mmpk.load();
                }
                onLoadStatusChanged: {
                    if (loadStatus === Enums.LoadStatusLoaded) {
                        mapView.map = mmpk.maps[0];
//                        mapView.map.minScale = 15000;
//                        mapView.map.maxScale = 1000;
                        var identLayerList = mmpk.maps[0].operationalLayers;
                        featureLayer = identLayerList.get(0);
                        var identLayerName = featureLayer.name;
                        var featureTable = featureLayer.featureTable;
                        console.log("Identify Layer name is " + identLayerName);
                        //mapView.setViewpointScale(initialScale);
                        //locationDisplay.start();
                    }
                }
            }
        }

        calloutData {
        }
        Callout {
            id: callout
            calloutData: parent.calloutData
            accessoryButtonHidden: true
            leaderPosition: leaderPositionEnum.Automatic
        }
        onMouseClicked: {
            clickedPoint = mouse.mapPoint;
            var tolerance = 5,
            returnPopupsOnly = false,
            maximumResults = 1;
            mapView.identifyLayerWithMaxResults(featureLayer, mouse.x, mouse.y, tolerance, returnPopupsOnly, maximumResults);
        }

        onIdentifyLayerStatusChanged: {
            if (identifyLayerStatus === Enums.TaskStatusCompleted) {
                featureLayer.clearSelection();
                const elem = identifyLayerResult.geoElements[0];
                const count = identifyLayerResult.geoElements.length;
                featureLayer.selectFeatures(elem);
                //                var featureName = elem.attributes.attributeValue("Name");
                //                var xcoord = elem.attributes.attributeValue("POINT_X");
                //                var ycoord = elem.attributes.attributeValue("POINT_Y");
                mapView.calloutData.geoElement = elem;
                //                mapView.calloutData.detail = featureName;
                mapView.calloutData.location = clickedPoint;
                callout.showCallout();
            }
        }
    }
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

TimConfare1 · ‎10-01-2020

Thanks for your reply!

I copied your code exactly and my callout is still in the upper left.

LucasDanzinger · ‎10-01-2020

Are you able to share any data? That's the last major difference in our testing that I can think of. Alternatively, can you try my code with the feature service and see if that works for you?