Distance and Direction widget
The Distance and Direction widget allows you to draw lines, circles, ellipses, and range rings to visualize important information.
License:If you include this widget in your app, confirm that your end users have the required privileges described in the Use this widget section.
Configure the Distance and Direction widget
This widget can be set to open automatically when
an app starts. Hover over the widget and click the Do not open this widget when
the app starts button 
to change the setting to Open this widget automatically when the app starts. (For widgets that you need to add to the app first, you can turn on this option after configuring the widget.)
- Hover over the widget and click the Configure this widget button
to open the configuration window.
Note:If you need to add the widget to the app first, click a widget placeholder on the Widget tab. In the Choose Widget window that opens, select the widget and click OK.
- To replace the widget icon with your own, click the Change widget icon button.
A file explorer window appears, allowing you to select a local image file to use as the widget icon.
- In the Distance and Direction Feedback Style section, use the check boxes to choose which tabs will display when the widget is deployed. By default, Show all tabs is on to display all tabs.
- Click on the preview icon to edit the symbology for each tab.
- Use the color picker in Feedback label text color to set the color used to label graphics.
- Use the text box in Feedback label text size to set the text size used to label graphics.
- In the Distance and Direction Feedback Results Layer section, configure the following settings:
- Select an operational polyline layer for line and rings results—Choose a polyline layer to which users can save results.
- Select an operational polygon layer for circle and ellipse results—Choose a polygon layer to which users can save results.
Note:These lists only include layers from your organization. If the map uses feature layers from another organization, they do not appear in the lists.
Use the Distance and Direction widget
You can use the Distance and Direction widget to create lines, circles, ellipses, or rings.
Change the input coordinate format
The Distance and Direction widget allows you to change the way coordinates are displayed in the coordinate text box. The Format Input and Add Point tools are located by the Start Point and End Point for the line tab, and Center Point for the circle, ellipse and range rings tabs.
- Click the Format Input button next to any coordinate text box to open the Set Coordinate Format String window.
- Click the drop-down menu and choose a coordinate display format.
- Format the coordinate string by adding characters or spaces or removing components of the string in the text box.
- Optionally check the box to add a + or - prefix to positive or negative numbers.
- Click OK.
Edit symbology
You can edit the symbology of a line, circle, ellipse, or range ring. Each tab has a Symbol and label settings section that provides the option to change how graphics are displayed.
- In the Symbol and label settings section, click Symbology Preview and make changes.
- For Label color and size, click the color picker to set the color and use the text box to set the text size used to label a graphic.
Create lines
You can create lines using the Distance and Direction widget given a distance and bearing, from known coordinates, or by interactively selecting points.
Create lines from distance and bearing
Create lines from a given distance and bearing.
- Click the Line tab.
- Click the From menu and choose Distance and Bearing.
- Set a start point by entering coordinates in the Start Point text box and pressing Enter, or use the Add Point tool to interactively select a point.
- Optionally use the Format Input button to open the Set Coordinate Format String window.
- Enter a value for Length and set the units.
- Enter a value for Angle and set the units.
- Click OK.
- In the Publish Graphics pane, optionally save the result by publishing a hosted feature layer.
- To remove the graphics from the map, click Back and click Clear Graphics.
Create lines from coordinates
Use known coordinates to create geodesic lines.
- Click the Line tab.
- Click the From menu and choose Points.
- Set a start point by entering coordinates in the Start Point text box and pressing Enter, or use the Add Point tool to interactively select a point.
- Optionally use the Format Input button to open the Set Coordinate Format String window.
- Set an end point by entering coordinates in the End Point text box and pressing Enter, or use the Add Point tool to interactively select a point.
- Optionally use the Format Input button to open the Set Coordinate Format String window.
- If you typed coordinates for the start and end points, click OK to create the line.
- Click OK if you want to save the result by publishing a hosted feature layer.
- To remove the graphics from the map, click Clear Graphics.
Create lines interactively
Interactively create geodesic lines on the map.
- Click the Line tab.
- Click the From menu and choose Points.
- Check the Create Line Interactively box.
- Click the Draw Line tool.
- Click a location on the map to designate the line starting point.
- Click a second point on the map to designate the line ending point.
- Click Publish if you want to save the result by publishing a hosted feature layer.
- To remove the graphics from the map, click Clear Graphics.
Create circles
You can create circles using the Distance and Direction widget from known coordinates, interactively, or from a given time and speed.
Create circles from known coordinates
Use known coordinates to create circles using radius or diameter lengths.
- Click the Circle tab.
- Click the Create Circle From menu and choose Radius or Diameter.
- Set a center point by entering coordinates in the Center Point text box and pressing Enter, or use the Draw Circle tool to interactively select a point.
- Enter a distance in the Radius or Diameter text box and choose the desired units.
- Click OK.
- In the Publish Graphics pane, optionally save the result by publishing a hosted feature layer.
- To remove the graphics from the map, click Back and click Clear Graphics.
Create circles interactively
Interactively create circles by clicking the map.
- Click the Circle tab.
- Click the Create Circle From menu to choose a drawing method. Choose Radius or Diameter.
- Check the Create Circle Interactively box.
- Click the Radius/Diameter units menu to set the distance units.
- Click the Draw Circle tool.
- Click a point on the map to designate the circle's center.
- Click a second point on the map to designate the circle's radius or diameter.
- Click Publish if you want to save the result by publishing a hosted feature layer.
- To remove the graphics from the map, click Clear Graphics.
Create circles using speed and time
Create a circle to identify potential locations for moving objects using a center point, time, and speed.
- Click the Circle tab.
- Click the Create Circle From menu and choose Radius or Diameter.
- Set a center point by entering coordinates in the Center Point text box and pressing Enter, or use the Draw Circle tool to interactively select a point.
- Expand Distance Calculator to enter the other options.
- Enter a value for Time and set the units.
- Enter a value for Rate and set the units.
- Click OK.
- In the Publish Graphics pane, optionally save the result by publishing a hosted feature layer.
- To remove the graphics from the map, click Back and click Clear Graphics.
Create ellipses
The Distance and Direction widget can create ellipses from either known coordinates or interactively.
Create ellipses from known coordinates
You can use known coordinates to create ellipses.
- Click the Ellipse tab.
- Click the Ellipse Type menu and choose either Semi or Full.
- Set a center point by entering coordinates in the Center Point text box and pressing Enter, or use the Draw Ellipse tool to interactively select a point.
- Enter values for the Major and Minor axes in the Axis section and choose a value from the Units menu.
- Enter a value for Orientation Angle and set the units.
- Click OK.
- In the Publish Graphics pane, optionally save the result by publishing a hosted feature layer.
- To remove the graphics from the map, click Back and click Clear Graphics.
Create ellipses interactively
Interactively create ellipses by clicking the map.
- Click the Ellipse tab.
- Click the Ellipse Type menu and choose Semi or Full.
- Check the Create Ellipse Interactively box.
- Click the Unit menu in the Axis section to change the axis units.
- Click the Draw Ellipse tool.
- Click a point on the map to designate the ellipse center.
- Drag the pointer and click the map to designate the ellipse major axis length and orientation.
- Drag and click the map to designate the ellipse minor axis length.
- Click Publish if you want to save the result by publishing a hosted feature layer.
- To remove the graphics from the map, click Clear Graphics.
Create rings
You can create range rings with the Distance and Direction widget by interactively drawing on the map or specifying known coordinates and ring intervals. When drawing range rings from known distances between rings, rings can be drawn based on fixed intervals, distance from the origin point, or cumulative distance from the previous ring.
Create range rings interactively
Interactively create range rings by clicking the map.
- Click the Rings tab.
- Click the Type menu and choose Interactive.
- Use the Distance Units menu to set the units.
- Type a value in the Number of Radials text box.
- Click the Add Point tool.
- Click the map to designate a center point.
- Drag the pointer and click the map to designate the first ring.
- Add more rings as needed.
- Double-click the map to complete the range rings.
- Click Publish if you want to save the result by publishing a hosted feature layer.
- To remove the graphics from the map, click Clear Graphics.
Create range rings using a fixed ring number and distance
Create range rings using a set ring number and distance with the Distance and Direction widget.
- Click the Rings tab.
- Click the Type menu and choose Fixed.
- Set a center point by entering coordinates in the Center Point text box and pressing Enter, or use the Add Point tool to interactively select a point.
- Type a value in the Number of Rings text box.
- Type a value in the Distance Between Rings text box and set the desired units.
- Type a value in the Number of Radials text box.
- Click OK.
- In the Publish Graphics pane, optionally save the result by publishing a hosted feature layer.
- To remove the graphics from the map, click Back and click Clear Graphics.
Create range rings by distance from an origin
Create range rings based on an origin and distance from the origin.
- Click the Rings tab.
- Click the Type menu and choose Origin.
- Set a center point by entering coordinates in the Center Point text box and pressing Enter, or use the Add Point tool to interactively select a point.
- Use the Distance Units menu to set the units.
- Enter a value in the Distances text box to set how far the first ring will be from the origin point.
- Click the add button to add another value, and continue to add values as necessary.
- Optionally hover over a value and click the delete button to delete that value.
- Type a value in the Number of Radials text box.
- Click OK.
- In the Publish Graphics pane, optionally save the result by publishing a hosted feature layer.
- To remove the graphics from the map, click Back and click Clear Graphics.
Create range rings by distance between rings
Create range rings based on an origin and distance from the previous ring.
- Click the Rings tab.
- Click the Type menu and choose Cumulative.
- Set a center point by entering coordinates in the Center Point text box and pressing Enter, or use the Add Point tool to interactively select a point.
- Use the Distance Units menu to set the units.
- Enter a value in the Distances text box to set how far the first ring will be from the origin point.
- Click the add button to add another value, and continue to add values as necessary.
- Optionally hover over a value and click the delete button to delete that value.
- Optionally hover over a value and click the up or down arrow to reorder the values.
- Type a value in the Number of Radials text box.
- Click OK.
- In the Publish Graphics pane, optionally save the result by publishing a hosted feature layer.
- To remove the graphics from the map, click Back and click Clear Graphics.
Publish graphics as a layer
Publish distance and direction graphics as a hosted feature layer to a portal or organizational account.
Note:To publish results, you must have an organizational account with publishing privileges.
- In the Published Layer Name text box, type a name for the hosted feature layer or select an existing hosted feature layer.
- Click Publish.
- If you're prompted to sign in, enter your username and password.
- Click OK.