Overview

You will learn: how 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 lab, 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

You must have previously installed the ArcGIS Runtime SDK for iOS and set up your development environment. Please review the install and set up instructions if you have not done this.

Make a copy of the finished Create a starter app lab (or download here) and open the .xcodeproj file in Xcode.

Steps

Add a graphics overlay to map view

  1. In the ViewController.swift file, create an AGSGraphicsOverlay object, and add it to the map view.

     override func viewDidLoad() {
         super.viewDidLoad()
         let map = AGSMap(basemapType: .navigationVector, latitude: 34.05293, longitude: -118.24368, levelOfDetail: 11)
         mapView.map = map
    
         /*** ADD ***/
         //Create graphics overlay and add it to map view
         let graphicsOverlay = AGSGraphicsOverlay()
         self.mapView.graphicsOverlays.add(graphicsOverlay)
     }
    

Add a point graphic

  1. First, add a point graphic to the map. Create a point geometry and marker symbol and then assign these to the graphic. Then add the graphic to the graphic overlay. Add the following code in viewDidLoad() method.

    //Create a point geometry
    let point = AGSPoint(x: -118.29507, y: 34.13501, spatialReference: AGSSpatialReference.wgs84())
    
    //Create point symbol with outline
    let pointSymbol = AGSSimpleMarkerSymbol(style: .circle, color: UIColor.orange, size: 10.0)
    pointSymbol.outline = AGSSimpleLineSymbol(style: .solid, color: UIColor.blue, width: 2.0)
    
    //Create point graphic with geometry & symbol
    let pointGraphic = AGSGraphic(geometry: point, symbol: pointSymbol, attributes: nil)
    
    //Add point graphic to graphic overlay
    graphicsOverlay.graphics.add(pointGraphic)
    
  2. Press Command-R to run the app and you should see a point graphic in Griffith Park.

Add a line graphic

  1. Next, add a line graphic. Create a line geometry and line symbol and then assign these to the graphic. Add the graphic to the graphics overlay.

    //Create polyline geometry
    let point1ForPolyline = AGSPoint(x: -118.29026, y: 34.1816, spatialReference: AGSSpatialReference.wgs84())
    let point2ForPolyline = AGSPoint(x: -118.26451, y: 34.09664, spatialReference: AGSSpatialReference.wgs84())
    let polyline = AGSPolyline(points: [point1ForPolyline, point2ForPolyline])
    
    //Create symbol for polyline
    let polylineSymbol = AGSSimpleLineSymbol(style: .solid, color: UIColor.blue, width: 3.0)
    
    //Create a polyline graphic with geometry and symbol
    let polylineGraphic = AGSGraphic(geometry: polyline, symbol: polylineSymbol, attributes: nil)
    
    //Add polyline to graphics overlay
    graphicsOverlay.graphics.add(polylineGraphic)
    
  2. Press Command-R to run the app and you should also see the line graphic next to Griffith Park.

Add a polygon graphic

  1. Next, add a polygon graphic. Create a polygon geometry and fill symbol and then assign these to a polygon graphic. Add the graphic to the graphics overlay.

    //Create polygon geometry
    let point1ForPolygon = AGSPoint(x: -118.27653, y: 34.15121, spatialReference: AGSSpatialReference.wgs84())
    let point2ForPolygon = AGSPoint(x: -118.2446, y: 34.15462, spatialReference: AGSSpatialReference.wgs84())
    let point3ForPolygon = AGSPoint(x: -118.22915, y: 34.14439, spatialReference: AGSSpatialReference.wgs84())
    let point4ForPolygon = AGSPoint(x: -118.23327, y: 34.12279, spatialReference: AGSSpatialReference.wgs84())
    let point5ForPolygon = AGSPoint(x: -118.25318, y: 34.10972, spatialReference: AGSSpatialReference.wgs84())
    let point6ForPolygon = AGSPoint(x: -118.26486, y: 34.11625, spatialReference: AGSSpatialReference.wgs84())
    let point7ForPolygon = AGSPoint(x: -118.27653, y: 34.15121, spatialReference: AGSSpatialReference.wgs84())
    let polygon = AGSPolygon(points: [point1ForPolygon,point2ForPolygon,point3ForPolygon,
                                     point4ForPolygon,point5ForPolygon,point6ForPolygon,point7ForPolygon])
    
    //Create symbol for polygon with outline
    let polygonOutlineSymbol = AGSSimpleLineSymbol(style: .solid, color: UIColor.blue, width: 2.0)
    let polygonSymbol = AGSSimpleFillSymbol(style: .solid, color: UIColor.orange, outline: polygonOutlineSymbol)
    
    //Create polygon graphic with geometry and symbol
    let polygonGraphic = AGSGraphic(geometry: polygon, symbol: polygonSymbol, attributes: nil)
    
    //Add polygon graphic to graphics overlay
    graphicsOverlay.graphics.add(polygonGraphic)
    
  2. Press Command-R to run the app in the iOS Simulator. You should now also see the polygon graphic next to Griffith Park

Congratulations, you're done!

Your project should look like this.

Challenge

Add graphics with different symbols and styles

  1. Add a composite symbol: Composite symbols are simply a combination of two or more symbols. Change the polygon graphic in the lab to use a composite symbol. For more info on composite symbols, see here
  2. Add a text symbol: Text symbols are used to display text for graphics and features. Add text symbols for the line graphic used in the lab. For more information on Text Symbols, see here
  3. Change the marker symbol, and rotate the symbol: Use a different shape (a square, for example) for the SimpleMarkerSymbol used in the lab, and also try rotating it. Refer to properties defined here

Add multiple graphics overlays

Instead of using a single graphics overlay for point, line and polygons, create three of them and add to map view.