How to Set Up the Map Controller in the Main_iPad.Storyboard in Your iOS App - dummies

How to Set Up the Map Controller in the Main_iPad.Storyboard in Your iOS App

By Neal Goldstein, Dave Wilson

Once you have a custom view controller for MapController in your iOS app, you need to tell the iPad storyboard to load your custom view controller rather than a UIViewController. Follow these steps:

  1. In the Project navigator, select Main_iPad.storyboard and then select View Controller in the View Controller – Map Scene in the Document Outline.

    The view controller icon in Xcode.

  2. Using the Inspector selector, open the Identity inspector in the Utility area and then choose MapController from the Custom Class section’s Class drop-down menu.

    Now when Map is selected in the Master View controller, MapController will be instantiated and initialized and will receive events from the user and connect the view to the model.

  3. In the Library pane, scroll back up and drag a Map view onto the Map controller in the Canvas.

    The MKMapView class provides a way to display maps.

    Starting with iOS 7, views typically cover the entire screen. At the top, the view is dimly visible through tool or navigation bars. This is different from the previous standards in which views were placed below the bars. For views that are scrollable (and map views definitely are), this provides the best user experience.

    For views that display constrained data such as a formatted data entry form, you can still place the view behind the bars, but you would leave the top part blank. Alternatively, place the view below the bars. Web views are a special case if you don’t know what the web page will look like.

    If you will be displaying a web page that has a title, logo, or other image at the top of the page, consider placing the web view below the bars so as not to obscure the title, logo, or other top image. Or better still, if it’s possible, create or use a version of the web page where the top of the web view does not contain critical information.

  4. Open the main disclosure triangle next to Map Controller in the Document Outline (notice that the name changed from View Controller to Map Controller) and then open the sub-disclosure triangle next to View.

    The Map Controller section of an app in Xcode.

    Notice how the name of the view in the Document Outline is now Map View.

    The map view icon in Xcode.

  5. With the Map View still selected, choose Editor→Pin and pin the top, bottom, leading, and trailing spaces to the superview.

    This setting will result in the map being resized to fill the view as the iPad is rotated.

  6. Open the Size inspector in the Inspector selector, select the Map View, and make certain that it is sized to fill the View. In particular, make certain the X and Y origin points are zero.

  7. Drag a Toolbar from the Library in the Utilities area onto the Map View and set its origin to 0, 20 in the Size inspector.

    This places it just below the status bar. Delete the Item bar button item that’s part of the Toolbar.

    You still need to connect the toolbar to the view controller in DetailViewController, the MapController’s superclass.

    An arrow button.

  8. Select Map Controller on the Document Outline, click the Connections icon in the Inspector selector bar to open the Connections inspector, and then just drag from the toolbar Outlet in the inspector to the toolbar in the MapController in the Canvas or the Document Outline.

    You could also right- or Control-click the Map controller in the Document Outline to open the Connections window and then click and drag from there.

You probably want to have a nice segmented control in the toolbar to allow the user to select a particular Map type — standard, satellite, or hybrid. Fortunately, the code that implements the Split View Delegate methods that add the Road Trip button won’t get in the way of that. It will just insert the Road Trip button on the extreme left of the toolbar.

But what if you want the Type selector to be aligned right? All you have to do is add in Interface Builder (or in the code itself) a Flexible Space Bar button item — space that’s distributed equally between the other Bar Button items on the toolbar and the segmented control.

To do that, do the following:

  1. To set up a segmented control (the Map Type selector on the toolbar), drag a Flexible Space Bar button item onto the toolbar in the MapController.

    Setting up a segmented control in Xcode.

    This item will expand appropriately to make your segmented control aligned right (along with any other button you may add subsequently).

  2. Drag a Segmented Control from the Library onto the toolbar and place it to the right of the Flexible Space Bar button item.

    Preview of an app screen in the Xcode workspace.

  3. With the Segmented Control selected in the Canvas or the Document Outline (it’s inside a new bar button item in the Document Outline), click the Attributes Inspector icon in the Inspector selector bar to open the Attributes inspector; in the Segmented Control section, change the number of segments to 3.

  4. Still in the Segmented Control section, make sure that Segment – 0 is selected in the Segment menu, enter Standard in the Title field, and then press Return.

    The Segment menu should change to Segment – 0 Standard.

  5. Now select Segment – 1 in the Segment menu and enter Satellite in the Title field; then select Segment – 2 and enter Hybrid in the Title field.

    Be sure to press Return after each change.