Merge pull request #530 from Esri/Caleb/Update-ShowGrid

[Update] `Show grid` to include scene view

Author: CalebRas

Shared/Samples/Show grid/README.md

@@ -1,31 +1,33 @@
 # Show grid
 
-Display coordinate system grids including latitude-longitude, MGRS, UTM and USNG on a map view. Also, toggle label visibility and change the color of grid lines and grid labels.
+Display and customize coordinate system grids, including Latitude/Longitude, MGRS, UTM, and USNG, on a map view or scene view.
 
 ![Image of Show grid sample](show-grid.png)
 
 ## Use case
 
-Grids are often used on printed maps, but can also be helpful on digital maps, to identify locations on a map.
+Grids are often used on printed maps, but can also be helpful on digital 2D maps or 3D scenes, to identify locations.
 
 ## How to use the sample
 
-Tap the button in the toolbar to open the grid settings view. You can select type of grid from grid types (LatLong, MGRS, UTM and USNG) and modify its properties like grid visibility, grid color, label visibility, label color, label position, label format and label unit.
+Use the picker to change the view from 2D or 3D, or tap the button in the toolbar to open the grid settings. You can select the type of grid (LatLong, MGRS, UTM, and USNG) and modify its properties like the visibility and color of the lines, and the position, format, and units of the labels.
 
 ## How it works
 
 1. Create an instance of one of the `Grid` types.
 2. Grid lines and labels can be styled per grid level with `grid.lineSymbols[0]` and `grid.textSymbols[0]` subscripts on the grid.
-3. The label position, format, unit and visibility can be specified with `labelPosition`, `labelFormat`, `labelUnit` and `isVisible` on the `Grid`.
+3. The label position, format, unit, and visibility can be specified with `labelPosition`, `labelFormat`, `labelUnit`, and `isVisible` on the `Grid`.
+    * Note that as of 200.6, MGRS, UTM, and USNG grids in a SceneView only support the `geographic` label position.
 4. For the `LatitudeLongitudeGrid` type, you can specify a label format of `decimalDegrees` or `degreesMinutesSeconds`.
-5. To set the grid, assign it to the map view using the `grid(_:)` modifier.
+5. To set the grid, assign it to the map view or scene view using the `grid(_:)` modifier.
 
 ## Relevant API
 
 * Grid
 * LatitudeLongitudeGrid
 * MapView
 * MGRSGrid
+* SceneView
 * SimpleLineSymbol
 * TextSymbol
 * USNGGrid

Shared/Samples/Show grid/README.metadata.json

