Add a point, line, and polygon
Learn how to display point, line, and polygon graphics in a map.
You typically use graphics to display geographic data that is not connected to a database and that is not persisted, like highlighting a route between two locations, displaying a search buffer around a point, or tracking the location of a vehicle in real-time. Graphics are composed of a geometry, symbol, and attributes.
In this tutorial, you display points, lines, and polygons on a map as graphics.
To learn how to display data from data sources, see the Add a feature layer tutorial.
Prerequisites
The following are required for this tutorial:
- An ArcGIS account to access your API keys. If you don't have an account, sign up for free.
- Your system meets the system requirements.
Steps
Open the Xcode project
To start the tutorial, complete the Display a map tutorial or download and unzip the solution.
Open the
.xcodeproj
file in Xcode.If you downloaded the solution project, set your API key.
An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.
Go to your developer dashboard to get your API key. For these tutorials, use your default API key. It is scoped to include all of the services demonstrated in the tutorials.
In Xcode, in the Project Navigator, click AppDelegate.swift.
In the editor, set the
APIKey
property on theAGSArcGISRuntime
with your API key.Environment AppDelegate.swiftUse dark colors for code blocks Change line
Add a graphics overlay
A graphics overlay is a container for graphics. It is used with a map view to display graphics on a map. You can add more than one graphics overlay to a map view. Graphics overlays are displayed on top of all the other layers.
In Xcode, in the Project navigator, click ViewController.swift.
Create a new method named
add
. Create anGraphics AGSGraphics
to display point, line, and polygon graphics, and add it to theOverlay map
's collection of graphics overlays. Call theView add
method from theGraphics() View
'sController view
method.D i d Load() ViewController.swiftUse dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line.
Add a point graphic
A point graphic is created using a point and a marker symbol. A point is defined with x and y coordinates, and a spatial reference. For latitude and longitude coordinates, the spatial reference is WGS84.
Create an
AGSPoint
and anAGSSimple
. To create theMarker Symbol AGSPoint
, provide longitude (x) and latitude (y) coordinates, and anAGSSpatial
. Use theReference AGSSpatial
convenience method.Reference.wgs84() Point graphics support a number of symbol types such as
AGSSimple
,Marker Symbol Picture
andMarker Symbol AGSText
. Learn more about symbols in the API documentation.Symbol Use dark colors for code blocks Add line. Add line. Add line. Add line. Add line. You can also create
AGSPoint
s with latitude and longitude using theAGSPoint
convenience function. Notice that the order of the coordinates passed into this function is y,x (latitude,longitude):Make WGS84() Use dark colors for code blocks Copy Create an
AGSGraphic
with thepoint
andpoint
. Display theSymbol AGSGraphic
by adding it to thegraphics
'sOverlay graphics
collection.Use dark colors for code blocks Add line. Add line. Add line. Press <Command+R> to run the app.
If you are using the Xcode simulator your system must meet these minimum requirements: macOS Big Sur 11.3, Xcode 13, iOS 13. If you are using a physical device, then refer to the system requirements.
You should see a point graphic in Point Dume State Beach.
Add a line graphic
A line graphic is created using a polyline and a line symbol. A polyline is defined as a sequence of points.
Polylines have one or more distinct parts. Each part is a sequence of points. For a continuous line, you can use the AGSPolyline
constructor to create a polyline with just one part. To create a polyline with more than one part, use an AGSPolyline
.
Create an
AGSPolyline
and anAGSSimple
. To create theLine Symbol AGSPolyline
, provide an array ofAGSPoint
s.Line graphics support a number of symbol types such as
AGSSimple
andLine Symbol AGSText
. Learn more about symbols in the API documentation.Symbol Use dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Create an
AGSGraphic
with thepolyline
andpolyline
. Display theSymbol AGSGraphic
by adding it to thegraphics
'sOverlay graphics
collection.Use dark colors for code blocks Add line. Add line. Add line. Press <Command+R> to run the app.
If you are using the Xcode simulator your system must meet these minimum requirements: macOS Big Sur 11.3, Xcode 13, iOS 13. If you are using a physical device, then refer to the system requirements.
You should see a point and line graphic along Westward Beach.
Add a polygon graphic
A polygon graphic is created using a polygon and a fill symbol. A polygon is defined as a sequence of points that describe a closed boundary.
Polygons have one or more distinct parts. Each part is a sequence of points describing a closed boundary. For a single area with no holes, you can use the AGSPolygon
constructor to create a polygon with just one part. To create a polygon with more than one part, use an AGSPolygon
.
Create an
AGSPolygon
and anAGSSimple
. To create theFill Symbol AGSPolygon
, provide an array ofAGSPoint
s.Polygon graphics support a number of symbol types such as
AGSSimple
,Fill Symbol AGSPicture
,Fill Symbol AGSSimple
andMarker Symbol AGSText
. Learn more about symbols in the API documentation.Symbol Use dark colors for code blocks Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Create an
AGSGraphic
with thepolygon
andpolygon
. Display theSymbol AGSGraphic
by adding it to thegraphics
'sOverlay graphics
collection.Use dark colors for code blocks Add line. Add line. Add line. Press <Command+R> to run the app.
If you are using the Xcode simulator your system must meet these minimum requirements: macOS Big Sur 11.3, Xcode 13, iOS 13. If you are using a physical device, then refer to the system requirements.
You should see a point, line, and polygon graphic around Mahou Riviera in the Santa Monica Mountains.
What's next?
Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials: