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
ArcGISFeature
s. - Get all of the
ArcGISFeature
s usingFeatureTable.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'soperationalLayers
.
Relevant API
- FeatureCollection
- FeatureCollectionLayer
- FeatureCollectionTableListModel
- FeatureQueryResult
- Portal
- PortalItem
Tags
directions, feature collection, feature collection layer, portal, portal item, route layer, routing
Sample Code
DisplayRouteLayer.qml
// [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);
});
}
}