@@ -1,6 +1,6 @@
 {
-    "category": "Maps",
-    "description": "Display coordinate system grids including latitude-longitude, MGRS, UTM and USNG on a map view. Also, toggle label visibility and change the color of grid lines and grid labels.",
+    "category": "Visualization",
+    "description": "Display and customize coordinate system grids, including Latitude/Longitude, MGRS, UTM, and USNG, on a map view or scene view.",
     "ignore": false,
     "images": [
         "show-grid.png"
@@ -21,6 +21,7 @@
         "LatitudeLongitudeGrid",
         "MGRSGrid",
         "MapView",
+        "SceneView",
         "SimpleLineSymbol",
         "TextSymbol",
         "USNGGrid",
@@ -32,6 +33,7 @@
         "LatitudeLongitudeGrid",
         "MGRSGrid",
         "MapView",
+        "SceneView",
         "SimpleLineSymbol",
         "TextSymbol",
         "USNGGrid",

Shared/Samples/Show grid/ShowGridView.swift

@@ -19,26 +19,44 @@ struct ShowGridView: View {
     /// The view model for the sample.
     @StateObject private var model = Model()
 
+    /// The current viewpoint of the geo views.
+    @State private var viewpoint = Viewpoint(latitude: 34.05, longitude: -118.25, scale: 8e6)
+    
     /// A Boolean value indicating whether the settings view should be presented.
     @State private var showsGridSettingsView = false
 
     var body: some View {
-        MapView(map: model.map)
-            .grid(model.grid)
-            .toolbar {
-                ToolbarItem(placement: .bottomBar) {
-                    Button("Grid Settings") {
-                        showsGridSettingsView = true
-                    }
-                    .popover(isPresented: $showsGridSettingsView) {
-                        NavigationStack {
-                            GridSettingsView(model: model)
-                        }
-                        .presentationDetents([.fraction(0.6), .large])
-                        .frame(idealWidth: 350, idealHeight: 480)
+        Group {
+            switch model.geoViewType {
+            case .mapView:
+                MapView(map: model.map, viewpoint: viewpoint)
+                    .grid(model.grid)
+                    .onViewpointChanged(kind: .centerAndScale) { viewpoint = $0 }
+            case .sceneView:
+                SceneView(scene: model.scene, viewpoint: viewpoint)
+                    .grid(model.grid)
+                    .onViewpointChanged(kind: .centerAndScale) { viewpoint = $0 }
+            }
+        }
+        .toolbar {
+            ToolbarItemGroup(placement: .bottomBar) {
+                Button("Grid Settings") {
+                    showsGridSettingsView = true
+                }
+                .popover(isPresented: $showsGridSettingsView) {
+                    NavigationStack {
+                        GridSettingsView(model: model)
                     }
+                    .presentationDetents([.fraction(0.6), .large])
+                    .frame(idealWidth: 350, idealHeight: 480)
+                }
+                
+                Picker("Geo View", selection: $model.geoViewType) {
+                    Text("Map View").tag(GeoViewType.mapView)
+                    Text("Scene View").tag(GeoViewType.sceneView)
                 }
             }
+        }
     }
 }
 
@@ -47,14 +65,23 @@ private extension ShowGridView {
 
     /// The view model for the sample.
     final class Model: ObservableObject {
-        /// A map with topographic basemap.
-        let map: Map = {
-            let map = Map(basemapStyle: .arcGISTopographic)
-            map.initialViewpoint = Viewpoint(latitude: 34.05, longitude: -118.25, scale: 8e6)
-            return map
+        /// A map with a topographic basemap.
+        let map = Map(basemapStyle: .arcGISTopographic)
+        
+        /// A scene with elevation and a topographic basemap.
+        let scene: ArcGIS.Scene = {
+            let scene = Scene(basemapStyle: .arcGISTopographic)
+            let elevationSource = ArcGISTiledElevationSource(url: .worldElevationService)
+            scene.baseSurface.addElevationSource(elevationSource)
+            return scene
         }()
 
-        /// The map view's grid, initially set to a Lat-Lon grid.
+        /// The type of geo view that is showing.
+        @Published var geoViewType = GeoViewType.mapView {
+            didSet { grid = makeGrid(type: gridType) }
+        }
+        
+        /// The geo view's grid, initially set to a Lat-Lon grid.
         @Published var grid: ArcGIS.Grid = LatitudeLongitudeGrid()
 
         /// The kind of grid to display.
@@ -71,6 +98,11 @@ private extension ShowGridView {
         /// The units used for labeling the MGRS grid.
         @Published var mgrsLabelUnit: MGRSGrid.LabelUnit = .kilometersMeters
 
+        /// A Boolean value indicating whether the current grid only supports `LabelPosition.geographic`.
+        var gridOnlySupportsGeographic: Bool {
+            geoViewType == .sceneView && gridType != .latitudeLongitude
+        }
+        
         /// Creates a new grid of a given type.
         /// - Parameter gridType: The kind of grid to make.
         /// - Returns: A new `Grid` object.
@@ -97,12 +129,17 @@ private extension ShowGridView {
             newGrid.labelsAreVisible = grid.labelsAreVisible
             newGrid.linesColor = grid.linesColor
             newGrid.labelsColor = grid.labelsColor
-            newGrid.labelPosition = grid.labelPosition
+            newGrid.labelPosition = gridOnlySupportsGeographic ? .geographic : grid.labelPosition
 
             return newGrid
         }
     }
 
+    /// A type of `GeoView`.
+    enum GeoViewType {
+        case mapView, sceneView
+    }
+    
     // MARK: - Settings View
 
     struct GridSettingsView: View {
@@ -136,6 +173,7 @@ private extension ShowGridView {
                             Text(position.label)
                         }
                     }
+                    .disabled(model.gridOnlySupportsGeographic)
 
                     if let latitudeLongitudeGrid = model.grid as? LatitudeLongitudeGrid {
                         Picker("Format", selection: $model.labelFormat) {
@@ -211,7 +249,7 @@ private extension ArcGIS.Grid {
 }
 
 private extension ShowGridView {
-    /// The kinds of grid to show in a map view.
+    /// The kinds of grid to show on the geo view.
     enum GridType: CaseIterable {
         case latitudeLongitude, mgrs, usng, utm
 
@@ -289,6 +327,13 @@ private extension USNGGrid.LabelUnit {
     }
 }
 
+private extension URL {
+    /// A web URL to the Terrain3D image server on ArcGIS REST.
+    static var worldElevationService: URL {
+        URL(string: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer")!
+    }
+}
+
 // MARK: - Preview
 
 #Preview {