How to make a map-like view that has a custom map image?

Question

Like the title says, I need to make a very customized view that behaves like MKMapView however uses a custom image. Perhaps it'll be easier to share what the end goal is.

The app I'm trying to make is a supplement to an MMO I play from time to time, it's also my semester project for an iOS class I'm taking. Anyway, the idea is to create an app that displays an interactive map from the game on the screen. The next step is to add some kind of overlay to the app for annotations so as to allow the user to add custom locations directly to the map.

(this is one of the images I would add)

So, here's the summary...

• how to add an image and allow it to be scrollable and pinch-able like MKMapView
• how to go about setting up an overlay with coordinates that allow for custom locations

Any and all tips would be appreciated. :)

Updates:

@andrewap showed me http://mapbox.com/mobile/ which looks fantastic and it seems like it would be just what I need but I don't think it's quite within my skill level as a beginner. So this question is still open if any other easier/simpler methods are found, assuming there are any.

I tried to familiarize myself with TileMill a bit and as far as I can tell does not support custom map images (as in fictional map images like the one pictured earlier) therefor does not entirely answer my question. However it's great if you're looking to have a fully functioning custom real-world map image.

(Note: I am very new to programming and even newer to objective-C/iOS programming, please keep that in mind while answering)

Answer 1

Given the fact that you want maps functionality with custom map images and data, I would suggest looking into 3rd party SDKs that allow you to bring your own tiles. To get you started, have a look at MapBox and TileMill:

• MapBox iOS SDK — as an MKMapView alternative to display custom map tiles
• TileMill — to create custom map tiles from your game map image

I personally haven't done this before, so unfortunately I can't give you specific directions beyond this. Here's an example of using custom images as maps: http://macwright.org/2012/08/13/images-as-maps.html

Answer 2

There's a very good tutorial for what you're doing in the WWDC2010 example code. They take an image and cut it into quarters, and cut that into quarters and so on until the image tiles are manageable and then use a UIScrollView to show them off. No implementation of pins though. You could use an actual MKMapview and put the image in as as map tiles using the example from TileMaps (also from WWDC2010). You'd need to tag your image with coordinates, maybe turn it into GeoTiff, then run it through MapTiler. Quite how you map your image to real world coordinates I don't know, but if you're not planning on allowing the user to plot routes you can just adjust your pins' (MKAnnotations) coordinates so they appear on the right places of your map.