Swift Map of a Location Address

Mazen Kilani
Geek Culture
Published in
4 min readJul 15, 2021

--

Swift MapKit Will Display a Map of a Location Street Address

AppsGym ToDo App Map of a Location Address

Scenario

Our app ToDo Note Details view will have a map button, where the user can tap to show the map of the Location text field address.

Technique

We shall utilise the MapKit framework, GLGeocoder(), and geocoding. Geocoding is the process of converting addresses (like a street address) into geographic coordinates (like latitude and longitude), which you can use to place markers on a map, or position the map. Reverse geocoding is the process of converting geographic coordinates into a human-readable address (ref Google).

In our Map view, we shall convert the Location address text to a placemark coordinates, which are then used to position and draw the map. Hence, we shall utilise the GLGeocoder geocodeAddressString(..) function, with location text as parameter, to retrieve a placemark coordinates, then use an MKPointAnnotation() to draw a map pin (annotation) with the location address as the pin title.

GIF Details Map Button Segues to the Map View

Audience

The article is for Swift developers who seek complete, proven, code-centric solutions to speed up their development projects. The code snippets below can be used with minimal customisation.

App Model

We based the article on the AppsGym ToDo model app, published on Apple’s App Store (as 8ToDo), and you can download the complete Xcode project on AppsGym.com, for free.

User Interfaces

We need a map UIButton on the Details view, which will segue to the Map view. The Note Map view will show the map over the whole screen, using an MKMapView, and highlighting a red pin (annotation) with its title as the location address.

ToDo Details View Map Button
Map View Pin with Address

The Details and Map storyboards show the Details view Map button and a simple ‘Show’ segue, while the Map view has only an MKMapView covering the whole view area.

Note: In your app, you may choose a map view which covers part of the view, or even as a pop-up modal over the Details view (ref our article on Swift Floating Pop-Up).

Logic

NoteDetailsViewController.swift will contain a map UIButton, which will initially show if a location has been entered (by changing the button image, from grey to colourful). If there is a Location field text, the button will segue, using Show ‘Push’, to the NoteMapViewController.swift. We can establish the segue directly on the Storyboard, or programmatically in a UIButtonAction. Our model app uses direct storyboard segue, as it’s a relatively simple setup. Note: If you are using SwiftUI, then use the programmatic approach.

As we need the actual location address in NoteMapViewController, we can either pass, via the segue, the Location text field value, or the complete note object. The object approach allows us to access all the note other attributes, such as title, folder, image, etc. In our model app, we shall pass the note object to allow for future flexibility.

The NoteMapViewController.swift acts as the MKMapViewDelegate, to draw the map and position the annotation pins.

We shall pass the location attribute with the note object, so we shall use geocodeAddressString(..) to convert the location text string to a CLPlacemark, and then extract the placemark coordinates to position the annotation pin.

Note: Should you choose a UITextView in your app, rather than a UITextField, then you will need to concatenate the address components into a single text string, which you then submit as a parameter to geocodeAddressString(..).

Code

NoteDeatils ViewController.swift Map Button & Segue to Map View

NoteMapViewController.swift Initialise

NoteMapViewController.swift viewDidLoad()

NoteMapViewController.swift Delegate Methods

What if the Location text is invalid?

If the location field text is invalid (e.g., ‘BlahBlah’), then MapKit will draw a default map based on the user overall location, usually the country view.

Default Map if Note Location Field Has Invalid Text (User in Australia)

The article covered the complete setup, logic, and code to display a map of the note location address text field. The note details view map button will segue to a dedicated map view, which acts as the MKMapViewDelegate and draws the map and any annotated pins. Hope you find the article useful for your app. Thanks for reading!

--

--

Mazen Kilani
Geek Culture

I published 47 Swift iOS apps/games and 2 Flutter Android apps. I share complete Xcode projects, free (no ads), at AppsGym.com.