Question

I have a large set of google maps api v3 polylines and markers that need to be rendered as transparent PNG’s (implemented as ImageMapType). I’ve done all the math/geometry regarding transformations from latLng to pixel and tile coordinates.

The problem is: at the maximum allowable zoom for my app, that is 18, the compound image would span at least 80000 pixels both in width and height. So rendering it in one piece, then splitting it into tiles becomes impossible.

I tried the method of splitting polylines beforehand and placing the parts into tiles, then rendering each tile alone, which up until now works almost fine. But it will become very difficult when I will need to draw stylized markers / text and other fancy stuff, etc.

So far I used C# GDI+ as the drawing methods (the ol’ Bitmap / Graphics pair).

Many questions here are about splitting an already existing image, storing, and linking it to the API. I already know how to do that.

My problem is how do I draw the initial very large image then split it up? It doesn’t really need to be a true image/bitmap/call it whatever you want solution. A friend suggested me to use SVG but I don’t know any good rendering solutions to suit my needs.

To make it a little easier to comprehend, think it in terms of input/output. My input is the data that I need to draw (lines, circles, text, etc) that spreads across tens of thousands of pixels, and the output must be the tiles. I really don’t care what the ‘magic box’ is, and I don’t even care what the platform is.

Answer 1

I ran into the same problem when creating custom tiles, and you are on the right track with your solution of creating one tile at a time. You just need to add some strategy to the process. What I do is like this:

Pseudo code:
for each tile {
  - determine the lat/lon corners of the tile.
  - query the database and load the objects that are within this tile.
  for each object{
    - calculate the tile pixels on which the object should be painted. [*A*]
    - draw the object on the tile.
    - Save the tile. (you're done with this tile).
  }
}

alternatively:

    Pseudo code:
    - for each object to be drawn {
      - determine what tile the object should be painted on.
      - calculate the tile pixels on which the object should be painted.[*A*]
      - get that tile, if it doesn't yet exist create a new one.
      - draw the object on the tile.
      - Save the tile. (you might need to draw more on this tile later)
}

I do this with Perl and the GD library.

[*A*] When painting objects that span more than one tile, if the object begins on the current tile then part of it will be left out automatically because you’ll be attempting to paint outside the tile, while if the object began on the previous tile and you’re drawing the second part then the pixel numbers should be negative, meaning that it began on the neighbor tile.

This is a bit hard to explain in a written post so please feel free to ask for further clarification if you need it and I’ll edit the answer.