Display point, line, and polygon graphics

Overview

You will learn: how to build an app to create geometries and graphics from coordinates and add them to a map.

With the ArcGIS Runtime SDK for iOS it's easy to add graphics to a graphics overlay and display them on a map. Graphics are in-memory objects that represent geographic features. Graphics always live in their own container (graphics overlay) and are commonly positioned on top of all of the other layers. They have a single geometry type (point, line, or polygon) and a unique symbol style. Graphics can be created interactively by listening to mouse or touch events, or manually by providing the map coordinates.

In this tutorial, you will build a simple app that creates point, line and polygon graphics and then displays them using a graphic overlay. The graphics will be created directly from latitude and longitude coordinates.

Before you begin

Make sure you have installed the latest version of Xcode.

Reuse the starter project

If you have completed the Create a starter app tutorial, then copy the project into a new empty folder. Otherwise, download and unzip the project solution. Open the .xcodeproj file in Xcode. Run and verify the map displays in the device simulator.

Steps

Add a graphics overlay to map view

1. In the ViewController.swift file, create a new member variable to hold a reference to the graphics overlay. You will use this graphics overlay as a container to display points, lines, and polygons on the map.

   private var graphicsOverlay:AGSGraphicsOverlay!
   

2. Create a new function named createGraphicsOverlay. In it, create an AGSGraphicsOverlay object, assign it to the member variable, and add it to the map view.

   private func createGraphicsOverlay() {
       graphicsOverlay = AGSGraphicsOverlay()
       self.mapView.graphicsOverlays.add(graphicsOverlay)
   }
   

Add a point graphic

1. Add a point graphic to the graphics overlay. Create a new function named createPointGraphics. Inside the new function, create a point geometry and marker symbol and then assign these to the graphic. Then add the graphic to the graphics overlay.

   private func createPointGraphics() {
       let point = AGSPoint(x: -118.69333917997633, y: 34.032793670122885, spatialReference: AGSSpatialReference.wgs84())
       let pointSymbol = AGSSimpleMarkerSymbol(style: .circle, color: .orange, size: 10.0)
       pointSymbol.outline = AGSSimpleLineSymbol(style: .solid, color: .blue, width: 2.0)
       let pointGraphic = AGSGraphic(geometry: point, symbol: pointSymbol, attributes: nil)
       graphicsOverlay.graphics.add(pointGraphic)
   }
   

Add a line graphic

1. Add a line graphic. Create a new function named createPolylineGraphics. Inside the new function, create a line geometry and line symbol and then assign these to the graphic. Add the graphic to the graphics overlay.

   private func createPolylineGraphics() {
       let polyline = AGSPolyline(points: [
           AGSPoint(x: -118.67999016098526, y: 34.035828839974684, spatialReference: AGSSpatialReference.wgs84()),
           AGSPoint(x: -118.65702911071331, y: 34.07649252525452, spatialReference: AGSSpatialReference.wgs84())
           ])
       let polylineSymbol = AGSSimpleLineSymbol(style: .solid, color: .blue, width: 3.0)
       let polylineGraphic = AGSGraphic(geometry: polyline, symbol: polylineSymbol, attributes: nil)
       graphicsOverlay.graphics.add(polylineGraphic)
   }
   

Add a polygon graphic

1. Add a polygon graphic. Create a new function named createPolygonGraphics. Inside the new function, create a polygon geometry and fill symbol and then assign these to a polygon graphic. Add the graphic to the graphics overlay.

   private func createPolygonGraphics() {
       let polygon = AGSPolygon(points: [
           AGSPoint(x: -118.70372100524446, y: 34.03519536420519, spatialReference: .wgs84()),
           AGSPoint(x: -118.71766916267414, y: 34.03505116445459, spatialReference: .wgs84()),
           AGSPoint(x: -118.71923322580597, y: 34.04919407570509, spatialReference: .wgs84()),
           AGSPoint(x: -118.71631129436038, y: 34.04915962906471, spatialReference: .wgs84()),
           AGSPoint(x: -118.71526020370266, y: 34.059921300916244, spatialReference: .wgs84()),
           AGSPoint(x: -118.71153226844807, y: 34.06035488360282, spatialReference: .wgs84()),
           AGSPoint(x: -118.70803735010169, y: 34.05014385296186, spatialReference: .wgs84()),
           AGSPoint(x: -118.69877903513455, y: 34.045182336992816, spatialReference: .wgs84()),
           AGSPoint(x: -118.6979656552508, y: 34.040267760924316, spatialReference: .wgs84()),
           AGSPoint(x: -118.70259112469694, y: 34.038800278306674, spatialReference: .wgs84()),
           AGSPoint(x: -118.70372100524446, y: 34.03519536420519, spatialReference: .wgs84())
           ])
       let polygonOutlineSymbol = AGSSimpleLineSymbol(style: .solid, color: .blue, width: 2.0)
       let polygonSymbol = AGSSimpleFillSymbol(style: .solid, color: .orange, outline: polygonOutlineSymbol)
       let polygonGraphic = AGSGraphic(geometry: polygon, symbol: polygonSymbol, attributes: nil)
       graphicsOverlay.graphics.add(polygonGraphic)
   }
   

Put it all together

1. Create a new function to assemble your new graphics by first creating the graphics overlay and then calling each create graphics function.

   private func createGraphics() {
       createGraphicsOverlay()
       createPointGraphics()
       createPolylineGraphics()
       createPolygonGraphics()
   }
   

2. Update viewDidLoad to call the new createGraphics function after setupMap.

   override func viewDidLoad() {
       super.viewDidLoad()
       setupMap()
       // *** ADD ***
       createGraphics()
   }
   

3. Press Command-R to run the app in the iOS Simulator. You should see the polygon graphic outline Pepperdine University campus.

Congratulations, you're done!

Verify your project runs and displays three separate graphics on the map. Compare your solution with our completed solution project.

Challenge

Add graphics with different symbols and styles

Add multiple graphics overlays