This sample demonstrates how to use the queryTopFeatures() method on a
FeatureLayer to query the most or the least visited national parks in each state for a given year or total of all time.
The query method will return a FeatureSet containing an array of the most or the least visited parks
grouped by states and ordered by the number of visits in descending or ascending order. The attributes of returned parks will be displayed on the right side of the
application and the resulting features will be displayed in the map.
How it works
When the application starts, a UI displays options for user input. Here, the user can specify if the results should include the most or the least visited parks, how many parks should be
returned from each state, and the time extent to query against. When calling the queryTopFeatures() method, the
topFilter property of the TopFeaturesQuery
parameter must always be set. In this app, the Top parameters are set as shown below.
// TopFeatureQuery parameter for the queryTopFeatures method
// collect user inputs to query either the most or the least
// visited national parks in each state
query = new TopFeaturesQuery({
topFilter: new TopFilter({
topCount: parseInt(topCountSelect.selectedOption.value),
groupByFields: ["State"],
orderByFields: orderByField
}),
orderByFields: orderByField,
outFields: ["State, TOTAL, F2018, F2019, F2020, Park"],
returnGeometry: true,
cacheHint: false
});
const results = await layer.queryTopFeatures(query);
The results of the query method are processed as shown below to display the attributes of the parks in descending or ascending order on the right side of the application.
The user then can click on an ordered result to display the corresponding popup on the map.
graphics = results.features;
graphics.forEach((result, index) => {
const attributes = result.attributes;
const item = document.createElement("calcite-list-item");
item.setAttribute("label", attributes.Park);
item.setAttribute("value", index);
const visitorTotal = orderByFieldSelection.selectedOption.value;
const total = `Total visitors: ${attributes[visitorTotal]}`;
const state = `State: ${attributes.State}`;
const description = total + "\n" + state;
item.setAttribute("description", description);
item.addEventListener("click", parkResultClickHandler);
document.getElementById("results").appendChild(item);
});
The parks are also filtered on the map to just display the parks matching the query results. To do this, the queryTopObjectIds()
method is called to get the object of the parks returned from query method. Then the array of object is used to set a filter
of the layer view representing the national parks feature layer.
// set query for the queryTopObjectIds.
query.orderByFields = [""];
const objectIds = await layer.queryTopObjectIds(query);
layerView.filter = {
objectIds
};
To create the list of the most or least visited parks, we use calcite components, a set of responsive, reusable web components from Esri's new design system. We also style the calcite components to match the colors of park symbols as shown below:
#infoDiv {
padding: 6px;
width: 370px;
height: 97%;
position: absolute;
top: 10px;
right: 10px;
--calcite-color-brand: #71C96E;
--calcite-color-brand-hover: #67B564;
}