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 clickedPointcalloutData {}
Callout {id: calloutcalloutData: parent.calloutDataaccessoryButtonHidden: trueleaderPosition: 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();}
}
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
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!
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();
}
}
}
}
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.
Can you share your code that gets a reference to the featureLayer?
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();
}
}
}
}
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();
}
}
}
}
Thanks for your reply!
I copied your code exactly and my callout is still in the upper left.
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?