Display a Map

Now that we have the prerequisite API keys, and the project set up, we can start adding basic functionality to the app. We will start by having the app display a map.

Display a Map with MapsIndoors​

Examples

1. Check out Git repo for a full example: iOS v4 Getting Started and also iOS v4 Examples

2. Note: Later in the Examples, Map Engine and Map Provider can refer to Google Maps and/or Mapbox.

See the full example of Displaying a map here: DisplayMap.swift

In order to accomplish this we will be utilizing the MPMapControl Class and adding code to initialize MapsIndoors and show a map.

Import MapsIndoors and use MPMapControl

Google Maps

Provide the API Key for Google Maps within the AppDelegate:

AppDelegate.swift

import GoogleMaps

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    GMSServices.provideAPIKey(AppDelegate.gApiKey!)
    return true
}

Within the ViewController class, make the following changes:

ViewController.swift

import MapsIndoorsCore
import MapsIndoorsGoogleMaps
import GoogleMaps

override func viewDidLoad() {
    super.viewDidLoad()
    
    // Set up the Google Maps view. Centered on The White House. Change this to center on a building in your MapsIndoors dataset
    let camera = GMSCameraPosition.camera(withLatitude: 38.8977, longitude: -77.0365, zoom: 20)
    mapView = GMSMapView.map(withFrame: view.bounds, camera: camera)
    view.addSubview(mapView)

    // Set up the autoresizing mask to keep the map's frame synced with the view controller's frame.
    mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    // Initialize the MPMapConfig with the GMSMapView
    mapConfig = MPMapConfig(gmsMapView: mapView, googleApiKey: [YOUR_GOOGLE_API_KEY])
        
    // Initialize the MPMapControl with the MPMapConfig.
    Task {
        // Load MapsIndoors with the MapsIndoors API key.
        try await MPMapsIndoors.shared.load(apiKey: [YOUR_MAPSINDOORS_API_KEY])
        if let mapConfig = mapConfig {
            mapControl = MPMapsIndoors.createMapControl(mapConfig: mapConfig)
            // Use MapsIndoors SDK to add your functionality.
            // ...
        }
    }
}

Mapbox

Within the ViewController class, make the following changes:

ViewController.swift

import MapsIndoorsCore
import MapsIndoorsMapbox
import Mapbox

override func viewDidLoad() {
    super.viewDidLoad()

    // Set up the Mapbox map view
    let mapInitOptions = MapInitOptions(resourceOptions: ResourceOptions(accessToken: AppDelegate.mApiKey))
    mapView = MapView(frame: view.bounds, mapInitOptions: mapInitOptions)
    view.addSubview(mapView)

    // Set up the autoresizing mask to keep the map's frame synced with the view controller's frame.
    mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    // Center the map on a specific location
    let centerCoordinate = CLLocationCoordinate2D(latitude: 38.8977, longitude: -77.0365)
    mapView.mapboxMap.setCamera(to: CameraOptions(center: centerCoordinate, zoom: 20))

    // Initialize the MPMapConfig with the Mapbox MapView
    mapConfig = MPMapConfig(mapBoxView: mapView, accessToken: AppDelegate.mapBoxApiKey!)

    // Initialize the MPMapControl with the MPMapConfig.
    Task {
        // Load MapsIndoors with the MapsIndoors API key.
        try await MPMapsIndoors.shared.load(apiKey: AppDelegate.mApiKey)
        if let mapConfig = mapConfig {
            mapControl = MPMapsIndoors.createMapControl(mapConfig: mapConfig)
            // Use MapsIndoors SDK to add your functionality.
            // ...
        }
    }
}

The MPMapControl Class is the connective class between the Map Engine and MapsIndoors. It allows the two services to collaborate by overlaying the MapsIndoors information over the Map Engine information.

Running the app without the use of the code above indeed displays a map, however this is through the use of the Map Engine of your choice exclusively and with a default map region displayed. But we used MapsIndoors to show a specific location.

We have now added a very simple search feature! Running the app now should yield a combined map of The White House, showing both the external and internal geographical information. However, let us try and understand what is actually happening.

Expected Result​

An animation showing the desired behaviour of this tutorial

Feel free to change the query from "White House" to a known building in your MapsIndoors dataset.

Next, let us look into how we can add a search feature and interact with it. We set up a Query and Filter based on the MPQuery Class class and MPFilter Class class, respectively. These serve as our search specifications. Finally, we call the MPMapsIndoors.shared.locationsWith(query:query, filter:filter) method, which searches through the full collection of locations based on our previously established query and filter. We then select the desired location and floor index on the map using the mapControl instance. This handles the selection for both the selected Map Engine and MapsIndoors.