Uncaught (in promise) TypeError: Cannot read property 'setHighlight' of null

3751
4
11-10-2020 07:31 AM
julienrobitaille
New Contributor III

Hello,

I am using ArcGIS api JS with a layer of polygons. When I click on one polygon, it creates a layer of points that intersect the polygon clicked. When I then click on a point, the point gets highlighted correctly. 

The problem is that once I have clicked at least once on a point and got it highlighted, if I then click on a polygon or anywhere else on the map where there is no polygons, this error occurs:

Uncaught (in promise) TypeError: Cannot read property 'setHighlight' of null
at d.f._updateHighlight (mapViewDeps.js:773)
at d.f.removeHighlight (mapViewDeps.js:773)
at Object.remove (GraphicsLayerView2D.js:7)
at d.c.remove ((index):751)
at d.<anonymous> ((index):2352)
at g ((index):38)
at Object.next ((index):37)
at (index):37
at new Promise (<anonymous>)
at Object.f [as __awaiter] ((index):36)

And when I then click again on a point, the point doesnt highlight anymore. But the popup works fine. One the highlight is not working. 

I would like to know where is the poperty "setHighlight" and how can I avoid the issue? 

If only I was able to pin point where the property is, I could probably undesrtand what is happening. But there is no info online about this property nor the issue. 

So thank you for any of your help, it is really appreciated!

Julien

0 Kudos
4 Replies
KavishGhime3
New Contributor II

Hi @julienrobitaille 

"TypeError" might occur if there is any issue with the code logic or incorrect naming convention, etc.

Also, "setHighlight" property is not an API reference property of a class, which we may think be corrupted, and hence, causing this issue.

Without a sample app, this issue might be difficult to troubleshoot further.

 

Thanks,

 

 

0 Kudos
julienrobitaille
New Contributor III

Hello,
Thanks for your reply.

 

Here is a sample of my code. I tried to get ride of everything that would still reproduce the error:

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
    </script>
    <script type="text/javascript" src="https://d3js.org/d3.v6.js"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/themes/dark/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
        require([ // require loads modules
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/BasemapToggle",
            "esri/layers/OGCFeatureLayer",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/geometry/Point",
        ], function(MapMapViewBasemapToggleOGCFeatureLayerGraphicGraphicsLayerPoint) {

            var map = new Map({
                basemap: "topo-vector"
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-68.8050047.02700], // longitude, latitude
                zoom: 7
            });

            //load stations info:
            var stations = [];

            $.ajax({ // TODO: fix CORS Error — and How the Access-Control-Allow-Origin Header
                url: "https://api.iwls.azure.cloud.dfo-mpo.gc.ca/api/v1/stations",
                type: "GET",
                async: false,
                contentType: 'application/json; charset=utf-8',
                success: function(json) {
                    stations = json;
                }
            });


            //load regions
            var layer_regions = new OGCFeatureLayer({
                url: "http://localhost:32768/geoserver/OGSL/ogc/features/",
                collectionId: "OGSL:test_create_shp_exposed",
                legendEnabled: true,
                popupEnabled: true,
                name: "layer_regions",
                visible: true,
                title: "regions",
                renderer: {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                    },
                }
            });
            map.add(layer_regions);


            view.on("click",
                function(event) {
                    //console.log(event)
                    view.hitTest(event).then(getGraphics).then(buildLayer);

                });

            function getGraphics(response) {

                // On vérifie s'il y a déjà une couche des stations d'affichée
                var foundLayers = map.allLayers.find(function(layer) {
                    return layer.name === "stationsLayerTrue";
                });
                console.log("foundlayers"foundLayers)
                    //Si on clique sur un couche de type polygone

                if (response.results[0].graphic.geometry) {

                    if (response.results[0].graphic.geometry.type === "polygon") {

                        var geometry = response.results[0].graphic.geometry
                            // Si une couche des stations est déjà présente, on la supprime
                        if (foundLayers) {
                            map.remove(foundLayers)
                        }

                        // On zoom sur le poylgone cliqué
                        view.goTo(response.results[0].graphic.geometry);
                        var popupActive = false

                        return geometry;
                    }
                } else {
                    var foundLayers = map.allLayers.find(function(layer) {
                        return layer.name === "stationsLayerTrue";
                    });

                    if (foundLayers) {
                        map.remove(foundLayers)
                    }
                    return null
                }
            }

            function buildLayer(polygoneClique) {

                //console.log("poly", polygoneClique)
                if (polygoneClique) {
                    // On crée une couche qui va contenir les stations
                    var stationsLayerTrue = new GraphicsLayer({
                        visible: true,
                        title: "stationsLayerTrue",
                        name: "stationsLayerTrue"
                    });
                    map.add(stationsLayerTrue);

                    for (i = 0i < stations.lengthi++) {

                        var point = new Point({
                            longitude: stations[i]["longitude"],
                            latitude: stations[i]["latitude"],
                            spatialReference: {
                                wkid: 3857
                            }
                        })

                        var intersects = polygoneClique.contains(point)


                        if (intersects) {

                            var pointGraphicTrue = new Graphic({
                                geometry: point,
                                symbol: {
                                    type: "simple-marker",
                                    color: "#d7191c" //red
                                },
                                popupTemplate: {
                                    title: "{officialName}"
                                },
                                attributes: {
                                    id: stations[i]["id"],
                                    officialName: stations[i]["officialName"],
                                }
                            });

                            stationsLayerTrue.add(pointGraphicTrue);
                        }

                    }
                }

            }

        });
    </script>
    <style>
        html,
        body,
        #viewDiv {
            positionabsolute;
            left0;
            right0px;
            top0;
            bottom0;
            height100%;
        }
        
        .esri-legend__layer-caption {
            displaynone;
        }
    </style>
</head>


<body>
    <div id="viewDiv"></div>
</body>

</html>
 
So as you can see, if you click on one region and then click on a point, the highlight works fine. But if you then click on the other region and then on a point, the error shows up. 
Any idea of why this is happening? 
Thank you !
Julien
0 Kudos
julienrobitaille
New Contributor III

I am so sorry, there is a small error in the code above. If you could replace the creation of the OGCFeatureLayer by this, it will work (I no longer use my local server!):

var layer_regions = new OGCFeatureLayer({
                url: "https://geoserver.preprod.ogsl.ca/geoserver/ogc/features/",
                collectionId: "robitaillej:test_create_shp",
                legendEnabled: true,
                popupEnabled: true,
                name: "layer_regions",
                visible: true,
                title: "regions",
                renderer: {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                    },
                }
            });
 
 
0 Kudos
JamesSingletary
New Contributor

Hi Julien,

Just curious to know if you were able to pinpoint the cause of this error? I'm experiencing a similar `TypeError` as you described above, the main difference is that mine errors on the `attributes` prop.

 

Uncaught TypeError: Cannot read property 'attributes' of null

 

Any insight into this will be greatly appreciated! 

Thanks in advance,
James

0 Kudos