AnsweredAssumed Answered

Remove Highlighted Features

Question asked by jsingh_tscggis on Mar 29, 2019
Latest reply on Apr 1, 2019 by jsingh_tscggis

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]; 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[x];
//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>

Outcomes