Monitor changes to draw status

View on GitHub

Get the draw status of your map view or scene view to know when all layers in the map or scene have finished drawing.

Image of Monitor changes to draw status sample

Use case

You may want to display a loading indicator while layers are loading, which could then be removed when the draw status is completed.

How to use the sample

Pan and zoom around the map. Observe the map's drawing status in the toolbar.

How it works

  1. Create a MapView with a Map.
  2. Use the onDrawStatusChanged(perform:) modifier on the map view to get updates to the draw status.

Relevant API

  • DrawStatus
  • Map
  • MapView

Tags

draw, loading, map, render

Sample Code

MonitorChangesToDrawStatusView.swift
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// Copyright 2024 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 ArcGIS
import SwiftUI

struct MonitorChangesToDrawStatusView: View {
    /// A map with a topographic basemap.
    @State private var map: Map = {
        let map = Map(basemapStyle: .arcGISTopographic)

        // Initially centers the map on San Fransisco, CA, USA area.
        map.initialViewpoint = Viewpoint(
            center: Point(x: -13623300, y: 4548100, spatialReference: .webMercator),
            scale: 32e4
        )

        return map
    }()

    /// A Boolean value indicating whether the map is currently drawing.
    @State private var mapIsDrawing = false

    var body: some View {
        MapView(map: map)
            .onDrawStatusChanged { drawStatus in
                // Updates the state when the map's draw status changes.
                mapIsDrawing = drawStatus == .inProgress
            }
            .overlay(alignment: .top) {
                // The drawing status text at the top of the screen.
                Text(mapIsDrawing ? "Drawing…" : "Drawing completed.")
                    .multilineTextAlignment(.center)
                    .frame(maxWidth: .infinity, alignment: .center)
                    .padding(8)
                    .background(.regularMaterial, ignoresSafeAreaEdges: .horizontal)
            }
            .overlay(alignment: .center) {
                // The progress view in the center of the screen that shows when the map is drawing.
                if mapIsDrawing {
                    ProgressView()
                        .padding()
                        .background(.ultraThinMaterial)
                        .cornerRadius(10)
                        .shadow(radius: 50)
                }
            }
    }
}

#Preview {
    MonitorChangesToDrawStatusView()
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.