Learn how to evaluate the horizontal, vertical, and direct distances between two points in a 3D Scene.

measure a distance in 3d

A distance measurement analysis is a type of measurement analysis that calculates and displays the distance between start point and end point locations. The analysis evaluates the vertical, horizontal, and direct distances between the two 3D points and renders a measurement visualization on-screen.

In this tutorial you will perform and display a distance measurement analysis in a web scene A web scene is a scene stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web scene specification. Learn more . Using the distance measurement analysis you will measure distances between hotspots in the Yosemite Valley.

Prerequisites

Before starting this tutorial:

  1. You need an ArcGIS Location Platform or ArcGIS Online account.

  2. Your system meets the system requirements.

Develop or Download

You have two options for completing this tutorial:

  1. Option 1: Develop the code or
  2. Option 2: Download the completed solution

Option 1: Develop the code

To start the tutorial, complete the Display a web scene tutorial. This creates a scene to display the trails, trailheads, and parks in the Santa Monica Mountains.

Continue with the following instructions to evaluate the horizontal, vertical, and direct distances between two points in a 3D Scene.

Get the web scene item ID

You can use ArcGIS tools Tools, also known as developer tools, are ArcGIS software applications such as portal and ArcGIS Pro that developers can use to prepare content and data for custom applications they are building. Learn more to create and view web scenes A web scene is a scene stored as a JSON object that defines properties such as the basemap layer, data layers, layer styles, and pop-up styles. Its JSON structure is defined by the web scene specification. Learn more . Use the Scene Viewer Scene Viewer(™) is a browser-based mapping tool that can view, create, and save web scenes. Learn more to identify the web scene item ID An item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file. Learn more . This item ID will be used later in the tutorial.

  1. Go to the Yosemite Valley Hotspots web scene in the Scene Viewer in ArcGIS Online ArcGIS Online is a GIS mapping, analytics, data hosting, and content management software as a service (SaaS) product. It includes applications, tools, APIs, and location services for users and developers. It is subscription-based and requires an ArcGIS Online account. Learn more . This web scene displays terrain and hotspots in the Yosemite Valley.
  2. Make a note of the item ID An item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file. Learn more at the end of the browser’s URL. The item ID should be 7558ee942b2547019f66885c44d4f0b1.

Update the scene

  1. In Xcode, in the Project Navigator, click ContentView.swift.

  2. In the editor, modify the scene variable to create a Scene for the web scene. To do this, create a portal item providing the web scene’s item ID An item ID is a unique identifier representing a single item stored, managed, and accessed in a portal, such as a web map, hosted layer, or file. Learn more and a Portal referencing ArcGIS Online.

    ContentView.swift
    // The Yosemite Valley hotspots scene.
    @State private var scene: ArcGIS.Scene = {
    let portalItem = PortalItem(
    portal: .arcGISOnline(connection: .anonymous),
    id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
    )
    return Scene(item: portalItem)
    }()

Create a distance measurement analysis

