DevFright

Learn How to Create iOS Apps

How to Use Annotation and Marker on a SwiftUI Map

by Leave a Comment

I have written about MapKit a few times before such as a tutorial about adding a Map to your SwiftUI app and the MKPointAnnotation tutorial from back in 2013, which uses Swift and UIKit.

In this tutorial we’ll look at using the Annotation and Marker structures that provide the means to getting annotations on your map to mark locations.

SwiftUI makes it easy to display locations on a map. For apps that target iOS 16 or later, Annotation and Marker are the way to go. For those that are targetting lower versions of iOS the equivelant to Marker is MapMarker and the equivalent of Annotation is MapAnnotation. Today we’ll look at Marker and Annotation.

[Read more…]

How to add a Map to a SwiftUI App

by Leave a Comment

Many iPhone apps use maps to display helpful information to the user, often showing the current location. Uses include maps for navigation, finding nearby places, adding location to notes, reminders, and so on. This short tutorial will teach us two ways to add a map to an app.

Using MapKit

The MapKit framework makes adding a map to your app simple. You can first begin by importing MapKit into your view as follows:

import MapKit
[Read more…]

MKMapView and MKMapViewDelegate Introduction in Swift

by 6 Comments

If you need to show a map to your users in iOS, one way to accomplish this is to use the MKMapView class. Mix this with the MKMapViewDelegate and you have the ability to detect movement on the map, detect the state of the map such as failure loading it as well as several other items you can monitor.

In this tutorial we’ll add a map to the view, allow the current location of the phone to be zoomed to, and allow the user to switch between the different map types which are available meaning Standard, Satellite, and Hybrid. We will also learn how to implement a delegate method and have the map move each time the user moves.

MKMapView Tutorial

The first step is to create a Single View Application by opening Xcode and creating the new project. You can follow this tutorial if you are unsure how to create a new project. Make sure you select the language as Swift. You can uncheck unit tests, core data, and other optional extras.

Navigate to Main.storyboard and drag out a UIToolBar and seat it at the bottom of the view. Click the UIBarButtonItem (named Item) and rename the text attribute to “Current Location”. Drag out a Segment control and put that on the toolbar also. You might choose to use a flexible spacer between the button on the left and the segment to force them to the left and right edges of the toolbar. [Read more…]

MKDirections Tutorial

by 29 Comments

iOS 7 has given app developers the ability to add directions to their apps thanks to a new class in the Map Kit Framework called MKDirections. In this tutorial we will take a look at this class and create a simple app that lets you search for an address and calculate the distance as well as receive route-based directions from your current location. This tutorial will work on either an iOS device or on the simulator. [Read more…]

A Closer Look at the MKMapViewDelegate Protocol

by Leave a Comment

The MKMapViewDelegate is a protocol that defines how your app can receive updates when changes occur to either the map or any annotations on the map.

As of iOS 6 there are 18 methods available in 7 categories that you can optionally use to receive the updates. Today, I want to cover what each of these methods can do and how you can use them to help bring more functionality to your app.

MKMapView operations often run asynchronously which is why the MKMapViewDelegate comes in handy as actions are processed while you continue using the map and then your app is notified of various changes as available and needed.

This post is not a tutorial as such. Instead, I am just listing the various methods along with details of how they work and what they do. If you want to see some examples of how they are implemented, take a look at the categories listed to the right and select the Map Kit Framework to see tutorials about the various methods.

Responding to Map Position Changes

There are two methods within this category. These are mapVew:regionWillChangeAnimated: and mapView:regionDidChangeAnimated:

[Read more…]

The MKUserLocation Class and How to Customise It

by 1 Comment

location-dotThe MKUserLocation is a class that is used to create an annotation for the users current location. This particular class is responsible for the blue dot you see on the screenshot to the left. Although I call it a blue dot, it is actually a type of annotation specifically used for the current location of the device.

The MKUserLocation class has 5 properties and no methods. The location, updating and heading property are readonly as you cannot set your location programatically, likewise you cannot update your heading programatically. The way you would set these properties is simply by pointing the phone in another direction or by walking somewhere else. The new values would then be provided to you.

The title and subtitle properties are not readonly. What this means is that you can change the text that is provided when you tap on the blue dot. By default it says “Current Location”. If you set the title and subtitle to some custom text, you can display something different if you wish.

You would do that with the following code:

self.mapView.userLocation.title = @"I'm Here";
self.mapView.userLocation.subtitle = @"Come and Find Me";

title-subtitleThe result would be what you see to the right.

The MKUserLocation class is relatively simple. It provides you with where you are, where you are heading and lets you know if the location is being updated. Additionally, we have seen that it also allows you to set the title and subtitle of the annotation as pictured to the right.

This ends this brief tutorial. Next time, we’ll look at how you can customise the look of the MKUserLocation annotation just in case you don’t want to use the standard blue dot.

MKPointAnnotation Tutorial

by 24 Comments

New post added for Marker and Annotation that can be used in SwiftUI.

How to Use Annotation and Marker on a SwiftUI Map – May 2024 (iOS 18).

Updated for Swift and UIKit (built with iOS 18).

The MKPointAnnotation is the basic version of an MKAnnotation that can be used to display a pin along with a title and subtitle. These can come in handy for displaying basic information on a map. If you want to do more than show a point on a map with a title, then you will need to use MKAnnotation and MKAnnotationView. We’ll look at both of those later in this tutorial. Note that you can change the pin as well and provide a custom image. I’ll show you how in the tutorial below.

The screenshot to the left shows what an MKPointAnnotation looks like in its basic form. This is what this short tutorial will cover today. To get started, create a new application and select Swift and Storyboard as the options.

[Read more…]

MKMapView and MKMapView Delegate Tutorial

by 9 Comments

The Map Kit Framework is what you use to add a map to your application. There are a number of classes found within the framework that let you provide a rich experience for your users. Today we will look at two of the basic ones. These are MKMapView and MKMapViewDelegate. We will add more tutorials over the coming weeks from the MapKit framework and when iOS 7 launches, we’ll begin adjusting the tutorials accordingly. [Read more…]