Browse building floors

View on GitHub

Display and browse through building floors from a floor-aware web map.

Screenshot of browse building floors screenshot

Use case

Having map data to aid indoor navigation in buildings with multiple floors such as airports, museums, or offices can be incredibly useful. For example, you may wish to browse through all available floor maps for an office in order to find the location of an upcoming meeting in advance.

How to use the sample

Use the picker to browse different floor levels in the facility. Only the selected floor will be displayed.

How it works

  1. Create and load a Map instance from a PortalItem of a floor-aware web map.
  2. Create a MapView instance from the map.
  3. Once the map is loaded, overlay a FloorFilter instance over the map view, specifying the map's floor manager, an alignment, the current viewpoint, and a Boolean value indicating whether the map is being navigated.

Relevant API

  • ArcGIS.FloorManager
  • ArcGISToolkit.FloorFilter

About the data

This sample uses a floor-aware web map that displays the floors of Building L on the Esri Redlands campus.

Additional information

The FloorManager API also supports browsing different sites and facilities in addition to building floors.

Floor-awareness APIs support both maps and scenes. To learn more about floor-aware maps, read the Configure floor-aware maps article.

Tags

building, facility, floor, floor-aware, floors, ground floor, indoor, level, site, story

Sample Code

BrowseBuildingFloorsView.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
65
66
67
68
69
70
71
72
73
74
75
76
77
// 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 ArcGIS
import ArcGISToolkit
import SwiftUI

struct BrowseBuildingFloorsView: View {
    /// The error shown in the error alert.
    @State private var error: Error?

    /// The current viewpoint of the map.
    @State private var viewpoint: Viewpoint?

    /// A Boolean value indicating whether the map is being navigated.
    @State private var isMapNavigating = false

    /// A Boolean value indicating whether the map is loaded.
    @State private var isMapLoaded = false

    /// A floor-aware web map of Building L on the Esri Redlands campus.
    @State private var map = Map(
        item: PortalItem(
            portal: .arcGISOnline(connection: .anonymous),
            id: .esriBuildingL
        )
    )

    var body: some View {
        MapView(map: map)
            .onViewpointChanged(kind: .centerAndScale) { viewpoint = $0 }
            .onNavigatingChanged { isMapNavigating = $0 }
            .errorAlert(presentingError: $error)
            .ignoresSafeArea(.keyboard, edges: .bottom)
            .overlay(alignment: .bottomTrailing) {
                if isMapLoaded,
                   let floorManager = map.floorManager {
                    FloorFilter(
                        floorManager: floorManager,
                        alignment: .bottomTrailing,
                        viewpoint: $viewpoint,
                        isNavigating: $isMapNavigating
                    )
                    .frame(
                        maxWidth: 400,
                        maxHeight: 400
                    )
                    .padding(.toolkitDefault)
                    .padding(.bottom, 27)
                }
            }
            .task {
                do {
                    try await map.load()
                    isMapLoaded = true
                } catch {
                    self.error = error
                }
            }
    }
}

private extension PortalItem.ID {
    /// A portal item of Building L's floors on the Esri Redlands campus.
    static var esriBuildingL: Self { Self("f133a698536f44c8884ad81f80b6cfc7")! }
}

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