I believe I have created the first Philippine-related Google Maps mashup that is more than just placing points on a map. I remembered recently that I have scanned before an aerial photography plate of the University of the Philippines, Diliman area from the early 90s. (These plates are used by U.P. Geodetic Engineering students in their courses.) So last night, I had this brilliant idea to create a custom map in Google Maps with the aerial photography as a new map type. So now I’m proud to present my University of the Philippines, Diliman Map Mashup located at my dormant U.P. community site ASwalk.net (which I plan on reviving soon). Please select the “Aerial” map type to view the “new” imagery.

Since I had no coordinate references for the plate, I just tried to match my scan on the existing lo-res satellite imagery in Google Maps to determine its placement. This means that aerial photography as it appears on my mashup should not be used to get GPS/coordinate references. I’m also pretty sure that the orientation is 1 or 2 degrees off since I remembered rotating my original scan so that University Avenue is completely horizontal (i.e., east-west), which is not the case in the real world. (Well, University Avenue is supposed to be parallel to the equator, but apparently, it isn’t.)

My aerial map type only goes from zoom level 14 to 17. The current Google satellite imagery for Metro Manila only goes to level 14 so there is only one level of overlap. I hacked the map so that areas outside the aerial imagery will return Google’s imagery at zoom level 14.

Making the map tiles (the basic image component in Google Maps) was easy but tedious. Every zoom-up in Google Maps is equivalent to an increase of four times in resolution (twice in both dimensions) and this means that each tile is subdivided into four quadrants in the next higher level. That makes producing map tiles quite simple, but it was tedious since I had to manually cut up and save as JPEG all 77 existing tiles for I have no image scripting tools handy. (Hmmm… this makes a pretty strong case for trying out GIMP’s scripting features.)

Making the tiles load in Google Maps was a bit more complicated. To load up tiles to the map, you neet to define the getTileUrl() JavaScript function. (See the Google Maps API documentation.) This function takes a coordinate point (not in degrees) and a zoom level as arguments and it should return a URL to the map tile image. I did not find a good resource to predetermine what coordinate values corresponds to the Diliman area and so I just basically did some inspection and some trial and error. Apparently, the northwesternmost tile at any zoom level is designated as (0,0) and the tile to the right is (1,0) and so on. So a tile (10,10) at zoom 10 will correspond to tiles (20,20), (20,21), (21,20), and (21,21) at zoom 11. In our case, U.P. Diliman can be located starting at tile (13701,7517) at zoom level 14.

Anyway, I plan to eventually improve the U.P. Map by adding a street and building map layer and a location search engine, much like Stanford University’s own Google Maps mashup. And if I get inspired, I might even try a “Hybrid” mode.

You might also be interested to see these other Philippine-related mashups: The K-Agrinet ICT Roadshow routes, and Migs Paraz’ Smart LBS Google Maps API Demo. But I’m sure you’ll agree that my mashup is way more cooler, right?

And in other news, Google Maps Mania has featured today my other Google Maps project, Tanawing Pinoy (now named Vista Pinas).