Uncaught (in promise) TypeError: cannot read property graphic of undefined

Question

Very new at JavaScript and trying to build a web map using the ArcGIS API for JavaScript 4x loosely following the tutorial here: https://developers.arcgis.com/javascript/latest/sample-code/views-composite-views/index.html

I mostly wanted to keep the highlight function while allowing zooming and panning, all within a single view using my own web layers.

The error I get in the console is: Uncaught (in promise) TypeError: Cannot read property 'graphic' of undefined

I've looked at a few questions discussing similar errors, but still don't understand exactly what I mis-edited here from the tutorial code for it to throw the error. Let me know if seeing other parts of the code would be helpful. I'm banging my head against the wall here - any help would be appreciated!

Here is the highlight function code:

// highlight function

mainView
    .when(maintainFixedExtent)
    .then(disableNavigation)
    .then(enableHighlightOnPointerMove);

function maintainFixedExtent(view) {
    var fixedExtent = view.extent.clone();
    view.on("resize", function () {
        view.extent = fixedExtent;
    });
    return view;
}

let highlight = null;
let lastHighlight = null;

function enableHighlightOnPointerMove(view) {
    view.whenLayerView(basinsLayer).then(function (layerView) {
        view.on("pointer-move", function (event) {
            view.hitTest(event).then(function (response) {
                lastHighlight = highlight;

                var id = null;

                if (response.results.length) {
                    var feature = response.results.filter(function (result) {
                        return result.graphic.layer === basinsLayer;
                    })[0].graphic;

                    feature.popupTemplate = basinsLayer.popupTemplate;
                    id = feature.attributes.OBJECTID;
                    highlight = layerView.highlight([id]);
                    var selectionId = mainView.popup.selectedFeature
                        ? mainView.popup.selectedFeature.attributes.OBJECTID
                        : null;

                    if (highlight && id !== selectionId) {
                        mainView.popup.open({
                            features: [feature]
                        });
                    }
                } else {
                    if (mainView.popup.visible) {
                        mainView.popup.close();
                        mainView.popup.clear();
                    }
                }

                // remove the previous highlight
                if (lastHighlight) {
                    lastHighlight.remove();
                    lastHighlight = null;
                }
            });
        });
    });
}

function disableNavigation(view) {
    view.popup.dockEnabled = true;

    view.popup.actions = [];

    function stopEvtPropagation(event) {
        event.stopPropagation();
    }

    return view;
}

Edit:

Here is a full working example using public data. I think the issue is related to me having both a point layer and a polygon layer. I only want to use the highlight function on the polygon layer, but if you hover around enough, the "uncaught (in promise) TypeError: cannot read property graphic of undefined" appears in the console and I think this is related to the point layer. Is there a workaround?


  
    
    
    
Create an app with composite views - 4.15

cabesuon · Accepted Answer

Example of what I think you are trying to achieve. Based on the ArcGIS example of the question, just remove everything that stop the navigation on the map, and the extra views.



  
    
    
    highlight features - 4.15

Uncaught (in promise) TypeError: cannot read property graphic of undefined

Answers (1)

Related Questions