Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

You will learn: how to display a vector basemap with custom styles in a native app.

With the ArcGIS Runtime SDK for iOS you can build mapping applications that use Esri vector basemaps with custom styles. If you don't already have a custom basemap style, you can create a new one with the ArcGIS Vector Tile Style Editor. This application allows you to create a style interactively and then save the style in ArcGIS Online as a portal item. Each portal item has a unique ID that your application can use to load the style as a layer or a basemap. See Display a map for more details.

To learn more about how to create a new custom style with the ArcGIS Vector Tile Style Editor, see the Style a vector basemap tutorial.

In this tutorial, you will build a mapping app that loads a custom vector basemap of national forests and parks called Forest and Parks Canvas Map.

Prepare your data

Complete the tutorial Style a vector basemap. You will use the map style created in that tutorial for the custom map required in this tutorial.

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

Create an app configuration file

  1. Add a new swift file named AppConfiguration.swift. Use this file to specify constants that can be used by the app to connect to data and resources. Create a static String to access the Forest and Parks Canvas vector layer by referencing its item ID. You will use this resource in future steps.

    /** ADD **/
    extension String {
        static let vectorBasemapLayer = "d2ff12395aeb45998c1b154e25d680e5"
    }
    

Add a vector basemap to the map

  1. Open ViewController.swift in the Project Navigator. Update the setupMap method to create a basemap using a vector tile layer hosted on ArcGIS Online.

    /** UPDATE **/
    private func setupMap() {
        let vectorTileLayerBasemap: AGSBasemap = {
            let portal = AGSPortal.arcGISOnline(withLoginRequired: false)
            let item = AGSPortalItem(portal: portal, itemID: .vectorBasemapLayer)
            let layer = AGSArcGISVectorTiledLayer(item: item)
            return AGSBasemap(baseLayer: layer)
        }()
    }
    
  2. Create a map using the vector tile layer basemap and set the initial viewpoint to the Santa Monica mountains.

    private func setupMap() {
        let vectorTileLayerBasemap: AGSBasemap = {
            let portal = AGSPortal.arcGISOnline(withLoginRequired: false)
            let item = AGSPortalItem(portal: portal, itemID: .vectorBasemapLayer)
            let layer = AGSArcGISVectorTiledLayer(item: item)
            return AGSBasemap(baseLayer: layer)
        }()
    
        /** ADD **/
        let map = AGSMap(basemap: vectorTileLayerBasemap)
        map.initialViewpoint = AGSViewpoint(
            latitude: 34.09042,
            longitude: -118.71511,
            scale: 300000.0
        )
    
        mapView.map = map
    }
    
  3. Press Command-R to run the app in the iOS Simulator. When the app opens, you should see imagery of Los Angeles appear with trails displayed on top of the map with elevation in 3D.

    (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!

Your map should display the custom forest and parks canvas basemap. Compare your solution with our completed solution project.

Challenge

Use your own custom basemap

Complete the tutorial Style a vector basemap and use your own custom basemap instead of the one provided here.

Add layers

Review the tutorial Create a 2D map with a layer and load the trailheads layer on top of your custom basemap.

Handle load errors

Custom basemaps may not load in your app for multiple reasons, including network availability, the item's privacy settings, or an incorrect item ID. Add error handling to your app to alert the user if the map does not load and display a message explaining why.