Remove Highlighted Features

2236
2
Jump to solution
03-29-2019 01:07 PM
JeremySingh1
New Contributor II

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>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#paneDiv {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px 0;
z-index: 1;
text-align: center;
}
button {
background: white;
padding: 7px;
border: 1px solid #005e95;
font-size: 0.9em;
margin: 5px;
color: #005e95;
}


</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>

<script>
require([
"esri/Map",
"esri/layers/FeatureLayer",
"esri/views/MapView"
], function(
Map,
FeatureLayer,
MapView
) {
//
// const fLayer = new featureLayer({
// portalItem: {
// id: "bba798b019ce4f20ac7db2b1f5df860c#data"
// }
// });
var template = { // autocasts as new PopupTemplate()
title: "This Lot is {Lot} SQFT in Size",
content: [{
// It is also possible to set the fieldInfos outside of the content
// directly in the popupTemplate. If no fieldInfos is specifically set
// in the content, it defaults to whatever may be set within the popupTemplate.
type: "fields",
fieldInfos: [{
fieldName: "Borough",
label: "Borough",
visible: true
}, {
fieldName: "Block",
label: "Block",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}]
}]
};
var featureLayer = new FeatureLayer({
portalItem: {
id:"bba798b019ce4f20ac7db2b1f5df860c"
},
popupTemplate: template
});
// Create the map
var map = new Map({
basemap: "gray",
layers: [featureLayer]
});

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

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

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.

View solution in original post

2 Replies
ReneRubalcava
Frequent Contributor

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.

JeremySingh1
New Contributor II

Thank you!

0 Kudos