Use a LocationDistanceMeasurement to perform and display a distance measurement analysis using 3D points to define the start and end locations.

  1. Create a private class named Model of type ObservableObject and an accompanying State Object reference in the ContentView struct. See the programming patterns page for more information on how to manage states.

    ContentView.swift
    17 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    }
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    1 collapsed line
    }
  2. Create an AnalysisOverlay named analysisOverlay to contain and display the distance measurement analyses.

    ContentView.swift
    17 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()
    }
    7 collapsed lines
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    }
  3. Create a LocationDistanceMeasurement named measurement. Upon launch, the distance measurement visualization should not be visible.

    ContentView.swift
    17 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()
    let measurement: LocationDistanceMeasurement = {
    let point = Point(x: -119.5968, y: 37.7567, z: 58.5011, spatialReference: .wgs84)
    let measurement = LocationDistanceMeasurement(startLocation: point, endLocation: point)
    measurement.isVisible = false
    measurement.unitSystem = .metric
    return measurement
    }()
    }
    7 collapsed lines
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    }
  4. In init(), add the distance measurement to the analysis overlay.

    ContentView.swift
    17 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()
    let measurement: LocationDistanceMeasurement = {
    let point = Point(x: -119.5968, y: 37.7567, z: 58.5011, spatialReference: .wgs84)
    let measurement = LocationDistanceMeasurement(startLocation: point, endLocation: point)
    measurement.isVisible = false
    measurement.unitSystem = .metric
    return measurement
    }()
    init() {
    analysisOverlay.addAnalysis(measurement)
    }
    func moveDistanceMeasurement(point: Point) {
    if measurement.startLocation == measurement.endLocation {
    measurement.startLocation = point
    } else {
    measurement.endLocation = point
    }
    measurement.isVisible = true
    }
    func clearMeasurement() {
    measurement.isVisible = false
    let point = Point(x: 0, y: 0, z: 0, m: 0, spatialReference: .wgs84)
    measurement.startLocation = point
    measurement.endLocation = point
    }
    }
    7 collapsed lines
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    }
  5. Define a method named moveDistanceMeasurement(point:) that receives a point A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more as a parameter. This method is used to set the distance measurement analysis and make it visible, if it’s not visible already.

    ContentView.swift
    34 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()
    let measurement: LocationDistanceMeasurement = {
    let point = Point(x: -119.5968, y: 37.7567, z: 58.5011, spatialReference: .wgs84)
    let measurement = LocationDistanceMeasurement(startLocation: point, endLocation: point)
    measurement.isVisible = false
    measurement.unitSystem = .metric
    return measurement
    }()
    init() {
    analysisOverlay.addAnalysis(measurement)
    }
    func moveDistanceMeasurement(point: Point) {
    if measurement.startLocation == measurement.endLocation {
    measurement.startLocation = point
    } else {
    measurement.endLocation = point
    }
    measurement.isVisible = true
    }
    8 collapsed lines
    }
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    }
  6. Define a private method named clearMeasurement(). This method is used to hide and clear the distance measurement analysis. Set the measurement’s visibility to false and reset the start and end locations to allow new measurements.

    ContentView.swift
    34 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()
    let measurement: LocationDistanceMeasurement = {
    let point = Point(x: -119.5968, y: 37.7567, z: 58.5011, spatialReference: .wgs84)
    let measurement = LocationDistanceMeasurement(startLocation: point, endLocation: point)
    measurement.isVisible = false
    measurement.unitSystem = .metric
    return measurement
    }()
    init() {
    analysisOverlay.addAnalysis(measurement)
    }
    func moveDistanceMeasurement(point: Point) {
    if measurement.startLocation == measurement.endLocation {
    measurement.startLocation = point
    } else {
    measurement.endLocation = point
    }
    measurement.isVisible = true
    }
    func clearMeasurement() {
    measurement.isVisible = false
    let point = Point(x: 0, y: 0, z: 0, m: 0, spatialReference: .wgs84)
    measurement.startLocation = point
    measurement.endLocation = point
    }
    9 collapsed lines
    }
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    }

Display the distance measurement analysis with touch events

