Merge pull request #382 from Esri/Caleb/Update-DisplayClustersDesign

[Update] `Display clusters` design

Author: CalebRas

Shared/Samples/Display clusters/DisplayClustersView.swift

@@ -34,6 +34,9 @@ struct DisplayClustersView: View {
     /// The screen point to perform an identify operation.
     @State private var identifyScreenPoint: CGPoint?
 
+    /// The geoelements in the selected cluster.
+    @State private var geoElements: [GeoElement] = []
+    
     /// The popup to be shown as the result of the layer identify operation.
     @State private var popup: Popup?
 
@@ -53,6 +56,9 @@ struct DisplayClustersView: View {
                     identifyScreenPoint = screenPoint
                 }
                 .task(id: identifyScreenPoint) {
+                    layer?.clearSelection()
+                    geoElements.removeAll()
+                    
                     guard let identifyScreenPoint,
                           let layer,
                           let identifyResult = try? await proxy.identify(
@@ -63,6 +69,15 @@ struct DisplayClustersView: View {
                     else { return }
                     self.popup = identifyResult.popups.first
                     self.showsPopup = self.popup != nil
+                    
+                    guard let identifyGeoElement = identifyResult.geoElements.first else { return }
+                    if let aggregateGeoElement = identifyGeoElement as? AggregateGeoElement {
+                        aggregateGeoElement.isSelected = true
+                        let geoElements = try? await aggregateGeoElement.geoElements
+                        self.geoElements = geoElements ?? []
+                    } else if let feature = identifyGeoElement as? Feature {
+                        layer.selectFeature(feature)
+                    }
                 }
                 .floatingPanel(
                     selectedDetent: .constant(.half),
@@ -71,7 +86,26 @@ struct DisplayClustersView: View {
                 ) { [popup] in
                     PopupView(popup: popup!, isPresented: $showsPopup)
                         .showCloseButton(true)
-                        .padding()
+                        .padding([.top, .horizontal])
+                    
+                    if !geoElements.isEmpty {
+                        List {
+                            Section {
+                                ForEach(Array(geoElements.enumerated()),
+                                        id: \.offset
+                                ) { offset, geoElement in
+                                    let name = geoElement.attributes["name"] as? String
+                                    Text(name ?? "Geoelement: \(offset)")
+                                }
+                            } header: {
+                                Text("Geoelements")
+                                    .font(.title3)
+                                    .bold()
+                                    .foregroundColor(.primary)
+                            }
+                        }
+                        .listStyle(.inset)
+                    }
                 }
                 .toolbar {
                     ToolbarItem(placement: .bottomBar) {

Shared/Samples/Display clusters/README.md

@@ -10,7 +10,7 @@ Feature clustering can be used to dynamically aggregate groups of points that ar
 
 ## How to use the sample
 
-Pan and zoom the map to view how clustering is dynamically updated. Toggle clustering off to view the original point features that make up the clustered elements. When clustering is toggled on, you can tap on a clustered geoelement to view aggregated information and summary statistics for that cluster. When clustering is toggled off and you tap on the original feature you get access to information about individual power plant features.
+Pan and zoom the map to view how clustering is dynamically updated. Toggle clustering off to view the original point features that make up the clustered elements. When clustering is toggled on, you can tap on a clustered geoelement to view aggregated information and summary statistics for that cluster as well as a list of containing geoelements. When clustering is disabled and you tap on the original feature you get access to information about individual power plant features.
 
 ## How it works
 
@@ -20,7 +20,8 @@ Pan and zoom the map to view how clustering is dynamically updated. Toggle clust
 4. Use the `onSingleTapGesture` modifier to listen for tap events on the map view.
 5. Identify tapped features on the map using `identify(on:screenPoint:tolerance:returnPopupsOnly:maximumResults:)` on the feature layer and pass in the map screen point location.
 6. Get the `Popup` from the resulting `IdentifyLayerResult` and use it to construct a `PopupView`.
-7. Use a `FloatingPanel` to display the popup information from the `PopupView`.
+7. Get the `AggregateGeoElement` from the `IdentifyLayerResult` and use `geoElements` to retrieve the contained `GeoElement` objects.
+8. Use a `FloatingPanel` to display the popup information from the `PopupView` and the list containing the `GeoElement` objects.
 
 ## Relevant API
 

Shared/Samples/Display clusters/README.metadata.json

@@ -1,5 +1,5 @@
 {
-    "category": "Visualization",
+    "category": "Layers",
     "description": "Display a web map with a point feature layer that has feature reduction enabled to aggregate points into clusters.",
     "ignore": false,
     "images": [