This sample demonstrates how to filter binned data on a FeatureLayer. Binning is a method of aggregating spatial features by grouping them into predefined bins, enabling efficient visualization and analysis of large datasets.
Filtering binned features works the same way as filtering non-binned data. In this sample, the filter is applied to the layer view.
<!doctype html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Binning - Filter by category | Sample | ArcGIS Maps SDK for JavaScript</title>
<!-- Load the ArcGIS Maps SDK for JavaScript from CDN --> <script type="module" src="https://js.arcgis.com/5.0/"></script>
<style> html, body { height: 100%; margin: 0; }
#filter-panel { --calcite-panel-space: 10px; --calcite-panel-background-color: #2b2b2b; } </style> </head>
<body class="calcite-mode-dark"> <arcgis-map center="-89.305647, 28.85186" scale="3321566"> <arcgis-zoom slot="top-left"></arcgis-zoom> <calcite-panel id="filter-panel" heading="Filter by well type" slot="top-right"> <calcite-select id="type-select" label="Seasons" selection-appearance="border" selection-mode="single"> <calcite-option label="all" value="all"></calcite-option> <calcite-option label="Development" value="Development"></calcite-option> <calcite-option label="Exploratory" value="Exploratory"></calcite-option> <calcite-option label="Core Test" value="Core Test"></calcite-option> <calcite-option label="Relief" value="Relief"></calcite-option> </calcite-select> <arcgis-legend></arcgis-legend> </calcite-panel> </arcgis-map>
<script type="module"> const [Map, FeatureLayer, AggregateField] = await $arcgis.import([ "@arcgis/core/Map.js", "@arcgis/core/layers/FeatureLayer.js", "@arcgis/core/layers/support/AggregateField.js", ]);
const colors = ["#48385f", "#995375", "#db4a5b", "#fc9a59", "#fee086"];
const viewElement = document.querySelector("arcgis-map");
// Define feature reduction to show binned oil and natural gas wells const featureReduction = { type: "binning", fields: [ new AggregateField({ name: "aggregateCount", alias: "Total wells", statisticType: "count", }), ], fixedBinLevel: 5, labelsVisible: true, labelingInfo: [ { minScale: 1155580, maxScale: 0, deconflictionStrategy: "none", symbol: { type: "text", // autocasts as new TextSymbol() color: "white", haloColor: colors[0], haloSize: 1.2, font: { family: "Noto Sans", size: 10, }, }, labelExpressionInfo: { expression: "Text($feature.aggregateCount, '#,###')", }, }, ], popupEnabled: true, popupTemplate: { title: "Oil and gas wells", content: "This area has {aggregateCount} oil and gas wells.", }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [0, 255, 71, 1], outline: null, }, visualVariables: [ { type: "color", field: "aggregateCount", stops: [ { value: 0, color: colors[0] }, { value: 25, color: colors[1] }, { value: 50, color: colors[2] }, { value: 100, color: colors[3] }, { value: 200, color: colors[4] }, ], }, ], }, };
// Oil and natural gas wells in Outer Continental Shelf (OCS) waters const layer = new FeatureLayer({ portalItem: { id: "caa1bf11657547cc9a1b9d90f41ac405", }, featureReduction, outFields: ["TYPE_CODE_DESC"], minScale: 0, maxScale: 0, });
const map = new Map({ basemap: { portalItem: { id: "9cc4e190b8764e8880bd77cb16b9a30a", }, }, layers: [layer], });
viewElement.map = map; viewElement.constraints = { snapToZoom: false, };
const layerView = await viewElement.whenLayerView(layer);
// Apply filter to the layer view based on the selected well type const typeSelect = document.getElementById("type-select"); typeSelect.addEventListener("calciteSelectChange", () => { const value = typeSelect.value; layerView.filter = value === "all" ? null : { where: `TYPE_CODE_DESC = '${value}'`, }; }); </script> </body></html>