<!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 | Sample | ArcGIS API for JavaScript 4.18</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#seasons-filter {
height: 100px;
width: 180px;
visibility: hidden;
}
.season-item {
width: 100%;
padding: 12px;
text-align: center;
vertical-align: baseline;
cursor: pointer;
height: 50px;
}
.season-item:focus {
background-color: dimgrey;
}
.season-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:
outFields: ["*"]
});
const map = new Map({
basemap: "gray-vector",
layers: [layer]
});
const view = new MapView({
map: map,
container: "viewDiv",
center: [116.6333769, -0.6171669],
zoom: 3,
});
const seasonsNodes = document.querySelectorAll(`.season-item`);
const seasonsElement = document.getElementById("seasons-filter");
// click event handler for seasons choices
seasonsElement.addEventListener("click", filterBySeason);
// User clicked on Winter, Spring, Summer or Fall
// set an attribute filter on flood warnings layer view
// to display the warnings issued in that season
function filterBySeason(event) {
const selectedSeason = event.target.getAttribute("data-season");
var markedCheckbox = document.getElementsByClassName('checkboxCL');
var queryWhere=[];
for (var checkbox of markedCheckbox) {
if (checkbox.checked)
queryWhere.push("'"+checkbox.value+"'");
}
floodLayerView.filter = {
where: "provinsi in(" + queryWhere.toString() + ")"
};
alert("provinsi in(" + queryWhere.toString() + ")");
}
view.whenLayerView(layer).then(function (layerView) {
// flash flood warnings layer loaded
// get a reference to the flood warnings layerview
floodLayerView = layerView;
// set up UI items
seasonsElement.style.visibility = "visible";
const seasonsExpand = new Expand({
view: view,
content: seasonsElement,
expandIconClass: "esri-icon-filter",
group: "top-left"
});
//clear the filters when user closes the expand widget
seasonsExpand.watch("expanded", function () {
if (!seasonsExpand.expanded) {
floodLayerView.filter = null;
}
});
view.ui.add(seasonsExpand, "top-left");
view.ui.add("titleDiv", "top-right");
});
});
</script>
</head>
<body>
<div id="seasons-filter" class="esri-widget">
<div class="form-check">
<input type="checkbox" value="ACEH" class="checkboxCL" id="flexCheckDefault" name="selectAceh[]" data-season="ACEH">
<label class="form-check-label" for="flexCheckDefault">
ACEH
</label>
</div>
<div class="form-check">
<input type="checkbox" value="SUMATERA UTARA" class="checkboxCL" id="flexCheckDefault" name="selectSumut[]" data-season="SUMATERA UTARA">
<label class="form-check-label" for="flexCheckDefault">
SUMATERA UTARA
</label>
</div>
<div class="form-check">
<input type="checkbox" value="SUMATERA BARAT" class="checkboxCL" id="flexCheckDefault" name="selectSumbar[]" data-season="SUMATERA BARAT">
<label class="form-check-label" for="flexCheckDefault">
SUMATERA BARAT
</label>
</div>
<div class="form-check">
<input type="checkbox" value="SUMATERA SELATAN" class="checkboxCL" id="flexCheckDefault" name="selectSumsel[]" data-season="SUMATERA SELATAN">
<label class="form-check-label" for="flexCheckDefault">
SUMATERA SELATAN
</label>
</div>
</div>
<div id="viewDiv"></div>
</body>
</html>