nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Zoom to layer issue using appStudio QT

EricAtkinson1

Hi all,

I'm having issues with zoom to feature code. I am using the code in the sample "Listed Related features" but doesn't seem to work and the confusing part is that there are no errors displaying.

mapView.setViewpointGeometryAndPadding(feature.geometry, 30);

Is this correct or does anyone know of another way I can zoom to feature while clicking on a feature on the map?

Thanks all

Find more posts tagged with

Accepted answers

EricAtkinson1

I figured it out. Thanks for all your help 👍

mapView.setViewpointCenterAndScale(feature.geometry, 1000);

All comments

JaredCaccamo

Hello @EricAtkinson1 ,

I don't see anything wrong with your line of code so that's good news. If I run the "List related features" QML sample with 100.9/100.10 it works perfectly fine for me and it also set's the viewpoint to the selected features geometry when clicked.

Could you provide a bit more context? Which version of ArcGIS Runtime are you using? Maybe provide the .qml file or a larger section of the code so I can take a closer look at the rest of your workflow.

Sincerely,

Jared

EricAtkinson1

Hi Jared,

Thanks for the reply. Im pretty new to this so am learning on the way so any help would be appreciated. I feel like I might be missing a connection as in the previous version it has connections (line110 on sample) but cant seem to get connections working with onIdentifyLayerStatusChanged.

Here is some of my code, the map url has been taken on purpose. The app works just cant seen to get the map to zoom once the feature has been clicked.

Cheers, Eric

