Find a route and directions

Before starting this tutorial:

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

• Ensure your development environment meets the system requirements.

Optionally, you may want to install the ArcGIS Maps SDK for .NET to get access to project templates in Visual Studio (Windows only) and offline copies of the NuGet packages.

Option 1: Develop the code

To start the tutorial, complete the Display a map tutorial. This creates a map to display the Santa Monica Mountains in California using the topographic basemap from the ArcGIS Basemap Styles service The ArcGIS Basemap Styles service, also referred to as the Basemap Styles service, is a location service that provides basemap styles and data for the world. It returns styles as Mapbox styles and web maps, and data as vector tiles and/or map tiles. It supports all of the styles in the ArcGIS Basemap style and Open Basemap style family. An ArcGIS Location Platform or ArcGIS Online account is required to use the service. Learn more .

Open a Visual Studio solution

1. Open the Visual Studio solution you created by completing the Display a map tutorial.
2. Continue with the following instructions to find a route and directions with the ArcGIS Routing service A routing service is a service that uses network analysis and streets data to calculate the most effective path and turn-by-turn directions on a street network, optimize fleet routing and deliveries, find the closest facilities, calculate service areas, and more. It is hosted by Esri as the ArcGIS Routing service and can also be hosted in ArcGIS Enterprise. Learn more .

Update the tutorial name used in the project (optional)

The Visual Studio solution, project, and the namespace for all classes currently use the name DisplayAMap. Follow the steps below if you prefer the name to reflect the current tutorial. These steps are not required, your code will still work if you keep the original name.

Set developer credentials

If you implemented 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 in the Display a map tutorial, the API key access token will only have the Basemaps privilege. The Find a route and directions tutorial requires the Routing privilege to find a route using the RouteTask. To create an API Key access token that has the Basemaps and Routing privileges, see the Set up authentication step and then follow the instructions below.

Update the basemap and initial extent

For displaying routes and driving directions, a streets basemap usually works best. You will update the Map to use the ArcGISStreets basemap and center the display on Los Angeles, California.

1. In the Visual Studio > Solution Explorer, double-click MapViewModel.cs to open the file.

