Efficient custom tiled maps with custom zoom levels and zoom factors

Question

I have to implement a very custom tiled map layer/view on iOS5/6 (iPhone), which loads tiles as Images and/or data (JSON) from a server. It is like google maps, but at certain points very specific, so I cannot easily use a solution such as:

1. google maps or
2. route-me (used by MapBox)
3. CATiledLayer in combination with UIScrollView

The thing is: None of the solutions out there really do help me, because of my specific specs. If you think, there is a suitable solution, please tell me!!!

If not:
Help me to find the best possible solution for my case!!!

"But why can I not use these beautiful solutions?"
There are a few limits, that have to be known:

1. We only use 3 zoom-levels (0,1 and 2)

2. Every tile has a number of 9 subtiles in the next zoomlevel (= zoom factor 3) (not like most of the other kits do with 4 subtiles = zoomfactor 2)

3. The first layer has an initial size of (speaking in pixels / points is the half) 768*1024.
   The second layer is three times wider and higher (zoomfactor 3!!!) -> 2304*3072
   The third layer is equally wider and higher than the 2nd -> 6912*9216

4. Each tile that comes from the server is 256x256 pixels

5. So every sublayer 9-times the number of tiles (12 on 1st layer, 108 on 2nd, 972 on 3rd)

6. Every tile has a background image (ca. 6KB in size) (loaded as image from the server) and foreground-information (loaded as JSON for every tile from the server - 10-15KB in size)
   -> the foreground information JSON contains either an overlay image (such as traffic in google) or local tile information to be drawn into the local tile coordinate space (like annotations, but per tile)

7. I want to cache the whole background-tiles on disk, as they never change

8. Either I want to cache the overlay-tile-images/overlay-tile-information for each tile for a certain amount of time, until it should be reloaded again

9. Zooming should be with pinching and double-tapping

A few of my considerations:

1. The caching is not the problem. I do it via CoreData or similar

2. I thought of a UIScrollView, to show smooth scrolling

3. I'd like to use pinching, so every time I break through the next zoomlevel, I have to draw the next zoom-level tiles

4. The content should only be drawn in the visible area (for me on iPhone 5 320x500)

5. Not visible tiles should be deleted, to be memory efficient. But they should not be deleted instantly, only if a tile is away a certain amount of pixels/points from the visible center. There should be a "display-cache", to instantaneously show tiles, which were just loaded and displayed. Or is there a better technique out there?

6. I can load the background instantly from disk or from the server asynchronously, as I know which tiles are visible. So do I with the tile-JSON. Then I extract the JSON-information for the tile ("is the overlay a direct image or information such as a city name, which I have to draw into the tile") and draw or load the overlay (from DB/Disc or Server)

7. Is UIScrollView efficient enough to handle the max size of the tile view

8. Should I use a CALayer as sublayer to draw into it? Should I use Quartz to draw directly on a big "canvas"?

Now it's your turn !!!

Answer 1

Apple has an example that shows zooming into a single image very deep. They use a CATiledLayer for this.

The example can be found here: http://developer.apple.com/library/ios/#samplecode/PhotoScroller/Introduction/Intro.html

The example works with subtiles that are stored on the phone but maybe it can be adapted to your problem.

Answer 2

I have used my own TiledLayer implementation for these type of non-standard tiling issues that CATiledLayer does not support (and because CATiledLayer still has some unsolved bugs).

That implementation is now available on Github.

Fab1n: this is same implementation that I already sent you by e-mail.

Answer 3

I came up with a very neat and nice solution (custom TiledLayer implementation):

I don't use CATiledLayer as contentView of the scrollView anymore. Instead I added a CALayer subclass to it and added my tiles to it as sublayers. Each tile contains the tile bitmap as contents. When zooming in with the scrollview I switch tiles manually based on the current zoomlevel. Thats perfect!!!

If somebody wants to know details of the implementation -> no problem, write a comment and I post it here.

---

EDIT:

Details about the implementation:

The implementation in fact is really easy:

1. Add a UIScrollView to your View/Controller View
2. Add a UIView (from now on referred to as tileView) as contentView to the ScrollView - same size as ScrollView size (this is completely zoomed out mode - factor 1)
3. Activate zooming (I had minimum zoom factor 1 and max. 9)
4. When you now place an image into the tileView, zooming into level 9 will give as a very unsharp pixelated image - that's what we want (I'll explain why)
5. If you like crisp clear images when you zoom in, you should add CALayer instances (tiles) with addSublayer: to tileView
6. Assuming you have a zoomFactor of 3 (I had - meaning 1 Tile in layer 0 - zoomFactor 1 will consist of 3x3 = 9 tiles in layer 1 - zoomFactor 3)
   1. In layer 0 say you put 3x4 tiles with 243x243 (3 times devidable by 3) pixels (as sublayers to tileView). You put your same size tile images as CALayer contents. Zooming to zoomFactor 3 makes them blurry (like old google maps)
   2. When you hit zoomFactor 3 remove all 12 layers from superlayer and replace them with 3 times smaller ones (81x81 pixels). You get 9 times more layers in a whole.
   3. Now that you have 3 times smaller tile layers, the trick is the .contents property of CALayer. Even if the layer is 81x81, the contents (your image) are still full resolution, meaning if you put a 243x243 pixels image as contents of your 81x81 pixels CALayer tile, on zoomFactor 3 it looks like a 243x243 pixels tile!!!

You can go with that on any zoomFactor (3,9,12) deeper. The tiles get smaller and smaller, but setting the original image as contents, the tile will look crisp and sharp at the exact zoomFactor they are placed in.

If you like your tiles look sharp even between the zoomFactors, you have to set a 3 times taller image as .contents. Then your tile is crisp and sharp even short before you're passing the next zoomLevel.

The one thing you have to figure out is, removing all tiles on a layer when passing the zoomLevel factor is not efficient. You only have to update the visible tiles in rect.

Not the nicest of all solutions, but it works and if someone does a well designed library maybe there is potential for this to be a clean solution.