contentItem: Rectangle{

            anchors.top:header.bottom

            MapView {

                id: mapView

                anchors.fill: parent

                viewInsets.bottom: attributeView.height / scaleFactor

                locationDisplay {

                    positionSource: PositionSource {}

                Map {

                    initUrl: "deleted on purpose"

                    onOperationalLayersChanged: {

                        for (var i = 0; operationalLayers.count; i++) {

                            if (operationalLayers.get(i).name === "ESCAD Incidents") {

                                featureLayer = operationalLayers.get(i)

                                featureLayer.refreshInterval = 5000

                                featureLayer.selectionColor = "#02253A"

                                //featureTable = featureLayer.featureTable

                                break

                onMouseClicked: {

                    attributeView.height = 0;

                    featureLayer.clearSelection()

                    identifyLayer(featureLayer, mouse.x, mouse.y, 15, false)

                    relatedFeaturesModel.clear();

                onIdentifyLayerStatusChanged: {

                    if (identifyLayerStatus === Enums.TaskStatusCompleted) {

                        if (identifyLayerResult.geoElements.length > 0) {

                            //Retrieve Feature

                            var feature = identifyLayerResult.geoElements [0]

                            //select feature

                            featureLayer.selectFeature(feature)

                            //Get information from layer

                            var masterIncidentNumber = feature.attributes.attributeValue("master_Incident_Number")

                            var incidentType = feature.attributes.attributeValue("Incident_Type")

                            var MINDetails = feature.attributes.attributeValue("MIN_Details")

                            var CrossStreet = feature.attributes.attributeValue("Cross_Street")

                            var location = feature.attributes.attributeValue("location")

                            var commandChannel = feature.attributes.attributeValue("Command_Channel")

                            var tacChannel = feature.attributes.attributeValue("Primary_TAC_Channel")

                            var longitude = feature.attributes.attributeValue("longitude")

                            var latitude = feature.attributes.attributeValue("latitude")

                            console.log("masterIncidentNumber", masterIncidentNumber )

                            console.log("location", location)

                            console.log("Incident Type", incidentType)

                            console.log("MIN_ID", MINDetails)

                            console.log("Cross Street", CrossStreet)

                            console.log("Command_Channel", commandChannel)

                            console.log("Primary_TAC_Channel", tacChannel)

                            var listElement = {

                                "masterIncidentNumber" : masterIncidentNumber,

                                "location" : location,

                                "incidentType" : incidentType,

                                "MIN_ID" : MINDetails,

                                "crossStreet" : CrossStreet,

                                "Command_Channel" : commandChannel,

                                "Primary_TAC_Channel" : tacChannel,

                                "longitude" : longitude,

                                "latitude" : latitude

};

                            relatedFeaturesModel.append(listElement);

                            //zoom in not working

                           mapView.setViewpointGeometryAndPadding(feature.geometry, 30);

                        attributeView.height = 200 * scaleFactor

                Rectangle {

                    id: attributeView

                    anchors {

                        left: parent.left

                        right: parent.right

                        bottom: parent.bottom

JaredCaccamo

Hey @EricAtkinson1 ,

Just to let you know that you can click on the insert code button so that it doesn't break it down into block by block. Will make for more readable code on geonet. Take a look at the picture below.

I don't see anything inherently wrong with your workflow to select a feature and zoom to it. I took your general workflow and tested it on some sample data and it works like it should. Which version of ArcGISRuntime are you targeting? Here is my code blow:

import QtQuick 2.6
import QtQuick.Controls 2.2
import Esri.ArcGISRuntime 100.10

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

    property FeatureLayer alaskaNationalParks: null

    // 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 {
            id: map
            initUrl: "https://arcgis.com/home/item.html?id=dcc7466a91294c0ab8f7a094430ab437"

            onLoadStatusChanged: {
                if (loadStatus !== Enums.LoadStatusLoaded)
                    return;

                // get the Alaska National Parks feature layer
                map.operationalLayers.forEach(fl =>
                  {
                      if (fl.name.indexOf("- Alaska National Parks") !== -1) {
                          alaskaNationalParks = fl;
                          print("FL set");
                      }
                  });
            }
        }

        onMouseClicked: {
            alaskaNationalParks.clearSelection()
            identifyLayer(alaskaNationalParks, mouse.x, mouse.y, 15, false);
        }

        onIdentifyLayerStatusChanged: {
            if (error)
                print(error.message);
            if (identifyLayerStatus === Enums.TaskStatusCompleted) {
                if (identifyLayerResult.geoElements.length > 0) {
                    //Retrieve Feature
                    var feature = identifyLayerResult.geoElements[0];
                    //select feature
                    alaskaNationalParks.selectFeature(feature);
                    mapView.setViewpointGeometryAndPadding(feature.geometry, 30);
                }
            }
        }
    }
}

EricAtkinson1

Thanks for the tip... I'm running it in 100.8.... no errors come up just no auto zoom capability to the feature.

EricAtkinson1

Is there's maybe a Onmouseclicked or onclicked line of code I can use instead?

JaredCaccamo

Hello @EricAtkinson1 ,

I apologize for not responding sooner. I just checked the code with 100.8 and it successfully changes the extent of the mapview to that of the selected features. Might I suggest checking the extent of your feature? The code you are using is correct, my guess is that the features extent is not what you are expecting which is why there is no perceived zoom animation.

EricAtkinson1

Thanks I'll have a look. My confusion is that when I put the app into navigation mode it zooms to location or when I search for a feature it zooms to extent....

EricAtkinson1

Hi Jared,

Still having issues and its not an extent issue. I have similar code in my App (mapView.locationDisplay.autoPanMode = Enums.LocationDisplayAutoPanModeRecenter; ) and it zooms to location.

I have tired my featureLayer in the code below and also locationDisplay in the code below but it still doesn't work including no error messaged.

mapView.setViewpointGeometryAndPadding(feature.geometry, 30);

Any help would be appreciated.

Eric

EricAtkinson1

Hey guys,

Still really stuck... I feel like this is a simple fix but i've been stuck on this. I've attached the code i'm using and I feel like I might not be connecting the setViewpointGeometryAndPadding correctly.

onIdentifyLayerStatusChanged: {
                    if (identifyLayerStatus === Enums.TaskStatusCompleted) {
                        if (identifyLayerResult.geoElements.length > 0) {
                            //Retrieve Feature
                            var feature = identifyLayerResult.geoElements [0]
                            //select feature
                            featureLayer.selectFeature(feature)
                            //Get information from layer ESCAD

                            var masterIncidentNumber = feature.attributes.attributeValue("master_Incident_Number")
                            var incidentType = feature.attributes.attributeValue("Incident_Type")
                            var MINDetails = feature.attributes.attributeValue("MIN_Details")
                            var CrossStreet = feature.attributes.attributeValue("Cross_Street")
                            var location = feature.attributes.attributeValue("location")
                            var commandChannel = feature.attributes.attributeValue("Command_Channel")
                            var tacChannel = feature.attributes.attributeValue("Primary_TAC_Channel")
                            var longitude = feature.attributes.attributeValue("longitude")
                            var latitude = feature.attributes.attributeValue("latitude")

                            console.log("masterIncidentNumber", masterIncidentNumber )
                            console.log("location", location)
                            console.log("Incident Type", incidentType)
                            console.log("MIN_ID", MINDetails)
                            console.log("Cross Street", CrossStreet)
                            console.log("Command_Channel", commandChannel)
                            console.log("Primary_TAC_Channel", tacChannel)
                            var listElement = {
                                "masterIncidentNumber" : masterIncidentNumber,
                                "location" : location,
                                "incidentType" : incidentType,
                                "MIN_ID" : MINDetails,
                                "crossStreet" : CrossStreet,
                                "Command_Channel" : commandChannel,
                                "Primary_TAC_Channel" : tacChannel,
                                "longitude" : longitude,
                                "latitude" : latitude
                            };
                            mapView.setViewpointGeometryAndPadding(feature.geometry,100);
                            attributeView.height = 200
                            relatedFeaturesModel.append(listElement);
                            //drawerMenu.height = 0
                            search.visible = false
                            callout.visible = false

JaredCaccamo

Hello @EricAtkinson1 ,

Could you possibly zip up a reproducible project?(preferably simplified to the the function in question MapView.setViewpointGeometryAndPadding and the minimum supporting code to reproduce the problem). Also could you possibly try the latest version of the SDK to see if this is still a problem at the current release? You can also utilize the sample data above that I used if providing your data is not an option.

EricAtkinson1

Hey Jared,

I've been really trying to solve this myself but no deal. I have attached a zip file with my partial code (where i believe the issue is) in with your original code. All my other features are working including searching address and it zooms to that location. I have attached a screenshot of my app for understanding of what I am trying to achieve (zoom into in feature on selecting).

Everything else works just for some reason the zoom to feature.

Cheers,

Eric

e7925fb9f5f64446b8d7ea2aa3ddba4a.zip

EricAtkinson1

I figured it out. Thanks for all your help 👍

mapView.setViewpointCenterAndScale(feature.geometry, 1000);

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.