Remove Highlighted Features

775
2
Jump to solution
03-29-2019 01:07 PM
Highlighted
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>

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
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
Highlighted
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

Highlighted
New Contributor II

Thank you!

Reply
0 Kudos