7

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.

Planet:Calypso_Continent:Eudoria (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)

crenfrow
  • 159
  • 1
  • 7
  • Do you need different "zoom levels"? If the map is not too large, you might be able to implement a map view by incorporating a `UIScrollView` with a `UIImageView`. Suggestion: [How do I pan the image inside a UIImageView?](http://stackoverflow.com/questions/419710/how-do-i-pan-the-image-inside-a-uiimageview) – Andrew Nov 15 '12 at 18:51
  • i'm looking for something like this too. A Maps App like Map, with the pins and stuff with a custom map image. – Pedro Vieira Nov 15 '12 at 18:54
  • If you want something more sophisticated than just zooming and panning, you should look into 3rd party libraries. From what I know, you can't use your own map tiles with `MKMapView`. – Andrew Nov 15 '12 at 19:00
  • @andrewap I would like to allow the user to zoom in as it would be easier for the user to see details on the map, so yes it is quite large. :/ I'll show you what I mean by an image now that I have over 10 rep. – crenfrow Nov 15 '12 at 19:07
  • 2
    You might want to take a look at the new MapKit APIs for this that Apple introduced in iOS 7. – Sam Spencer Dec 02 '13 at 02:37

2 Answers2

2

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

Andrew
  • 2,770
  • 1
  • 22
  • 29
  • As much as this SDK looks fantastic I can't help but wonder is there an easier way to just add a simple coordinate overlay? I'll add my thoughts to the main question. – crenfrow Nov 16 '12 at 00:19
  • With adding the image as an overlay, you'll need to arbitrarily assign it to somewhere on the map, and implement limits to where users can pan to. – Andrew Nov 16 '12 at 00:56
  • The `UIScrollView` + `UIImageView` solution might be the simplest to implement, without having to creating map tiles and so on. You can always give it a quick try and see if it works for your application. – Andrew Nov 16 '12 at 00:59
  • As far as I can tell, TileMill doesn't support custom map images. I can only create overlays of the world map or of a certain selection. This is great for real-world maps but doesn't apply to my project. – crenfrow Nov 17 '12 at 19:05
1

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.

Craig
  • 8,093
  • 8
  • 42
  • 74
  • 1
    In case you're interested, here is someone's experience with adding overlay map on top of existing map tiles: http://www.shawngrimes.me/2010/12/mapkit-overlays-session-1-overlay-map/ – Andrew Nov 15 '12 at 21:02
  • @Andrew the link is no longer functional – coder Sep 02 '19 at 06:42