Touch events determine where to perform and display the distance measurement analysis. A user can tap to add start and end points or long-press and drag to move the distance measurement analysis’ location around the screen.

  1. The first step to displaying the analyses is to add the analysis to the scene view. Modify the scene view to add the analysis overlay.

    ContentView.swift
    52 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()
    let measurement: LocationDistanceMeasurement = {
    let point = Point(x: -119.5968, y: 37.7567, z: 58.5011, spatialReference: .wgs84)
    let measurement = LocationDistanceMeasurement(startLocation: point, endLocation: point)
    measurement.isVisible = false
    measurement.unitSystem = .metric
    return measurement
    }()
    init() {
    analysisOverlay.addAnalysis(measurement)
    }
    func moveDistanceMeasurement(point: Point) {
    if measurement.startLocation == measurement.endLocation {
    measurement.startLocation = point
    } else {
    measurement.endLocation = point
    }
    measurement.isVisible = true
    }
    func clearMeasurement() {
    measurement.isVisible = false
    let point = Point(x: 0, y: 0, z: 0, m: 0, spatialReference: .wgs84)
    measurement.startLocation = point
    measurement.endLocation = point
    }
    }
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    // The Yosemite Valley hotspots scene.
    @State private var scene: ArcGIS.Scene = {
    let portalItem = PortalItem(
    portal: .arcGISOnline(connection: .anonymous),
    id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
    )
    return Scene(item: portalItem)
    }()
    var body: some View {
    VStack {
    SceneView(scene: scene, analysisOverlays: [model.analysisOverlay])
    }
    }
    }
  2. When a user performs a single touch or a long-press touch event, call moveDistanceMeasurement(point:).

    ContentView.swift
    68 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()
    let measurement: LocationDistanceMeasurement = {
    let point = Point(x: -119.5968, y: 37.7567, z: 58.5011, spatialReference: .wgs84)
    let measurement = LocationDistanceMeasurement(startLocation: point, endLocation: point)
    measurement.isVisible = false
    measurement.unitSystem = .metric
    return measurement
    }()
    init() {
    analysisOverlay.addAnalysis(measurement)
    }
    func moveDistanceMeasurement(point: Point) {
    if measurement.startLocation == measurement.endLocation {
    measurement.startLocation = point
    } else {
    measurement.endLocation = point
    }
    measurement.isVisible = true
    }
    func clearMeasurement() {
    measurement.isVisible = false
    let point = Point(x: 0, y: 0, z: 0, m: 0, spatialReference: .wgs84)
    measurement.startLocation = point
    measurement.endLocation = point
    }
    }
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    // The Yosemite Valley hotspots scene.
    @State private var scene: ArcGIS.Scene = {
    let portalItem = PortalItem(
    portal: .arcGISOnline(connection: .anonymous),
    id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
    )
    return Scene(item: portalItem)
    }()
    var body: some View {
    VStack {
    SceneView(scene: scene, analysisOverlays: [model.analysisOverlay])
    .onSingleTapGesture { _, scenePoint in
    guard let scenePoint else { return }
    model.moveDistanceMeasurement(point: scenePoint)
    }
    .onLongPressGesture { _, scenePoint in
    guard let scenePoint else { return }
    model.moveDistanceMeasurement(point: scenePoint)
    }
    }
    }
    9 collapsed lines
    }
    private extension FormatStyle where Self == Measurement<UnitLength>.FormatStyle {
    /// The format style for the distances.
    static var distance: Self {
    .measurement(width: .abbreviated, usage: .asProvided, numberFormatStyle: .number.precision(.fractionLength(2)))
    }
    }

Add a UI to control the distance measurement analysis

To control the distance measurement analysis, some UI is required.

  1. Add a toolbar and create a “Clear” button. The button hides and clears the distance measurement analysis from the scene. When the button is selected, call the ClearMeasurement method.

    ContentView.swift
    68 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()
    let measurement: LocationDistanceMeasurement = {
    let point = Point(x: -119.5968, y: 37.7567, z: 58.5011, spatialReference: .wgs84)
    let measurement = LocationDistanceMeasurement(startLocation: point, endLocation: point)
    measurement.isVisible = false
    measurement.unitSystem = .metric
    return measurement
    }()
    init() {
    analysisOverlay.addAnalysis(measurement)
    }
    func moveDistanceMeasurement(point: Point) {
    if measurement.startLocation == measurement.endLocation {
    measurement.startLocation = point
    } else {
    measurement.endLocation = point
    }
    measurement.isVisible = true
    }
    func clearMeasurement() {
    measurement.isVisible = false
    let point = Point(x: 0, y: 0, z: 0, m: 0, spatialReference: .wgs84)
    measurement.startLocation = point
    measurement.endLocation = point
    }
    }
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    // The Yosemite Valley hotspots scene.
    @State private var scene: ArcGIS.Scene = {
    let portalItem = PortalItem(
    portal: .arcGISOnline(connection: .anonymous),
    id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
    )
    return Scene(item: portalItem)
    }()
    var body: some View {
    VStack {
    SceneView(scene: scene, analysisOverlays: [model.analysisOverlay])
    .onSingleTapGesture { _, scenePoint in
    guard let scenePoint else { return }
    model.moveDistanceMeasurement(point: scenePoint)
    }
    .onLongPressGesture { _, scenePoint in
    guard let scenePoint else { return }
    model.moveDistanceMeasurement(point: scenePoint)
    }
    .toolbar {
    ToolbarItemGroup(placement: .bottomBar) {
    Button("Clear") {
    // Resets the distance measurement.
    model.clearMeasurement()
    }
    }
    }
    }
    }
    2 collapsed lines
    }

