Remove Highlighted Features

JeremySingh1 — Fri, 29 Mar 2019 20:07:47 GMT

So whenever I click the buttons below in the webpage, it doesn't seem to remove the highlighted features properly from my map. Could anyone see the reason why none of the highlighted features are not removed properly?

See code below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to PopupTemplate - 4.10</title>

</style>

// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
center: [-73.954509, 40.620479],
zoom: 13
});

/*************************************************************
* The PopupTemplate content is the text that appears inside the
* popup. {fieldName} can be used to reference the value of an
* attribute of the selected feature. HTML elements can be used
* to provide structure and styles within the content. The
* fieldInfos property is an array of objects (each object representing
* a field) that is use to format number fields and customize field
* aliases in the popup and legend.
**************************************************************/

// Reference the popupTemplate instance in the
// popupTemplate property of FeatureLayer
//

//map.add(featureLayer);
var highlightSelect;
//var hoverPromise;

view.when(function(){
var lotLayer = map.layers.getItemAt(0);
view.whenLayerView(lotLayer).then(function(layerView){
var queryLots = lotLayer.createQuery();
var buttons = document.querySelectorAll("button");
for (var i = 0, button = null; button = buttons; i++){
console.log(button);
button.addEventListener("click", onClick);
}
function onClick(event){

queryLots.where = "Lot='" + event.target.innerText + "'";
lotLayer.queryFeatures(queryLots).then(
function(result){
//var x = null;
if (highlightSelect){

highlightSelect.remove();

}
for(x = 0; x < result.features.length; x++){

var feature = result.features;
//console.log(feature);
highlightSelect = layerView.highlight(feature.attributes['OBJECTID']);
//console.log(highlightSelect);

//return x;
}
});
}

});

})
});
</script>
</head>

<body>
<div id="viewDiv"></div>
<div id="paneDiv">
<h3> Click to polygons with these SQFT </h3>
<button>1</button>
<button>18</button>
<button>67</button>
</div>
</body>

</html>

Re: Remove Highlighted Features

ReneRubalcava — Sat, 11 Dec 2021 19:40:16 GMT

In your for loop, you keep reassigning the highlightSelect to the last feature, so you've lost the reference to all the other highlights to remove them.

for (x = 0; x < result.features.length; x++) {
  var feature = result.features[x];
  // this keeps getting reassigned
  highlightSelect = layerView.highlight(feature.attributes["OBJECTID"]);
}
‍‍‍‍‍

You can fix by pushing all the object ids into an array, and highlight them all at once.

var oids = [];
for (x = 0; x < result.features.length; x++) {
  var feature = result.features[x];
  oids.push(feature.attributes['OBJECTID']);
}
highlightSelect = layerView.highlight(oids);‍‍‍‍‍‍

Now you can properly remove the highlight on each button click.

Re: Remove Highlighted Features

JeremySingh1 — Mon, 01 Apr 2019 12:25:09 GMT

Thank you!

topic Re: Remove Highlighted Features in ArcGIS JavaScript Maps SDK Questions

Remove Highlighted Features

Re: Remove Highlighted Features

Re: Remove Highlighted Features