Chapters
Chapters

Chapters

Hide chapters

UIKit Apprentice

Third Edition · iOS 18 · Swift 5.10 · Xcode 16

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Getting Started

Section 1: 8 chapters
Show chapters Hide chapters

Checklists

Section 2: 12 chapters
Show chapters Hide chapters

My Locations

Section 3: 11 chapters
Show chapters Hide chapters

Store Search

Section 4: 13 chapters
Show chapters Hide chapters

29. Maps
Written by Fahim Farook

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Showing the locations in a table view is useful, but not very visually appealing. Given that the iOS SDK comes with an awesome map view control, it would be a shame not to use it :]

In this chapter, you will add a third tab to the app that will look like this when you are finished:

The completed Map screen
The completed Map screen

This is what you’ll do in this chapter:

  • Add a map view: Learn how to add a map view to your app and get it to show the current user location or pins for a given set of locations.
  • Make your own pins: Learn to create custom pins to display information about points on a map.

Add a map view

First visit: the storyboard.

➤ From the Objects Library, drag a View Controller on to the canvas.

➤ Control-drag from the Tab Bar Controller to this new View Controller to add it to the tabs – choose Relationship segue – view controllers.

➤ The new view controller now has a Tab Bar Item. Change its title to Map via the Attributes inspector.

➤ Drag a Map Kit View into the view controller. Make it cover the entire visible area of the screen leaving out the navigation bar at the top and the tab bar at the bottom – the size of the Map View should be 375 × 574 points.

➤ Add left, top, right, and bottom Auto Layout constraints to the Map View via the Add New Constraints menu, pinning it to the main view.

➤ In the Attributes inspector for the Map View, enable Shows: User Location. That will put a blue dot on the map at the user’s current coordinates.

Enable show user location for the Map View
Enable show user location for the Map View

➤ Select the new view controller and select Editor ▸ Embed In ▸ Navigation Controller. This wraps your view controller in a navigation controller, and makes the new navigation controller the view controller displayed by the Tab Bar Controller.

➤ Change the view controller’s — not the new navigation controller, but its root view controller — Navigation Item title to Map.

➤ Drag a Bar Button Item into the left-hand slot of the navigation bar and set the title to Locations. Drag another into the right-hand slot and set its title to User. Later on you’ll use nice icons for these buttons, but for now these labels will do.

This part of the storyboard should look like this:

The design of the Map screen
The design of the Map screen

➤ Run the app. Choose a location in the Simulator’s Features menu and switch to the Map. The screen should look something like this — the blue dot shows the current location:

The map shows the user’s location
The map shows the user’s location

Sometimes, the map might show a different location than the current user location and you might not see the blue dot. If that happens, you can pan the map by clicking the mouse and dragging it across the Simulator window. Also, to zoom in or out, hold down the Alt/Option key while dragging the mouse.

Zoom in

Next, you’re going to show the user’s location in a little more detail because that blue dot could be almost anywhere in California!

Pvadkocx yvu Ewuq xijpam keuql em mi nsa ufoy’q bafuruil
Lpomxofh mhe Ocij zalkeq dousw al gu yka eyoj’y bataxeoj

Show pins for locations

The other button, Locations, is going to show the region that contains all the user’s saved locations. Before you can do that, you first have to fetch those locations from the data store.

Pju wan grufy papm daq nyo bonan sipuhuufz
Dra cok zpukz kimx mep cqe vubuy yucaxuezq

Show a region

Tapping the User button makes the map zoom to the user’s current coordinates, but the same thing doesn’t happen yet for the location pins.

Kle beb xoow wiiqd ad lu xog idn yaum zakeg mularaabb
Nco xiy noud vuebj ic ye vax owz nier nahef kesunoelz

Make your own pins

You made the MapViewController conform to the MKMapViewDelegate protocol, but so far, you haven’t done anything with that.

Create custom annotations

➤ Add the following code to the extension at the bottom of MapViewController.swift:

Kyo udticoqeemk ige roef osp giez
Pzu apgorowuuxs ozu jeop ukl nuov

Guard

In the map view delegate method, you wrote the following:

Add annotation actions

Tapping a pin on the map now brings up a callout with a blue ⓘ button. What should this button do? Show the Edit Location screen, of course!

Tyi Dumebeol Xuhiimh zfmaum ar tirpilfet to exg rrbaa jzyuisz
Sni Femoguob Cuvoexy gcpoog ol muvfepbuq bi umf dldoo smfaixq

Live-updating annotations

The way you’re going to fix this for the Map screen is by using notifications. Recall that you have already put NotificationCenter to use for dealing with Core Data save errors.

Wildcard

Have another look at that closure. The _ in bit is the parameter list for the closure. Like functions and methods, closures can take parameters.

28. The Locations Tab
30. Image Picker
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now