Format measurements for readability

Display the distance measurement results in a reader-friendly format.

  1. In the ContentView, add three @State variables to contain the text measurements.

    ContentView.swift
    57 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()
    let measurement: LocationDistanceMeasurement = {
    let point = Point(x: -119.5968, y: 37.7567, z: 58.5011, spatialReference: .wgs84)
    let measurement = LocationDistanceMeasurement(startLocation: point, endLocation: point)
    measurement.isVisible = false
    measurement.unitSystem = .metric
    return measurement
    }()
    init() {
    analysisOverlay.addAnalysis(measurement)
    }
    func moveDistanceMeasurement(point: Point) {
    if measurement.startLocation == measurement.endLocation {
    measurement.startLocation = point
    } else {
    measurement.endLocation = point
    }
    measurement.isVisible = true
    }
    func clearMeasurement() {
    measurement.isVisible = false
    let point = Point(x: 0, y: 0, z: 0, m: 0, spatialReference: .wgs84)
    measurement.startLocation = point
    measurement.endLocation = point
    }
    }
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    // The Yosemite Valley hotspots scene.
    @State private var scene: ArcGIS.Scene = {
    let portalItem = PortalItem(
    portal: .arcGISOnline(connection: .anonymous),
    id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
    )
    return Scene(item: portalItem)
    }()
    @State private var directDistanceText = "--"
    @State private var horizontalDistanceText = "--"
    @State private var verticalDistanceText = "--"
    var body: some View {
    VStack {
    SceneView(scene: scene, analysisOverlays: [model.analysisOverlay])
    23 collapsed lines
    .onSingleTapGesture { _, scenePoint in
    guard let scenePoint else { return }
    model.moveDistanceMeasurement(point: scenePoint)
    }
    .onLongPressGesture { _, scenePoint in
    guard let scenePoint else { return }
    model.moveDistanceMeasurement(point: scenePoint)
    }
    .toolbar {
    ToolbarItemGroup(placement: .bottomBar) {
    Button("Clear") {
    // Resets the distance measurement.
    model.clearMeasurement()
    }
    }
    }
    }
    }
    }
  2. Create a private extension outside of the ContentView struct named FormatStyle. Create a variable named distance and set the format style to abbreviated, used as provided, and 2 decimal places.

    ContentView.swift
    100 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()
    let measurement: LocationDistanceMeasurement = {
    let point = Point(x: -119.5968, y: 37.7567, z: 58.5011, spatialReference: .wgs84)
    let measurement = LocationDistanceMeasurement(startLocation: point, endLocation: point)
    measurement.isVisible = false
    measurement.unitSystem = .metric
    return measurement
    }()
    init() {
    analysisOverlay.addAnalysis(measurement)
    }
    func moveDistanceMeasurement(point: Point) {
    if measurement.startLocation == measurement.endLocation {
    measurement.startLocation = point
    } else {
    measurement.endLocation = point
    }
    measurement.isVisible = true
    }
    func clearMeasurement() {
    measurement.isVisible = false
    let point = Point(x: 0, y: 0, z: 0, m: 0, spatialReference: .wgs84)
    measurement.startLocation = point
    measurement.endLocation = point
    }
    }
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    // The Yosemite Valley hotspots scene.
    @State private var scene: ArcGIS.Scene = {
    let portalItem = PortalItem(
    portal: .arcGISOnline(connection: .anonymous),
    id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
    )
    return Scene(item: portalItem)
    }()
    @State private var directDistanceText = "--"
    @State private var horizontalDistanceText = "--"
    @State private var verticalDistanceText = "--"
    var body: some View {
    VStack {
    SceneView(scene: scene, analysisOverlays: [model.analysisOverlay])
    .onSingleTapGesture { _, scenePoint in
    guard let scenePoint else { return }
    model.moveDistanceMeasurement(point: scenePoint)
    }
    .onLongPressGesture { _, scenePoint in
    guard let scenePoint else { return }
    model.moveDistanceMeasurement(point: scenePoint)
    }
    .toolbar {
    ToolbarItemGroup(placement: .bottomBar) {
    Button("Clear") {
    // Resets the distance measurement.
    model.clearMeasurement()
    }
    }
    }
    }
    }
    }
    private extension FormatStyle where Self == Measurement<UnitLength>.FormatStyle {
    /// The format style for the distances.
    static var distance: Self {
    .measurement(width: .abbreviated, usage: .asProvided, numberFormatStyle: .number.precision(.fractionLength(2)))
    }
    }
  3. Add a task function to the SceneView that produces formatted measurements as the values change.

    ContentView.swift
    75 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()
    let measurement: LocationDistanceMeasurement = {
    let point = Point(x: -119.5968, y: 37.7567, z: 58.5011, spatialReference: .wgs84)
    let measurement = LocationDistanceMeasurement(startLocation: point, endLocation: point)
    measurement.isVisible = false
    measurement.unitSystem = .metric
    return measurement
    }()
    init() {
    analysisOverlay.addAnalysis(measurement)
    }
    func moveDistanceMeasurement(point: Point) {
    if measurement.startLocation == measurement.endLocation {
    measurement.startLocation = point
    } else {
    measurement.endLocation = point
    }
    measurement.isVisible = true
    }
    func clearMeasurement() {
    measurement.isVisible = false
    let point = Point(x: 0, y: 0, z: 0, m: 0, spatialReference: .wgs84)
    measurement.startLocation = point
    measurement.endLocation = point
    }
    }
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    // The Yosemite Valley hotspots scene.
    @State private var scene: ArcGIS.Scene = {
    let portalItem = PortalItem(
    portal: .arcGISOnline(connection: .anonymous),
    id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
    )
    return Scene(item: portalItem)
    }()
    @State private var directDistanceText = "--"
    @State private var horizontalDistanceText = "--"
    @State private var verticalDistanceText = "--"
    var body: some View {
    VStack {
    SceneView(scene: scene, analysisOverlays: [model.analysisOverlay])
    .onSingleTapGesture { _, scenePoint in
    guard let scenePoint else { return }
    model.moveDistanceMeasurement(point: scenePoint)
    }
    .onLongPressGesture { _, scenePoint in
    guard let scenePoint else { return }
    model.moveDistanceMeasurement(point: scenePoint)
    }
    .task {
    for await measurements in model.measurement.measurements {
    directDistanceText = measurements.directDistance.formatted(.distance)
    horizontalDistanceText = measurements.horizontalDistance.formatted(.distance)
    verticalDistanceText = measurements.verticalDistance.formatted(.distance)
    }
    }
    21 collapsed lines
    .toolbar {
    ToolbarItemGroup(placement: .bottomBar) {
    Button("Clear") {
    // Resets the distance measurement.
    model.clearMeasurement()
    }
    }
    }
    }
    }
    }
    private extension FormatStyle where Self == Measurement<UnitLength>.FormatStyle {
    /// The format style for the distances.
    static var distance: Self {
    .measurement(width: .abbreviated, usage: .asProvided, numberFormatStyle: .number.precision(.fractionLength(2)))
    }
    }
  4. Add text above the toolbar to display the measurements.

    ContentView.swift
    94 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    private class Model: ObservableObject {
    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()
    let measurement: LocationDistanceMeasurement = {
    let point = Point(x: -119.5968, y: 37.7567, z: 58.5011, spatialReference: .wgs84)
    let measurement = LocationDistanceMeasurement(startLocation: point, endLocation: point)
    measurement.isVisible = false
    measurement.unitSystem = .metric
    return measurement
    }()
    init() {
    analysisOverlay.addAnalysis(measurement)
    }
    func moveDistanceMeasurement(point: Point) {
    if measurement.startLocation == measurement.endLocation {
    measurement.startLocation = point
    } else {
    measurement.endLocation = point
    }
    measurement.isVisible = true
    }
    func clearMeasurement() {
    measurement.isVisible = false
    let point = Point(x: 0, y: 0, z: 0, m: 0, spatialReference: .wgs84)
    measurement.startLocation = point
    measurement.endLocation = point
    }
    }
    struct ContentView: View {
    // An ObservableObject containing the scene, and analysis overlay.
    @StateObject private var model = Model()
    // The Yosemite Valley hotspots scene.
    @State private var scene: ArcGIS.Scene = {
    let portalItem = PortalItem(
    portal: .arcGISOnline(connection: .anonymous),
    id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
    )
    return Scene(item: portalItem)
    }()
    @State private var directDistanceText = "--"
    @State private var horizontalDistanceText = "--"
    @State private var verticalDistanceText = "--"
    var body: some View {
    VStack {
    SceneView(scene: scene, analysisOverlays: [model.analysisOverlay])
    .onSingleTapGesture { _, scenePoint in
    guard let scenePoint else { return }
    model.moveDistanceMeasurement(point: scenePoint)
    }
    .onLongPressGesture { _, scenePoint in
    guard let scenePoint else { return }
    model.moveDistanceMeasurement(point: scenePoint)
    }
    .task {
    for await measurements in model.measurement.measurements {
    directDistanceText = measurements.directDistance.formatted(.distance)
    horizontalDistanceText = measurements.horizontalDistance.formatted(.distance)
    verticalDistanceText = measurements.verticalDistance.formatted(.distance)
    }
    }
    Text("Direct: \(directDistanceText)")
    Text("Horizontal: \(horizontalDistanceText)")
    Text("Vertical: \(verticalDistanceText)")
    Spacer()
    .toolbar {
    ToolbarItemGroup(placement: .bottomBar) {
    Button("Clear") {
    // Resets the distance measurement.
    model.clearMeasurement()
    }
    }
    }
    12 collapsed lines
    }
    }
    }
    private extension FormatStyle where Self == Measurement<UnitLength>.FormatStyle {
    /// The format style for the distances.
    static var distance: Self {
    .measurement(width: .abbreviated, usage: .asProvided, numberFormatStyle: .number.precision(.fractionLength(2)))
    }
    }
  5. In the Project Navigator, click MainApp.swift. Change the ignoresSafeArea(_:edges:) method to specify the top edge. This will make the text visible.

    MainApp.swift
    var body: some SwiftUI.Scene {
    WindowGroup {
    ContentView()
    .ignoresSafeArea(edges: .top)
    }
    }

