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.
Make sure you have installed the latest version of Xcode.
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.
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)
}
Within the addGraphics method create a spatial reference object. This spatial reference will be used to create graphics.
/** ADD **/
let ref: AGSSpatialReference = .wgs84()
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)
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. **/
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)
}
Update viewDidLoad to call the new addGraphics method after setupMap.
/** UPDATE **/
override func viewDidLoad() {
super.viewDidLoad()
setupMap()
/** ADD **/
addGraphics()
}
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.)
Verify your project runs and displays three separate graphics on the map. Compare your solution with our completed solution project.
SimpleMarkerSymbol used in the tutorial, and also try rotating it. Refer to properties defined hereInstead of using a single graphics overlay for point, polyline and polygons, create three of them and add to map view.