Adding Custom Overlays to iOS MapKit Framework



This is part 2 of a 2-part series on how to create custom overlays for the MapKit framework on iOS. View part 1 of this series here.

Creating Custom Overlay in iOS

Everything we have done up to this point has been to create the tiles we will use in our project. Now that we have created those tiles, we need to add them to our project.

For this, we will use a sample project from Apple called Tile Map. I have a working iOS project that uses custom overlay at Github. We are going to copy a few classes from this project, so go ahead and grab the zip-ball and open it in Xcode.

You will need to copy the following files into your own project:

  • TileOverlay.h
  • TileOverlay.m
  • TileOverlayView.h
  • TileOVerlayView.m

Be sure to select the box to “Copy items into destination group’s folder.” At this point I am going to assume that you have already created a View Controller for your map. If not, go ahead and create one. In the .m (implementation) file of your map View Controller, we are going to import the TileOverlay.h and TileOverlayView.h files. Your map View Controller should now look something like this:

[code lang=text]
#import "mapViewController.h"
#import "TileOverlay.h"
#import "TileOverlayView.h"

@implementation mapViewController

– (void)viewDidLoad
NSString *tileDirectory = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Tiles"];
TileOverlay *overlay = [[TileOverlay alloc] initWithTileDirectory:tileDirectory];
[map addOverlay:overlay];

map.mapType = MKMapTypeSatellite;
MKCoordinateRegion CSC;

// Defines the center point of the map = 33.874809; = -98.521129;

// Defines the view,able area of the map. Lower numbers zoom in!
CSC.span.latitudeDelta = .003;
CSC.span.longitudeDelta = .003;
[map setRegion:CSC animated:YES];

– (MKOverlayView *)mapView:(MKMapView *)mapView viewForOverlay:(id )overlay
TileOverlayView *view = [[TileOverlayView alloc] initWithOverlay:overlay];
view.tileAlpha = 0.6;
return [view autorelease];

The only other change that we have to make at this point is to add some code to our app delegate file. In the delegate header file you will need to add some code (highlighted below):

[code lang=text]

@class mapViewController;

@interface msuAppDelegate : NSObject {
UIWindow *window;
mapViewController *viewController;

@property (strong, nonatomic) UIWindow *window;
@property (strong,nonatomic) mapViewController *viewController;


We still don’t have tiles in our project at this point, so go ahead and create a directory on your Desktop named “Tiles”. Copy all of the tile sub-directories and the tilemapresource.xml into the “Tiles” folder that you created on the desktop. Now, drag the “Tiles” folder into your iOS project. Be sure to select “Copy items into destinations group’s folder” and “Create folder references for any added folders.”

The last step is to connect your Mk Map View in storyboard to delegate. Once we do that, the Custom Overlay for MapKit should be working. Click the Mk Map View in storyboard, use control + click, then drag, to the Map View Controller Icon. View the screenshots below.

At this point go ahead and run your program to see if everything is working. If you have any problems, please leave me a comment below, and I will modify this tutorial. You can reference the iMustangs project  on Github for an example of integrating custom overlays into an iOS project.

12 responses to “Adding Custom Overlays to iOS MapKit Framework”

  1. […] This is part 1 of a 2-part series in “How to Create Custom Overlay Tiles for iOS MapKit Framework.” View part 2 here. […]

  2. Hello, I need your help.

    I’ve got the Map Tiles set up and everything. It works great opening in Google Maps, everything is spot on.

    However, when I import the tiles into your project. The tiles are set all the way at the zoomed out level, not where it is suppose to be. The software I used to render the tiles, rendered them in sizes 0-4.

    Will that be okay?

    1. Are you saying that the map starts all of the way zoomed out or that you can’t see the tiles?

      1. Works great in ios5, but does it work with os6?

        1. I haven’t done much iOS coding lately. Let me know 😉

  3. @Eric, this project shows iOS map only in iOS 6. (as, i get one legal button on map and clicking on it shows @Apple Inc.) Does this mean the overlay hasn’t added or something else? But when i comment the [mapView addOverlay:overlay]; line , it shows close view of current location while on uncomment it shows zoom zoom out view. And in both the cases it shows legal symbol on map(which implies it is iOS map)

    1. Hi Vishal,

      I have not tested this code with iOS 6. The MSU2U team at Midwestern State University is working on this app, and they should be updating it this semester.

  4. Hi,

    Nice article!
    But I found this project very useful and more simple to implement:

    1. Thanks for the link to the project. I wonder if it’s compatible with the latest versions of iOS as well?

  5. Hello Eric,

    Actually i want to rotate a MKMapPolyLine around the user location in MapKit framework. can you please assist me on that.


    1. Himanshu,

      I have not used iOS lately.

      I hope you had luck with this.

  6. I do not think the title of the article is correct – in the project only ONE custom overlay is added not SEVERAL overlayS.
    The reason I found this page and read it that I was looking for how to handle multiple custom overlays.
    I mean, how is it possible to have several MKOverlays and only one MKOverlayView ?
    For example, Google Maps has zIndex – position of the overlay in the overlays stack,
    and there is no such think in MapKit.
    How do I know which overlay is drawn first?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.