Run the app

Press Command + R to run the app.

You should see a scene of hotspots in the Yosemite Valley. Tap to set start and end locations. Long-press and drag to display and move a distance measurement analysis to evaluate the horizontal, vertical, and direct distances between two park locations.

Alternatively, you can download the tutorial solution, as follows.

Option 2: Download the solution

  1. Click the Download solution link under Solution and unzip the file to a location on your machine.

  2. Open the .xcodeproj file in Xcode.

Since the downloaded solution does not contain authentication credentials, you must first set up authentication to create credentials, and then add the developer credentials to the solution.

Set up authentication

To access the secure ArcGIS location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more used in this tutorial, you must implement API key authentication API key authentication is a type of authentication that uses an API key to authenticate requests to ArcGIS services and secure portal items. Learn more or user authentication User authentication is a type of authentication that allows users with an ArcGIS account to sign into an application and allow it to access ArcGIS content, services, and resources on their behalf. The typical authorization protocol used is OAuth2.0. Learn more using an ArcGIS Location Platform An ArcGIS Location Platform account, formerly known as an ArcGIS Developer account, is an identity associated with an ArcGIS Location Platform subscription. Learn more or an ArcGIS Online An ArcGIS Online account, also known as an ArcGIS Organization account, is an identity associated with an ArcGIS Online subscription. It can be used to access ArcGIS tools and develop applications with ArcGIS location services for an organization. Learn more account.

