This sample demonstrates how use an Arcade expression in a PopupTemplate to summarize points from one layer that intersect a polygon in a different layer.
The map in this sample contains two layers: a polygon layer representing block groups and a point layer representing the locations of crimes. Each crime has a desc_ field describing the type of crime committed. It also has a is_night field containing either a 1 (crime committed at night) or a 0 (crime committed during the day). This app uses a single Arcade expression to do the following each time the user clicks a feature and opens the popup:
Query the crimes that intersect a selected polygon.
Group those intersecting points by crime type and return the total count and average is_night value within each category.
Sort the groups in descending order by count.
These three steps are reflected in the expression below.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<scripttype="text/arcgis-arcade"id="crimes-arcade">// 1. Query the number of crimes that intersect a selected polygonvar crimes = Intersects(
$feature,
FeatureSetByName($map,"San Diego crimes", ["desc_", "is_night"])
);
// 2. Group the intersecting points by crime type and return the total count// and average `is_night` value within each category of crimesvar stats = GroupBy(crimes, ["desc_"],
[ { name: "total", expression: "1", statistic: "count" },
{ name: "night_avg", expression: "is_night", statistic: "avg" }
]
);
// 3. Sort the crime types in descending order by count.var topCrimes = Top(OrderBy(Filter(stats, "desc_ <> ''"), "total desc"), 3);
var output = "";
if(Count(topCrimes) == 0){
return"No crimes committed in this area";
}
var num = 0;
// Format the results for displayfor(var item in topCrimes){
num++;
var num_crimes = item.total;
var crimeType = item["desc_"];
// The isNight field has values of either 1 or 0.// If the average value (night_avg) is high, then most crimes// occurred at night. If the average is low, then// the crimes typically occurred during daytime hours.var timeOfDay = When(
item.night_avg >= 0.6, "at night",
item.night_avg <= 0.4, " during the daytime hours",
" at both night and day");
// Display crime type with count using template literals output += `${num}. ${crimeType} -- Total offenses: ${Text(num_crimes, "#,###")} -- Most crimes were reported ${timeOfDay} `;
}
return output;
</script>
The Arcade documentation for GroupBy() contains additional information for how to query multiple statistics (e.g. sum, min, max, average, standard deviation, variance) in Arcade with a single function call.
After authoring the Arcade expression, you can reference it in JavaScript as a string value and set it to the expression property of the expressionInfos in the layer's popupTemplate.
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const arcadeScript = document.getElementById("crimes-arcade").text;
const blockGroups = new FeatureLayer({
title: "U.S. Census Block Groups",
portalItem: {
id: "181b322639d44fcba6e37d8b82910daf" },
popupTemplate: {
title: "Tract: {Tract}, Block Group: {BLKGRP}",
content: "Top 3 crimes: <br\><br\>" +
"{expression/top-crimes}",
expressionInfos: [{
// the name is used to reference the expression value in the templatename: "top-crimes",
title: "Top crimes",
// the Arcade expression stored as textexpression: arcadeScript
}]
}
});