View inQMLC++View on GitHubSample viewer app
Display a route layer and its directions using a feature collection.
Use case
Routes can be stored as feature collection layers. These layers can store useful information such as directions, estimated trip time, and more.
You can create a route layer in ArcGIS Pro and store a route layer as a portal item, making it easy to access, share, or display.
How to use the sample
Pan and zoom to view the route displayed by the feature collection layer. Press the Directions button to view the list of directions.
How it works
- Create a
PortalItem with the item ID.
- Create and load a
FeatureCollection with the item.
- After loading, get the specified
FeatureCollectionTable by name.
- Create an array of
ArcGISFeatures.
- Get all of the
ArcGISFeatures using FeatureTable.queryFeatures.
- Get the direction text from the attributes of each feature in the array.
- Create a
FeatureCollectionLayer with the feature collection and set it to the map's operationalLayers.
Relevant API
- FeatureCollection
- FeatureCollectionLayer
- FeatureCollectionTableListModel
- FeatureQueryResult
- Portal
- PortalItem
directions, feature collection, feature collection layer, portal, portal item, route layer, routing
Sample Code
DisplayRouteLayer.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
// [WriteFile Name=DisplayRouteLayer, Category=Routing]
// [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
import QtQuick.Controls as Controls
import QtQuick.Layouts
import Esri.ArcGISRuntime
Rectangle {
id: rootRectangle
clip: true
width: 800
height: 600
property FeatureCollection featureCollection: null
property string directions: ""
MapView {
id: mapView
anchors.fill: parent
Component.onCompleted: {
// Set and keep the focus on MapView to enable keyboard navigation
forceActiveFocus();
}
PortalItem {
id: portalItem
itemId: "0e3c8e86b4544274b45ecb61c9f41336"
Component.onCompleted: load();
onLoadStatusChanged: {
if (loadStatus !== Enums.LoadStatusLoaded) {
return;
}
// if the portal item is a feature collection, add the feature collection to the map's operational layers
if (type === Enums.PortalItemTypeFeatureCollection) {
featureCollection = ArcGISRuntimeEnvironment.createObject("FeatureCollection", {item: portalItem});
const featureCollectionLayer = ArcGISRuntimeEnvironment.createObject("FeatureCollectionLayer", {featureCollection: featureCollection});
featureCollection.onLoadStatusChanged.connect(() => {
if (featureCollection.loadStatus === Enums.LoadStatusLoaded) {
featureCollection.tables.forEach((table) => {
if (table.displayName === "DirectionPoints") {
if (table.loadStatus === Enums.LoadStatusLoaded) {
queryFeatures(table);
}
}
});
}
});
map.operationalLayers.append(featureCollectionLayer);
} else {
console.warn("Portal item with ID '" + itemId + "' is not a feature collection.")
}
}
}
Map {
id: map
initBasemapStyle: Enums.BasemapStyleArcGISTopographic
initialViewpoint: viewpoint
}
}
ViewpointCenter {
id: viewpoint
// Specify the center Point
center: Point {
x: -122.8309
y: 45.2281
spatialReference: SpatialReference { wkid: 4326 }
}
// Specify the scale
targetScale: 800000
}
Controls.Button {
text: "Directions"
anchors {
bottom: parent.bottom
horizontalCenter: parent.horizontalCenter
margins: 40
}
enabled: featureCollection ? featureCollection.loadStatus === Enums.LoadStatusLoaded : false
onClicked: {
popup.open();
}
}
Controls.Popup {
id: popup
anchors.centerIn: Controls.Overlay.overlay
width: 300
height: 320
focus: true
contentItem: Controls.ScrollView {
contentWidth: parent.width - 30
Text {
width: parent.width
text: directions
wrapMode: Text.WordWrap
}
clip: true
}
opacity: .9
}
function queryFeatures(table){
return new Promise(
(resolve, reject) => {
let taskId;
let parameters = ArcGISRuntimeEnvironment.createObject("QueryParameters");
parameters.whereClause = "1=1";
const featureStatusChanged = () => {
switch (table.queryFeaturesStatus) {
case Enums.TaskStatusCompleted:
table.queryFeaturesStatusChanged.disconnect(featureStatusChanged);
const result = table.queryFeaturesResults[taskId];
if (result) {
resolve(result);
var features = Array.from(result.iterator.features);
// Clear the directions list before repopulating it
directions = "";
features.forEach((feature) => {
directions = directions + "\n - " + feature.attributes.attributeValue("DisplayText");
});
}
else {
reject({message: "The query finished but there was no result for this taskId", taskId: taskId});
}
break;
case Enums.TaskStatusErrored:
table.queryFeaturesStatusChanged.disconnect(featureStatusChanged);
if (table.error) {
reject(table.error);
} else {
reject({message: table.tableName + ": query task errored++++"});
}
break;
default:
break;
}
}
table.queryFeaturesStatusChanged.connect(featureStatusChanged);
taskId = table.queryFeatures(parameters);
});
}
}