To complete this tutorial, click on the tab in the switcher below for your authentication type of choice, either API key authentication or User authentication.

Create a new API key access token An access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication. Learn more with privileges Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more to access the secure resources used in this tutorial.

  1. Complete the Create an API key tutorial and create an API key with the following privilege(s) Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more :

    • Privileges
      • Location services > Basemaps
  2. Copy and paste the API key access token into a safe location. It will be used in a later step.

Set developer credentials in the solution

To allow your app users to access ArcGIS location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more , use the developer credentials that you created in the Set up authentication step to authenticate requests for resources.

Pass your API Key access token to the ArcGISEnvironment.

  1. In the Project Navigator, click MainApp.swift.

  2. Set the AuthenticationMode to .apiKey.

    MainApp.swift
    // Change the `AuthenticationMode` to `.apiKey` if your application uses API key authentication.
    private var authenticationMode: AuthenticationMode { .apiKey }
  3. Set the apiKey property with your API key access token.

    MainApp.swift
    31 collapsed lines
    // 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 SwiftUI
    import ArcGIS
    import ArcGISToolkit
    @main
    struct MainApp: App {
    // The authentication mode.
    private enum AuthenticationMode {
    case apiKey
    case user
    }
    // Change the `AuthenticationMode` to `.apiKey` if your application uses API key authentication.
    private var authenticationMode: AuthenticationMode { .apiKey }
    // Please enter an API key access token if your application uses API key authentication.
    private let apiKey = APIKey("<#YOUR-ACCESS-TOKEN#>")
    43 collapsed lines
    // Setup an `Authenticator` with OAuth configuration if your application uses OAuth credentials.
    @ObservedObject var authenticator = Authenticator(
    oAuthUserConfigurations: [
    OAuthUserConfiguration(
    // Please enter OAuth credentials for user authentication.
    portalURL: URL(string: "<#YOUR-PORTAL-URL#>")!,
    clientID: "<#YOUR-CLIENT-ID#>",
    redirectURL: URL(string: "<#YOUR-REDIRECT-URL#>")!
    )
    ]
    )
    func setAuthentication() {
    switch authenticationMode {
    case .apiKey:
    ArcGISEnvironment.apiKey = apiKey
    case .user:
    ArcGISEnvironment.authenticationManager.arcGISAuthenticationChallengeHandler = authenticator
    }
    }
    init() {
    setAuthentication()
    }
    var body: some SwiftUI.Scene {
    WindowGroup {
    ContentView()
    .authenticator(authenticator)
    .ignoresSafeArea()
    }
    }
    }

Best Practice: The access token is stored directly in the code as a convenience for this tutorial. Do not store credentials directly in source code in a production environment.

Run the solution

Press Command + R to run the app.

You should see a scene of hotspots in the Yosemite Valley. Tap to set start and end locations. Long-press and drag to display and move a distance measurement analysis to evaluate the horizontal, vertical, and direct distances between two park locations.

What’s next?

Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials: