Set viewpoint rotation

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// Copyright 2022 Esri
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import SwiftUI
import ArcGIS
import ArcGISToolkit

struct SetViewpointRotationView: View {
    /// A map with ArcGIS Streets basemap style.
    @StateObject private var map = Map(basemapStyle: .arcGISStreets)

    /// The center of the viewpoint.
    @State private var center = Point(x: -117.156229, y: 32.713652, spatialReference: .wgs84)

    /// The scale of the viewpoint.
    @State private var scale = 5e4

    /// The rotation angle for the viewpoint.
    @State private var rotation = Double.zero

    var body: some View {
        VStack {
            MapView(map: map, viewpoint: Viewpoint(center: center, scale: scale, rotation: rotation))
                .onViewpointChanged(kind: .centerAndScale) { viewpoint in
                    center = viewpoint.targetGeometry.extent.center
                    scale = viewpoint.targetScale
                    rotation = viewpoint.rotation
                }
                .overlay(alignment: .topTrailing) {
                    Compass(
                        viewpointRotation: $rotation,
                        autoHide: false
                    )
                    .padding()
                }

            HStack {
                // Create a slider to rotate the map.
                Slider(value: $rotation, in: 0...359)

                Text(
                    Measurement(
                        value: rotation,
                        unit: UnitAngle.degrees
                    ),
                    format: .measurement(
                        width: .narrow,
                        numberFormatStyle: .number.precision(.fractionLength(0))
                    )
                )
                .frame(minWidth: 60, alignment: .leading)
            }
            .padding(.horizontal, 50)
            .frame(maxWidth: 540)
        }
        .padding(.bottom)
    }
}