How to draw a tile in real-time?

I’m writting a small travel application. In the application I want to show an area map, however if I store rendered tiles the app size grows way too high. I would like to render OSM data in realtime to keep a smaller footprint. After looking over the available Frameworks none seems to be aimed towards iPhone/iPad and therefore I should render my own tiles. I’ve read the documentation about data primitives and so on, however I’ve got several questions:

  1. I guess the GPS coordinates shall be translate to mercator projection in order to get a flat earth. ¿Correct?
  2. ¿What are the zoom levels proposed by Open Street Maps? If I’m not mistaken each tile is 256x256 pixels therefore the amount of tiles would be the image width (or hight) divided by 256. However, there should be a minimum image size (or startup image size) and then it would be multiplied by a value. ¿What is that initial image size? ¿What are the multipliers?
  3. ¿How to get a tile drawn? This is not a technical or language-oriented question… What I mean is if a user requests a specific tile how would it get drawn… When drawing the whole map I guess you could get the coastal lines, then water bodies, and render the points as a closed area… However, the tile could be away from a border, and an exact area would be missing a point from the previous or next tile… I could make my tile larger and then cut up, but can’t guarantee there are all the required points… Drawing the whole map and then cutting it into pieces wouldn’t be a solution as it would take too much time… How could I face this rendering issue?

Thank you

You should consider to draw the map as real time vector graphics and not as tiles.

There are some apps at that can do so, but as far as I see they are not opensource.

What app comes near your aims?

Right now I’m using a project called Route-ME to show an offline map on my application. However it is using a database where I store all the tile PNG images. Althought this works great the database size is around 50 MB while OSM data is 2 Mb for the same area.

The Route-ME project allows custom data sources, however it requests tiles from a data source (Usually a website but as stated it could get it from a database). My goal is adding a new source which is the renderer for the tiles… Therefore i should reply with the tile. Route-ME can’t handle vector graphics.

Another reason to use OSM data is I could add offline routing in a future release which can’t be done with pre-rendered tiles.

The closest I got is “Memphis” ( however I would rather not use glib (I’m even uncertain it can be used on an iPhone App).


1> yes, projecting to google mercator is generally the most useful thing to do, there are several libraries for doing this such as Proj.4
2> the main map on OSM (as well as google maps and others) allow 1-18 for zoom levels (in my own app, PocketEarth, we allow 0-19)… if your app is for a single city, then the zoomed out views make less sense and you can limit to level ~12-14 as appropriate… each zLevel is exactly doubling the magnification where level 0 would represent the entire earth as exactly 1 256x256 tile. You can use another size, but 256 makes a lot of sense. If your are supporting Retina display, each tile should be doubled at 512x512
3> for each tile you need to render, you must collect, filter, and sort the OSM data for that corresponding area, and then draw the elements one at a time based on some stylization rules which determine how each object should look based its OSM features (metadata).

basically rolling your own renderer is a Lot of work, you probably want to look into what libraries/toolkits are available…


Do you know of any libraries/toolkits available for creating an OSM OpenGL ES 2.0 renderer for iOS?
Btw, your PocketEarth app is awesome, and obviously does the real time rendering. Can you maybe share some insights / source code / anything useful for others to achieve this? Thanks.


Were you able to create a new source for Route-Me that will render the tiles in real time? If yes, can you share some useful info on how to do this? Thanks.