Cam,
Here the sample updated for that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Filter features by attribute - 4.15</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#id-filter {
max-height: 400px;
width: 100%;
visibility: hidden;
overflow-y: scroll;
}
.id-item {
width: 100%;
padding: 12px;
text-align: center;
vertical-align: baseline;
cursor: pointer;
height: 40px;
}
.id-item:focus {
background-color: dimgrey;
}
.id-item:hover {
background-color: dimgrey;
}
#titleDiv {
padding: 10px;
}
#titleText {
font-size: 20pt;
font-weight: 60;
padding-bottom: 10px;
}
</style>
<script>
require([
"esri/views/MapView",
"esri/Map",
"esri/layers/FeatureLayer",
"esri/widgets/Expand"
], function(MapView, Map, FeatureLayer, Expand) {
let floodLayerView;
const layer = new FeatureLayer({
url: "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/",
outFields: ["*"]
});
const map = new Map({
basemap: "gray-vector",
layers: [layer]
});
const view = new MapView({
map: map,
container: "viewDiv",
center: [-98, 40],
zoom: 4
});
const idNodes = document.querySelectorAll(`.id-item`);
const idElement = document.getElementById("id-filter");
idElement.addEventListener("click", filterByID);
function filterByID(event) {
const selectedID = event.target.getAttribute("data-id");
eqLayerView.filter = {
where: "id = '" + selectedID + "'"
};
}
view.whenLayerView(layer).then(function(layerView) {
eqLayerView = layerView;
idElement.style.visibility = "visible";
const idExpand = new Expand({
view: view,
content: idElement,
expandIconClass: "esri-icon-filter",
group: "top-left"
});
idExpand.watch("expanded", function() {
if (!idExpand.expanded) {
eqLayerView.filter = null;
}
});
view.ui.add(idExpand, "top-left");
view.ui.add("titleDiv", "top-right");
var query = layer.createQuery();
query.outFields = ["id"];
query.returnDistinctValues = true;
query.returnGeometry = false;
layer.queryFeatures(query).then(function(results){
results.features.map(function(feat){
var id = feat.attributes.id;
var opt = document.createElement("div");
opt.className = "id-item visible-id";
opt.setAttribute("data-id", id);
opt.innerHTML = id;
idElement.appendChild(opt);
});
});
});
});
</script>
</head>
<body>
<div id="id-filter" class="esri-widget">
</div>
<div id="viewDiv"></div>
<div id="titleDiv" class="esri-widget">
<div id="titleText">Earthquakes</div>
<div>Shake Intensity</div>
</div>
</body>
</html>