Skip To Content ArcGIS for Developers Sign In Dashboard

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 the map view

  1. In ViewController.swift create a new method named addGraphics. In it, create an AGSGraphicsOverlay object and add it to the map view. You will use this graphics overlay as a container to display points, lines, and polygons on the map.

    private func addGraphics() {
        let graphicsOverlay = AGSGraphicsOverlay()
        mapView.graphicsOverlays.add(graphicsOverlay)
    }
    

Create a spatial reference

  1. Within the addGraphics method create a spatial reference object. This spatial reference will be used to create graphics.

        /** ADD **/
        let ref: AGSSpatialReference = .wgs84()
    

Add a point graphic

  1. Within the addGraphics method create a point graphic and add it to the graphics overlay. A point graphic is created with a point geometry and a marker symbol.

        /** ADD **/
        // Create a point graphic.
        let pointGraphic: AGSGraphic = {
            // Create a point geometry.
            let point = AGSPoint(x: -118.69333917997633, y: 34.032793670122885, spatialReference: ref)
            // Create point symbol with outline.
            let symbol = AGSSimpleMarkerSymbol(
                style: .circle,
                color: .orange,
                size: 10.0
            )
            symbol.outline = AGSSimpleLineSymbol(
                style: .solid,
                color: .blue,
                width: 2.0
            )
            // Create point graphic with geometry & symbol.
            return AGSGraphic(
                geometry: point,
                symbol: symbol,
                attributes: nil
            )
        }()
    
        // Add point graphic to graphics overlay.
        graphicsOverlay.graphics.add(pointGraphic)
    

Add a polyline graphic

  1. Within the addGraphics method create a polyline graphic and add it to the graphics overlay. A polyline graphic is created with a polyline geometry and a line symbol.

        /** ADD **/
        // Create a polyline graphic.
        let polylineGraphic: AGSGraphic = {
            // Create polyline geometry.
            let polyline = AGSPolyline(
                points: [
                    AGSPoint(x: -118.67999016098526, y: 34.035828839974684, spatialReference: ref),
                    AGSPoint(x: -118.65702911071331, y: 34.07649252525452, spatialReference: ref)
                ]
            )
            // Create symbol for polyline.
            let symbol = AGSSimpleLineSymbol(
                style: .solid,
                color: .blue,
                width: 3.0
            )
            // Create a polyline graphic with geometry and symbol.
            return AGSGraphic(
                geometry: polyline,
                symbol: symbol,
                attributes: nil
            )
        }()
    
        // Add polyline to graphics overlay.
        graphicsOverlay.graphics.add(polylineGraphic)
    
        /** Code from the next step goes here. **/
    

Add a polygon graphic

  1. Within the addGraphics method create a polygon graphic and add it to the graphics overlay. A polygon graphic is created with a polygon geometry and a fill symbol.

        /** ADD **/
        // Create polygon graphic.
        let polygonGraphic: AGSGraphic = {
            // Create polygon geometry.
            let polygon = AGSPolygon(
                points: [
                    AGSPoint(x: -118.70372100524446, y: 34.03519536420519, spatialReference: ref),
                    AGSPoint(x: -118.71766916267414, y: 34.03505116445459, spatialReference: ref),
                    AGSPoint(x: -118.71923322580597, y: 34.04919407570509, spatialReference: ref),
                    AGSPoint(x: -118.71631129436038, y: 34.04915962906471, spatialReference: ref),
                    AGSPoint(x: -118.71526020370266, y: 34.059921300916244, spatialReference: ref),
                    AGSPoint(x: -118.71153226844807, y: 34.06035488360282, spatialReference: ref),
                    AGSPoint(x: -118.70803735010169, y: 34.05014385296186, spatialReference: ref),
                    AGSPoint(x: -118.69877903513455, y: 34.045182336992816, spatialReference: ref),
                    AGSPoint(x: -118.6979656552508, y: 34.040267760924316, spatialReference: ref),
                    AGSPoint(x: -118.70259112469694, y: 34.038800278306674, spatialReference: ref),
                    AGSPoint(x: -118.70372100524446, y: 34.03519536420519, spatialReference: ref)
                ]
            )
            // Create symbol for polygon with outline.
            let symbol = AGSSimpleFillSymbol(
                style: .solid,
                color: .orange,
                outline: AGSSimpleLineSymbol(
                    style: .solid,
                    color: .blue,
                    width: 2.0
                )
            )
            // Create polygon graphic with geometry and symbol.
            return AGSGraphic(
                geometry: polygon,
                symbol: symbol,
                attributes: nil
            )
        }()
    
        // Add polygon graphic to graphics overlay.
        graphicsOverlay.graphics.add(polygonGraphic)  
    }
    

Put it all together

  1. Update viewDidLoad to call the new addGraphics method after setupMap.

    /** UPDATE **/
    override func viewDidLoad() {
        super.viewDidLoad()
        setupMap()
        /** ADD **/
        addGraphics()
    }
    
  2. Press Command-R to run the app in the iOS Simulator. You should see graphics in the Santa Monica Mountains.

    (Note, as of 100.8 Runtime supports Metal. In order to run your app in a simulator you must meet some minimum requirements. You must be developing on macOS Catalina, using Xcode 11, and simulating iOS 13.)

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

  1. Add a composite symbol: Composite symbols are simply a combination of two or more symbols. Change the polygon graphic in the tutorial 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 tutorial. 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 tutorial, and also try rotating it. Refer to properties defined here

Add multiple graphics overlays

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