2. In the SetupMap() function, update the Map to use the BasemapStyle.ArcGISStreets basemap.

   MapViewModel.cs

           private void SetupMap()
           {
   
               var map = new Map(BasemapStyle.ArcGISStreets);

3. Update the Viewpoint that the MapView shows when the map initializes. This viewpoint will show an area around Los Angeles, California.

   MapViewModel.cs

           private void SetupMap()
           {
   
               var map = new Map(BasemapStyle.ArcGISStreets);
   
               // Set the initial viewpoint around the Santa Monica Mountains in California.
   
               var mapCenterPoint = new MapPoint(-118.24532, 34.05398, SpatialReferences.Wgs84);
   
               map.InitialViewpoint = new Viewpoint(mapCenterPoint, 100000);

4. Click Debug > Start Debugging (or press <F5> on the keyboard) to run the app. If your app uses user authentication, enter your ArcGIS Online credentials when prompted.

You should see a streets map centered on an area of Los Angeles.

Define member variables

You will need member variables in the MapViewModel class to store the status of user-defined route stops A stop is a single point along a route: it can be the origin, an intermediate stop, or destination. Learn more and several Graphic objects for displaying route results.

1. Add additional required using statements to the top of the MapViewModel class.

   More info

   Classes in the Esri.ArcGISRuntime.Tasks.NetworkAnalysis namespace provide network analysis functionality, such as solving routes, finding closest facilities, or defining service areas on a street network. Esri.ArcGISRuntime.UI contains the Graphic and GraphicsOverlay classes. Esri.ArcGISRuntime.Symbology contains the classes that define the symbols and renderers used to display features and graphics.

   MapViewModel.cs

   using System;
   using System.Collections.Generic;
   using System.ComponentModel;
   using System.Runtime.CompilerServices;
   using System.Text;
   using Esri.ArcGISRuntime.Geometry;
   using Esri.ArcGISRuntime.Mapping;
   
   using System.Linq;
   using System.Threading.Tasks;
   using Esri.ArcGISRuntime.Symbology;
   using Esri.ArcGISRuntime.Tasks.NetworkAnalysis;
   using Esri.ArcGISRuntime.UI;

2. Create the enum with values that represent the three possible contexts for clicks on the map. Add a private variable to track the current click state.

   More info

   The user will click the map to define the origin An origin is a point that defines the start of a route. Learn more and destination A destination is a point that defines the final stop in a route. Learn more locations for the route A route is a polyline that defines the best path between two or more points in a street network. Learn more . If neither stop A stop is a single point along a route: it can be the origin, an intermediate stop, or destination. Learn more has been defined, a map click will be used for the origin (“from”) location. If an origin is defined, the click will be used to define the destination (“to”) location. If both are defined, you may choose to start over and use the click to define a new origin location. This enum has values that represent the context of these clicks so the code can respond appropriately.

   MapViewModel.cs

   27 collapsed lines
   // Copyright 2021 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.
   
   using System;
   using System.Collections.Generic;
   using System.ComponentModel;
   using System.Runtime.CompilerServices;
   using System.Text;
   using Esri.ArcGISRuntime.Geometry;
   using Esri.ArcGISRuntime.Mapping;
   
   using System.Linq;
   using System.Threading.Tasks;
   using Esri.ArcGISRuntime.Symbology;
   using Esri.ArcGISRuntime.Tasks.NetworkAnalysis;
   using Esri.ArcGISRuntime.UI;
   
   namespace FindARouteAndDirections
   {
       class MapViewModel : INotifyPropertyChanged
       {
   
           enum RouteBuilderStatus
           {
               NotStarted, // No locations have been defined.
               SelectedStart, // Origin point exists.
               SelectedStartAndEnd // Origin and destination exist.
           }
           private RouteBuilderStatus _currentState = RouteBuilderStatus.NotStarted;
   40 collapsed lines
   
           public MapViewModel()
           {
               SetupMap();
           }
   
           public event PropertyChangedEventHandler? PropertyChanged;
           protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
           {
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
           }
   
           private Map? _map;
           public Map? Map
           {
               get { return _map; }
               set
               {
                   _map = value;
                   OnPropertyChanged();
               }
           }
   
           private void SetupMap()
           {
   
               var map = new Map(BasemapStyle.ArcGISStreets);
   
               // Set the initial viewpoint around the Santa Monica Mountains in California.
   
               var mapCenterPoint = new MapPoint(-118.24532, 34.05398, SpatialReferences.Wgs84);
   
               map.InitialViewpoint = new Viewpoint(mapCenterPoint, 100000);
   
               // Set the view model's Map property with the map.
               Map = map;
           }
   
       }
   }

3. Create additional member variables for the route result graphics. These graphics will show the stops A stop is a single point along a route: it can be the origin, an intermediate stop, or destination. Learn more (origin and destination locations) and the route result polyline A polyline is a type of geometry containing ordered point coordinates and a spatial reference. Learn more that connects them.

   MapViewModel.cs

   32 collapsed lines
   // Copyright 2021 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.
   
   using System;
   using System.Collections.Generic;
   using System.ComponentModel;
   using System.Runtime.CompilerServices;
   using System.Text;
   using Esri.ArcGISRuntime.Geometry;
   using Esri.ArcGISRuntime.Mapping;
   
   using System.Linq;
   using System.Threading.Tasks;
   using Esri.ArcGISRuntime.Symbology;
   using Esri.ArcGISRuntime.Tasks.NetworkAnalysis;
   using Esri.ArcGISRuntime.UI;
   
   namespace FindARouteAndDirections
   {
       class MapViewModel : INotifyPropertyChanged
       {
   
           enum RouteBuilderStatus
           {
               NotStarted, // No locations have been defined.
               SelectedStart, // Origin point exists.
               SelectedStartAndEnd // Origin and destination exist.
           }
           private RouteBuilderStatus _currentState = RouteBuilderStatus.NotStarted;
   
           private Graphic _startGraphic = new();
           private Graphic _endGraphic = new();
           private Graphic _routeGraphic = new();
   40 collapsed lines
   
           public MapViewModel()
           {
               SetupMap();
           }
   
           public event PropertyChangedEventHandler? PropertyChanged;
           protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
           {
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
           }
   
           private Map? _map;
           public Map? Map
           {
               get { return _map; }
               set
               {
                   _map = value;
                   OnPropertyChanged();
               }
           }
   
           private void SetupMap()
           {
   
               var map = new Map(BasemapStyle.ArcGISStreets);
   
               // Set the initial viewpoint around the Santa Monica Mountains in California.
   
               var mapCenterPoint = new MapPoint(-118.24532, 34.05398, SpatialReferences.Wgs84);
   
               map.InitialViewpoint = new Viewpoint(mapCenterPoint, 100000);
   
               // Set the view model's Map property with the map.
               Map = map;
           }
   
       }
   }

Add properties for graphics overlays and driving directions

A graphics overlay A graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view. Learn more is a container for graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more that are always displayed on top of all the other layers A layer is a reference to a collection of geographic data that is used to access and display data. The data for layers are typically provided by the basemap layer service and data services. Learn more in the map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more . You will use graphics overlays to display graphics for a Route and its stops A stop is a single point along a route: it can be the origin, an intermediate stop, or destination. Learn more .

A Route provides turn-by-turn directions with its DirectionManeuvers property. You will expose the directions with a property in MapViewModel so they can be bound to a control in the app’s UI.

1. In the view model, create a new property named GraphicsOverlays. This will be a collection of GraphicsOverlay that will store point A point is a type of geometry containing a single set of x,y coordinates and a spatial reference. Learn more , line A polyline is a type of geometry containing ordered point coordinates and a spatial reference. Learn more , and polygon A polygon is a type of geometry containing an array of rings and a spatial reference. Each ring contains an array of point coordinates, where the first and last point are the same. Learn more graphics.

   MapViewModel.cs

   55 collapsed lines
   // Copyright 2021 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.
   
   using System;
   using System.Collections.Generic;
   using System.ComponentModel;
   using System.Runtime.CompilerServices;
   using System.Text;
   using Esri.ArcGISRuntime.Geometry;
   using Esri.ArcGISRuntime.Mapping;
   
   using System.Linq;
   using System.Threading.Tasks;
   using Esri.ArcGISRuntime.Symbology;
   using Esri.ArcGISRuntime.Tasks.NetworkAnalysis;
   using Esri.ArcGISRuntime.UI;
   
   namespace FindARouteAndDirections
   {
       class MapViewModel : INotifyPropertyChanged
       {
   
           enum RouteBuilderStatus
           {
               NotStarted, // No locations have been defined.
               SelectedStart, // Origin point exists.
               SelectedStartAndEnd // Origin and destination exist.
           }
           private RouteBuilderStatus _currentState = RouteBuilderStatus.NotStarted;
   
           private Graphic _startGraphic = new();
           private Graphic _endGraphic = new();
           private Graphic _routeGraphic = new();
   
           public MapViewModel()
           {
               SetupMap();
           }
   
           public event PropertyChangedEventHandler? PropertyChanged;
           protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
           {
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
           }
   
           private Map? _map;
           public Map? Map
           {
               get { return _map; }
               set
               {
                   _map = value;
                   OnPropertyChanged();
               }
           }
   
           private GraphicsOverlayCollection? _graphicsOverlayCollection;
           public GraphicsOverlayCollection? GraphicsOverlays
           {
               get { return _graphicsOverlayCollection; }
               set
               {
                   _graphicsOverlayCollection = value;
                   OnPropertyChanged();
               }
           }
   18 collapsed lines
   
           private void SetupMap()
           {
   
               var map = new Map(BasemapStyle.ArcGISStreets);
   
               // Set the initial viewpoint around the Santa Monica Mountains in California.
   
               var mapCenterPoint = new MapPoint(-118.24532, 34.05398, SpatialReferences.Wgs84);
   
               map.InitialViewpoint = new Viewpoint(mapCenterPoint, 100000);
   
               // Set the view model's Map property with the map.
               Map = map;
           }
   
       }
   }

2. Create a property in MapViewModel that exposes a list of driving directions for a Route.

   MapViewModel.cs

   66 collapsed lines
   // Copyright 2021 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.
   
   using System;
   using System.Collections.Generic;
   using System.ComponentModel;
   using System.Runtime.CompilerServices;
   using System.Text;
   using Esri.ArcGISRuntime.Geometry;
   using Esri.ArcGISRuntime.Mapping;
   
   using System.Linq;
   using System.Threading.Tasks;
   using Esri.ArcGISRuntime.Symbology;
   using Esri.ArcGISRuntime.Tasks.NetworkAnalysis;
   using Esri.ArcGISRuntime.UI;
   
   namespace FindARouteAndDirections
   {
       class MapViewModel : INotifyPropertyChanged
       {
   
           enum RouteBuilderStatus
           {
               NotStarted, // No locations have been defined.
               SelectedStart, // Origin point exists.
               SelectedStartAndEnd // Origin and destination exist.
           }
           private RouteBuilderStatus _currentState = RouteBuilderStatus.NotStarted;
   
           private Graphic _startGraphic = new();
           private Graphic _endGraphic = new();
           private Graphic _routeGraphic = new();
   
           public MapViewModel()
           {
               SetupMap();
           }
   
           public event PropertyChangedEventHandler? PropertyChanged;
           protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
           {
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
           }
   
           private Map? _map;
           public Map? Map
           {
               get { return _map; }
               set
               {
                   _map = value;
                   OnPropertyChanged();
               }
           }
   
           private GraphicsOverlayCollection? _graphicsOverlayCollection;
           public GraphicsOverlayCollection? GraphicsOverlays
           {
               get { return _graphicsOverlayCollection; }
               set
               {
                   _graphicsOverlayCollection = value;
                   OnPropertyChanged();
               }
           }
   
           private List<string>? _directions;
           public List<string>? Directions
           {
               get { return _directions; }
               set
               {
                   _directions = value;
                   OnPropertyChanged();
               }
           }
   18 collapsed lines
   
           private void SetupMap()
           {
   
               var map = new Map(BasemapStyle.ArcGISStreets);
   
               // Set the initial viewpoint around the Santa Monica Mountains in California.
   
               var mapCenterPoint = new MapPoint(-118.24532, 34.05398, SpatialReferences.Wgs84);
   
               map.InitialViewpoint = new Viewpoint(mapCenterPoint, 100000);
   
               // Set the view model's Map property with the map.
               Map = map;
           }
   
       }
   }

Create route graphics

You will define the symbology for each Route result Graphic and add them to a GraphicsOverlay.

1. Create a new GraphicsOverlay to contain graphics for the Route result and stops A stop is a single point along a route: it can be the origin, an intermediate stop, or destination. Learn more . Create a GraphicsOverlayCollection that contains the overlay and use it to set the MapViewModel.GraphicsOverlays property.

   MapViewModel.cs

   88 collapsed lines
   // Copyright 2021 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.
   
   using System;
   using System.Collections.Generic;
   using System.ComponentModel;
   using System.Runtime.CompilerServices;
   using System.Text;
   using Esri.ArcGISRuntime.Geometry;
   using Esri.ArcGISRuntime.Mapping;
   
   using System.Linq;
   using System.Threading.Tasks;
   using Esri.ArcGISRuntime.Symbology;
   using Esri.ArcGISRuntime.Tasks.NetworkAnalysis;
   using Esri.ArcGISRuntime.UI;
   
   namespace FindARouteAndDirections
   {
       class MapViewModel : INotifyPropertyChanged
       {
   
           enum RouteBuilderStatus
           {
               NotStarted, // No locations have been defined.
               SelectedStart, // Origin point exists.
               SelectedStartAndEnd // Origin and destination exist.
           }
           private RouteBuilderStatus _currentState = RouteBuilderStatus.NotStarted;
   
           private Graphic _startGraphic = new();
           private Graphic _endGraphic = new();
           private Graphic _routeGraphic = new();
   
           public MapViewModel()
           {
               SetupMap();
           }
   
           public event PropertyChangedEventHandler? PropertyChanged;
           protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
           {
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
           }
   
           private Map? _map;
           public Map? Map
           {
               get { return _map; }
               set
               {
                   _map = value;
                   OnPropertyChanged();
               }
           }
   
           private GraphicsOverlayCollection? _graphicsOverlayCollection;
           public GraphicsOverlayCollection? GraphicsOverlays
           {
               get { return _graphicsOverlayCollection; }
               set
               {
                   _graphicsOverlayCollection = value;
                   OnPropertyChanged();
               }
           }
   
           private List<string>? _directions;
           public List<string>? Directions
           {
               get { return _directions; }
               set
               {
                   _directions = value;
                   OnPropertyChanged();
               }
           }
   
           private void SetupMap()
           {
   
               var map = new Map(BasemapStyle.ArcGISStreets);
   
               // Set the initial viewpoint around the Santa Monica Mountains in California.
   
               var mapCenterPoint = new MapPoint(-118.24532, 34.05398, SpatialReferences.Wgs84);
   
               map.InitialViewpoint = new Viewpoint(mapCenterPoint, 100000);
   
               GraphicsOverlay routeAndStopsOverlay = new GraphicsOverlay();
               this.GraphicsOverlays = new GraphicsOverlayCollection
               {
                   routeAndStopsOverlay
               };
   7 collapsed lines
   
               // Set the view model's Map property with the map.
               Map = map;
           }
   
       }
   }

2. Create each result Graphic and define its Symbol.

   More info

   The Geometry for each graphic is initially null and will not display until a valid geometry A geometry is a geometric shape, such as a point, polyline, or polygon, that contains one or more coordinates and a spatial reference. Learn more is assigned (for example, when the user clicks to define a stop A stop is a single point along a route: it can be the origin, an intermediate stop, or destination. Learn more location).

   MapViewModel.cs

   99 collapsed lines
   // Copyright 2021 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.
   
   using System;
   using System.Collections.Generic;
   using System.ComponentModel;
   using System.Runtime.CompilerServices;
   using System.Text;
   using Esri.ArcGISRuntime.Geometry;
   using Esri.ArcGISRuntime.Mapping;
   
   using System.Linq;
   using System.Threading.Tasks;
   using Esri.ArcGISRuntime.Symbology;
   using Esri.ArcGISRuntime.Tasks.NetworkAnalysis;
   using Esri.ArcGISRuntime.UI;
   
   namespace FindARouteAndDirections
   {
       class MapViewModel : INotifyPropertyChanged
       {
   
           enum RouteBuilderStatus
           {
               NotStarted, // No locations have been defined.
               SelectedStart, // Origin point exists.
               SelectedStartAndEnd // Origin and destination exist.
           }
           private RouteBuilderStatus _currentState = RouteBuilderStatus.NotStarted;
   
           private Graphic _startGraphic = new();
           private Graphic _endGraphic = new();
           private Graphic _routeGraphic = new();
   
           public MapViewModel()
           {
               SetupMap();
           }
   
           public event PropertyChangedEventHandler? PropertyChanged;
           protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
           {
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
           }
   
           private Map? _map;
           public Map? Map
           {
               get { return _map; }
               set
               {
                   _map = value;
                   OnPropertyChanged();
               }
           }
   
           private GraphicsOverlayCollection? _graphicsOverlayCollection;
           public GraphicsOverlayCollection? GraphicsOverlays
           {
               get { return _graphicsOverlayCollection; }
               set
               {
                   _graphicsOverlayCollection = value;
                   OnPropertyChanged();
               }
           }
   
           private List<string>? _directions;
           public List<string>? Directions
           {
               get { return _directions; }
               set
               {
                   _directions = value;
                   OnPropertyChanged();
               }
           }
   
           private void SetupMap()
           {
   
               var map = new Map(BasemapStyle.ArcGISStreets);
   
               // Set the initial viewpoint around the Santa Monica Mountains in California.
   
               var mapCenterPoint = new MapPoint(-118.24532, 34.05398, SpatialReferences.Wgs84);
   
               map.InitialViewpoint = new Viewpoint(mapCenterPoint, 100000);
   
               GraphicsOverlay routeAndStopsOverlay = new GraphicsOverlay();
               this.GraphicsOverlays = new GraphicsOverlayCollection
               {
                   routeAndStopsOverlay
               };
   
               var startOutlineSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle.Solid, System.Drawing.Color.Blue, 2);
               _startGraphic = new Graphic(null, new SimpleMarkerSymbol
                   {
                       Style = SimpleMarkerSymbolStyle.Diamond,
                       Color = System.Drawing.Color.Orange,
                       Size = 8,
                       Outline = startOutlineSymbol
                   }
               );
   
               var endOutlineSymbol = new SimpleLineSymbol(style: SimpleLineSymbolStyle.Solid, color: System.Drawing.Color.Red, width: 2);
               _endGraphic = new Graphic(null, new SimpleMarkerSymbol
                   {
                       Style = SimpleMarkerSymbolStyle.Square,
                       Color = System.Drawing.Color.Green,
                       Size = 8,
                       Outline = endOutlineSymbol
                   }
               );
   
               _routeGraphic = new Graphic(null, new SimpleLineSymbol(
                   style: SimpleLineSymbolStyle.Solid,
                   color: System.Drawing.Color.Blue,
                   width: 4
               ));
   7 collapsed lines
   
               // Set the view model's Map property with the map.
               Map = map;
           }
   
       }
   }

3. Add the graphics to the GraphicsOverlay.

   MapViewModel.cs

   125 collapsed lines
   // Copyright 2021 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.
   
   using System;
   using System.Collections.Generic;
   using System.ComponentModel;
   using System.Runtime.CompilerServices;
   using System.Text;
   using Esri.ArcGISRuntime.Geometry;
   using Esri.ArcGISRuntime.Mapping;
   
   using System.Linq;
   using System.Threading.Tasks;
   using Esri.ArcGISRuntime.Symbology;
   using Esri.ArcGISRuntime.Tasks.NetworkAnalysis;
   using Esri.ArcGISRuntime.UI;
   
   namespace FindARouteAndDirections
   {
       class MapViewModel : INotifyPropertyChanged
       {
   
           enum RouteBuilderStatus
           {
               NotStarted, // No locations have been defined.
               SelectedStart, // Origin point exists.
               SelectedStartAndEnd // Origin and destination exist.
           }
           private RouteBuilderStatus _currentState = RouteBuilderStatus.NotStarted;
   
           private Graphic _startGraphic = new();
           private Graphic _endGraphic = new();
           private Graphic _routeGraphic = new();
   
           public MapViewModel()
           {
               SetupMap();
           }
   
           public event PropertyChangedEventHandler? PropertyChanged;
           protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
           {
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
           }
   
           private Map? _map;
           public Map? Map
           {
               get { return _map; }
               set
               {
                   _map = value;
                   OnPropertyChanged();
               }
           }
   
           private GraphicsOverlayCollection? _graphicsOverlayCollection;
           public GraphicsOverlayCollection? GraphicsOverlays
           {
               get { return _graphicsOverlayCollection; }
               set
               {
                   _graphicsOverlayCollection = value;
                   OnPropertyChanged();
               }
           }
   
           private List<string>? _directions;
           public List<string>? Directions
           {
               get { return _directions; }
               set
               {
                   _directions = value;
                   OnPropertyChanged();
               }
           }
   
           private void SetupMap()
           {
   
               var map = new Map(BasemapStyle.ArcGISStreets);
   
               // Set the initial viewpoint around the Santa Monica Mountains in California.
   
               var mapCenterPoint = new MapPoint(-118.24532, 34.05398, SpatialReferences.Wgs84);
   
               map.InitialViewpoint = new Viewpoint(mapCenterPoint, 100000);
   
               GraphicsOverlay routeAndStopsOverlay = new GraphicsOverlay();
               this.GraphicsOverlays = new GraphicsOverlayCollection
               {
                   routeAndStopsOverlay
               };
   
               var startOutlineSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle.Solid, System.Drawing.Color.Blue, 2);
               _startGraphic = new Graphic(null, new SimpleMarkerSymbol
                   {
                       Style = SimpleMarkerSymbolStyle.Diamond,
                       Color = System.Drawing.Color.Orange,
                       Size = 8,
                       Outline = startOutlineSymbol
                   }
               );
   
               var endOutlineSymbol = new SimpleLineSymbol(style: SimpleLineSymbolStyle.Solid, color: System.Drawing.Color.Red, width: 2);
               _endGraphic = new Graphic(null, new SimpleMarkerSymbol
                   {
                       Style = SimpleMarkerSymbolStyle.Square,
                       Color = System.Drawing.Color.Green,
                       Size = 8,
                       Outline = endOutlineSymbol
                   }
               );
   
               _routeGraphic = new Graphic(null, new SimpleLineSymbol(
                   style: SimpleLineSymbolStyle.Solid,
                   color: System.Drawing.Color.Blue,
                   width: 4
               ));
   
               routeAndStopsOverlay.Graphics.AddRange(new [] { _startGraphic, _endGraphic, _routeGraphic });
   7 collapsed lines
   
               // Set the view model's Map property with the map.
               Map = map;
           }
   
       }
   }

