This sample demonstrates how to query features from a FeatureLayer that are beyond its maxRecordCount using pagination. This can be done by fetching a specified number of records, starting from a specified record in the service.
How it works
When the application starts, twenty counties with the highest household median income will be queried
from the service as shown below. The querying is done by setting the query object's start
and num properties. The start parameter is a zero based index indicating where to begin fetching features until you've reached the specified num parameter, or number of features to query.
// ************************************************************************
// This function is used to fetch 20 features from a specified start location
// It is called when the application loads first then it is called whenever
// user changes the page number on the calcite-pagination component
// ************************************************************************
function queryPage(page) {
// Query for the page of features.
// order the results by median income in descending order
const query = {
start: page,
num: 20,
outFields: ["*"],
returnGeometry: true,
orderByFields: ["MEDHINC_CY DESC"]
};
const promise = featureLayer
.queryFeatures(query)
.then((featureSet) => convertFeatureSetToRows(featureSet, query));
}
Info for the fetched counties will be displayed in a calcite list on the right side of the application. The counties corresponding to this list will also be highlighted on the map.
// ************************************************************************
// This function is called once "next" twenty countries are fetched
// and sets up the list on the right side of the application
// ************************************************************************
function convertFeatureSetToRows(featureSet, query) {
document.getElementById("incomeList").innerHTML = "";
graphics = featureSet.features;
graphics.forEach((result, index) => {
const attributes = result.attributes;
const name = attributes.NAME;
const income = `median income: ${attributes.MEDHINC_CY}`;
const item = document.createElement("calcite-pick-list-item");
item.setAttribute("label", name);
item.setAttribute("value", index);
item.setAttribute("description", income);
item.addEventListener("click", onCountyClickHandler);
document.getElementById("incomeList").appendChild(item);
});
if (highlight) {
highlight.remove();
}
highlight = layerView.highlight(featureSet.features);
}
The user can also click on page numbers shown below the list to fetch the counties ordered by the median household income. The following function is called when the calcite pagination component's page number is changed.
// ************************************************************************
// User clicked on the page number on the calcite-pagination
// set up the query page and fetch the features from the service corresponding
// to the page number
// ************************************************************************
document.getElementById("tablePager").addEventListener("calcitePaginationChange", (event) => {
let page;
if (event.target.startItem === 1) {
page = 0;
} else {
page = event.target.startItem;
}
queryPage(page);
// set up the view for the new results
view.zoom = 4;
view.center = [-98, 38];
if (view.popup.visible) {
view.popup.visible = false;
}
});