Browse Building Floors

View inQMLC++
View on GitHub
Sample viewer app

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

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 dropdown menu to browse different floor levels in the facility. Only the selected floor will be displayed.

How it works

  1. Create a PortalItem using the identifier of a floor-aware web map.
  2. Create a map using the portal item.
  3. Create a map view and assign the map to it.
  4. Wait for the map to load and retrieve the map's FloorManager.
  5. Wait for the floor manager to load and get its list of FloorLevels.
  6. Set the isVisible property to false for all floor levels.
  7. Set only the selected FloorLevel to visible using the isVisible property of the floor level.
  • Note: Manually set the default floor level to the first floor.

Relevant API

  • FloorLevel
  • FloorManager

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.

Tags

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

Sample Code

BrowseBuildingFloors.qml
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
// [WriteFile Name=BrowseBuildingFloors, Category=Maps]
// [Legal]
// 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
// http://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.
// [Legal]

import QtQuick 2.12
import QtQuick.Controls 2.2
import Esri.ArcGISRuntime 100.14

Rectangle {
    id: rootRectangle
    clip: true
    width: 800
    height: 600

    property FloorManager floorManager;

    MapView {
        id: mapView
        anchors.fill: parent

        PortalItem {
            id: portalItem
            itemId: "f133a698536f44c8884ad81f80b6cfc7"
        }

        Map {
            id: arcgisOnlineMap
            item: portalItem

            onLoadStatusChanged: {
                if (arcgisOnlineMap.loadStatus === Enums.LoadStatusLoaded) {
                    if (arcgisOnlineMap.floorManager) {
                        arcgisOnlineMap.floorManager.load();
                    }
                }
            }
        }

        Column {
            spacing: 15
            padding: 10

            ComboBox {
                id: floor_level
                width: 200
                model: ["Level 1", "Level 2", "Level 3"]
            }

            Button {
                id: select_floor
                width: 200
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Select Floor"
                enabled: arcgisOnlineMap.floorManager ? arcgisOnlineMap.floorManager.loadStatus === Enums.LoadStatusLoaded : false
                onClicked: {
                    const levels = arcgisOnlineMap.floorManager.levels;

                    if (floor_level.currentText == "Level 1")
                    {
                        // Set the floor to level 1
                        levels[0].visible = true

                        // Make the other floors invisible
                        levels[1].visible = false
                        levels[2].visible = false
                    }

                    if (floor_level.currentText == "Level 2")
                    {
                        // Set the floor to level 2
                        levels[1].visible = true

                        // Make the other floors invisible
                        levels[0].visible = false
                        levels[2].visible = false
                    }

                    if (floor_level.currentText == "Level 3")
                    {
                        // Set the floor to level 3
                        levels[2].visible = true

                        // Make the other floors invisible
                        levels[0].visible = false
                        levels[1].visible = false
                    }
                }
            }
        }

    }
}

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