4. Create a function to reset the current route creation state. The function will set the Geometry for each result Graphic to null, clear driving directions text from the MapViewModel.Directions property, and set the status variable to RouteBuilderStatus.NotStarted.

   MapViewModel.cs

   131 collapsed lines
   // Copyright 2021 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.
   
   using System;
   using System.Collections.Generic;
   using System.ComponentModel;
   using System.Runtime.CompilerServices;
   using System.Text;
   using Esri.ArcGISRuntime.Geometry;
   using Esri.ArcGISRuntime.Mapping;
   
   using System.Linq;
   using System.Threading.Tasks;
   using Esri.ArcGISRuntime.Symbology;
   using Esri.ArcGISRuntime.Tasks.NetworkAnalysis;
   using Esri.ArcGISRuntime.UI;
   
   namespace FindARouteAndDirections
   {
       class MapViewModel : INotifyPropertyChanged
       {
   
           enum RouteBuilderStatus
           {
               NotStarted, // No locations have been defined.
               SelectedStart, // Origin point exists.
               SelectedStartAndEnd // Origin and destination exist.
           }
           private RouteBuilderStatus _currentState = RouteBuilderStatus.NotStarted;
   
           private Graphic _startGraphic = new();
           private Graphic _endGraphic = new();
           private Graphic _routeGraphic = new();
   
           public MapViewModel()
           {
               SetupMap();
           }
   
           public event PropertyChangedEventHandler? PropertyChanged;
           protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
           {
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
           }
   
           private Map? _map;
           public Map? Map
           {
               get { return _map; }
               set
               {
                   _map = value;
                   OnPropertyChanged();
               }
           }
   
           private GraphicsOverlayCollection? _graphicsOverlayCollection;
           public GraphicsOverlayCollection? GraphicsOverlays
           {
               get { return _graphicsOverlayCollection; }
               set
               {
                   _graphicsOverlayCollection = value;
                   OnPropertyChanged();
               }
           }
   
           private List<string>? _directions;
           public List<string>? Directions
           {
               get { return _directions; }
               set
               {
                   _directions = value;
                   OnPropertyChanged();
               }
           }
   
           private void SetupMap()
           {
   
               var map = new Map(BasemapStyle.ArcGISStreets);
   
               // Set the initial viewpoint around the Santa Monica Mountains in California.
   
               var mapCenterPoint = new MapPoint(-118.24532, 34.05398, SpatialReferences.Wgs84);
   
               map.InitialViewpoint = new Viewpoint(mapCenterPoint, 100000);
   
               GraphicsOverlay routeAndStopsOverlay = new GraphicsOverlay();
               this.GraphicsOverlays = new GraphicsOverlayCollection
               {
                   routeAndStopsOverlay
               };
   
               var startOutlineSymbol = new SimpleLineSymbol(SimpleLineSymbolStyle.Solid, System.Drawing.Color.Blue, 2);
               _startGraphic = new Graphic(null, new SimpleMarkerSymbol
                   {
                       Style = SimpleMarkerSymbolStyle.Diamond,
                       Color = System.Drawing.Color.Orange,
                       Size = 8,
                       Outline = startOutlineSymbol
                   }
               );
   
               var endOutlineSymbol = new SimpleLineSymbol(style: SimpleLineSymbolStyle.Solid, color: System.Drawing.Color.Red, width: 2);
               _endGraphic = new Graphic(null, new SimpleMarkerSymbol
                   {
                       Style = SimpleMarkerSymbolStyle.Square,
                       Color = System.Drawing.Color.Green,
                       Size = 8,
                       Outline = endOutlineSymbol
                   }
               );
   
               _routeGraphic = new Graphic(null, new SimpleLineSymbol(
                   style: SimpleLineSymbolStyle.Solid,
                   color: System.Drawing.Color.Blue,
                   width: 4
               ));
   
               routeAndStopsOverlay.Graphics.AddRange(new [] { _startGraphic, _endGraphic, _routeGraphic });
   
               // Set the view model's Map property with the map.
               Map = map;
           }
   
           private void ResetState()
           {
               _startGraphic.Geometry = null;
               _endGraphic.Geometry = null;
               _routeGraphic.Geometry = null;
               Directions = null;
               _currentState = RouteBuilderStatus.NotStarted;
           }
   3 collapsed lines
   
       }
   }