Add a map to your app

The primary way to display geographic information in your app is through a map. This SDK contains a map view component that lets you view and interact with the map's content and geographic area. Individual map layers or a pre-configured webmap can be added to the map from ArcGIS Online, your on-premises portal or other sources.

The steps below guide you through displaying a map in your application. If you haven't already done so, configure your Xcode project then follow the steps below. In this tutorial a Cocoa Application Xcode project template is used.

Add a map view to the user interface

The first step to display a map in your application is to add a map view to your application's user interface. This map view acts as an empty placeholder to which you will later add map content.

The user interface of a Mac application is typically contained in nib files (.xib extension). The nib file contains all the UI components that need to display, and information about their styling, positioning, layout, and so on. Each Mac xib file typically has an associated Window contains code to respond to user interaction with the UI components, and optionally perform some setup and tear down tasks.

When you select this file in the MainMenu.xib file the Project Navigator pane on the left and the xib's UI contents are displayed in the Canvas section on the right. Between the Project Navigator and the Canvas lies the Dock, which provides a convenient list of all the UI components currently in the xib file. The rightmost section in Xcode is the Utility area, which contains the Inspector pane (top) and Library pane (bottom). The Inspector allows you to inspect and change properties of the UI components in the xib file, and the Library allows you to pick UI components to add to your project.

To add a map view, select a Custom View object from the Object Library in the Library pane, then drag and drop it on to the view shown in the Canvas.

Note:

The Library pane is located at the bottom right of the Xcode window. The screenshot below is for Xcode 8 but note that it is displayed in different ways depending on the version of Xcode. Make sure you have selected the Object Library that contains the Custom View.

This NSView object acts as a placeholder for the map that needs to display in the application. Resize the NSView, if necessary, for your application.

Before this NSView can display your map, change it to a map view. Do this by specifying AGSMapView as the class for this object in the Inspector.

Connect the map view to the view controller

You have added a map view to the UI. Now connect it to the swift file so it can be programmatically accessed.

To do this, enable the Assistant Editor so that the the swift file displays alongside the Canvas. Locate the map view in the Canvas, then drag and drop it in the swift file as shown in the Assistant Editor.

Upon doing so, Xcode automatically prompts for a name so that it can create an "outlet" connection from the view controller to the map view in the UI. In this topic, this outlet is called mapView.

If you try to build the application at this stage, you will get compile errors because your application contains a reference to the AGSMapView class that has not been defined yet. Import the ArcGIS module into your swift file. You can now reference any class in the ArcGIS Runtime SDK for macOS.

import Cocoa
import ArcGIS

class AppDelegate: NSObject, NSApplicationDelegate {
                            
    @IBOutlet weak var window: NSWindow!
    @IBOutlet weak var mapView: AGSMapView!
...

}

Add a map to the map view

You have added a map view to the UI and connected it to the code files. After you add a basemap to the map you can then add the map to the mapview so that it can be displayed. Remember, you can also display content by opening a preconfigured web map.

Select the swift file in the Navigator. Open it in the source editor. Locate the applicationDidFinishLaunching method and construct a map object using the ArcGIS Online topographic map as a basemap. Assign the map to a mapview's map property so that it is displayed to the users.

func applicationDidFinishLaunching(aNotification: NSNotification?) {

 //insert code here to initialize your application
        
 //construct an instance of a map and set it's basemap to be a topographic map
 let map = AGSMap(basemap: AGSBasemap.topographic())

 //set the mapview's map  
 self.mapView.map = map
        
 ...
}
    }

If you build and run the application the map will display the content of the ArcGIS Online topographic basemap as follows: