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

julienrobitaille — Tue, 10 Nov 2020 15:31:51 GMT

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

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

KavishGhime3 — Fri, 13 Nov 2020 06:03:37 GMT

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,

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

julienrobitaille — Fri, 13 Nov 2020 15:25:49 GMT

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>

<head>

</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(Map, MapView, BasemapToggle, OGCFeatureLayer, Graphic, GraphicsLayer, Point) {

var map = new Map({

basemap: "topo-vector"

});

var view = new MapView({

container: "viewDiv",

map: map,

center: [-68.80500, 47.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,

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",

});

map.add(stationsLayerTrue);

for (i = 0; i < stations.length; i++) {

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 {

position: absolute;

left: 0;

right: 0px;

top: 0;

bottom: 0;

height: 100%;

}

.esri-legend__layer-caption {

display: none;

}

</style>

</head>

<body>

</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

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

julienrobitaille — Fri, 13 Nov 2020 15:29:38 GMT

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,

visible: true,

title: "regions",

renderer: {

type: "simple",

symbol: {

type: "simple-fill",

}

});

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

JamesSingletary — Fri, 25 Jun 2021 08:17:17 GMT

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

topic Uncaught (in promise) TypeError: Cannot read property 'setHighlight' of null in ArcGIS JavaScript Maps SDK Questions

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

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

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

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

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