Display point, line, and polygon graphics

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

2. 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)
   

3. Press Command-R to run the app and you should see a point graphic in Griffith Park.

Add a line graphic

4. 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)
   

5. Press Command-R to run the app and you should also see the line graphic next to Griffith Park.

Add a polygon graphic

6. 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)
   

7. 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.

Next labs

Display and track your location

Find and track your device location on a map.

10 minutes Start Lab

Search for an address

Find addresses and places with the ArcGIS World Geocoding Service.

15 minutes Start Lab

Add layers to a map (offline)

Load a basemap and feature layers from a mobile map package (.mmpk) file.

10 minutes Start Lab

Access services with OAuth 2.0

Use named user login credentials to access the ArcGIS Traffic Layer service.

15 minutes Start Lab

Challenge

Add graphics with different symbols and styles

Add multiple graphics overlays