Technical Ramblings » Blog Archive » Using TileCache with Google Maps, Virtual Earth

Using TileCache with Google Maps, Virtual Earth

In order to use TileCache to cache tiles for use in the Google Maps API, you need three things:

A WMS server which supports the spherical mercator projection
A properly configured TileCache pointing to it
A small snippet of code to add a custom TileLayerOverlay to your Google Map
A small snippet of code to add a custom TileSource to your Virtual Earth Map

WMS Server

My experience is with MapServer, so that’s what I’m going with here.

MapServer uses proj.4 for its reprojection support. In order to enable reprojection to Spherical Mercator in MapServer, you must add the definition for the projection to your proj.4 data directories.

On Linux systems, edit the /usr/share/proj/epsg file. At the bottom of that file, add the line:

<900913> +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 
               +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs

After you do this, you must add the projection to your wms_srs metdadata in your map file:

map
  web
    metadata
      wms_srs "EPSG:4326 EPSG:900913"
    end
  end
  # Layers go here
end

This will allow you to request tiles from your MapServer WMS server in the Spherical Mercator projection.

Configuring TileCache

Your TileCache configuration will need to point to your WMS installation, using the parameters suggested for Spherical Mercator in the default tilecache.cfg.

[google-tiles]
type=WMS
url=http://labs.metacarta.com/wms/vmap0
layers=basic
extension=png
bbox=-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892
maxResolution=156543.0339
srs=EPSG:900913

Here, you can see that I’ve used the MetaCarta Labs vmap0 WMS. If you’re using a standard MapServer WMS, you might have a url more like:

url=http://example.com/cgi-bin/mapserv?map=/mapdata/mapfiles/vmap0.map

Setting up Google Maps

Finally, you must make a GTileLayerOverlay for your tiles.

 
    var myTileLayer = new GTileLayerOverlay(new GTileLayer(null,null,null,{ 
      tileUrlTemplate: 'http://example.com/tilecache/1.0.0/google-tiles/{Z}/{X}/{Y}.png?type=google', 
      isPng:true})); 
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(0,0), 0);
    map.addControl(new GSmallMapControl());
    map.addOverlay(myTileLayer);

The ‘type=google’ flag on the end of the URL tells TileCache to use the “Google-style” 0,0 in the upper left corner.

Once you’ve done this, you should have a TileCache layer on top of your Google Maps base layer. You can see an example of this setup, just for proof that I’m not putting you on. 🙂

Virtual Earth Javascript

“But I don’t like Google!” you say. “I want VE!” Well then, why aren’t you using OpenLayers already? I mean, that’s what it’s for, right? 🙂

More seriously, VE isn’t much more difficult:

    vemap = new VEMap('myMap');
    vemap.LoadMap(new VELatLong(0, 0), 0 );
    //Add layer
    var tileSourceSpec = new VETileSourceSpecification("mclabs", null, 1, 
       [new VELatLongRectangle(new VELatLong(-86,-180),new VELatLong(86,180))], 
       1, 16, function (tileContext)
{
   if(tileContext != null && tileContext != "undefined")
   {
      var key = tileContext.ZoomLevel+ "/" + tileContext.XPos + "/" + tileContext.YPos + ".png?type=google";
      var path = "http://example.com/tiles/1.0.0/google-tiles/" + key;
      return path;
   }
}, 0.8, 100 );
     vemap.AddTileSource(tileSourceSpec);
    
     var tileLayer = new VELayerSpecification(VELayerType.VETileSource,"mclabs","mclabs");
     vemap.AddLayer(tileLayer);

And, for your viewing pleasure: an example of the same tileset in use.

This entry was posted on Friday, April 18th, 2008 at 6:15 am and is filed under Google Maps, Locality and Space, TileCache, Virtual Earth. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

22 Responses to “Using TileCache with Google Maps, Virtual Earth”

guillaume Says:
April 18th, 2008 at 6:27 am
Nice trick indeed !
But are you sure GoogleMaps licence allows people to tilecache their data ?

Thanks
crschmidt Says:
April 18th, 2008 at 6:38 am
Guillaume:

Who said anything about TileCaching Google Maps data? Perhaps you should re-read the post? This is about using MapServer to create your own data for laying on top of Google Maps.
Paul Spencer Says:
April 18th, 2008 at 6:52 am
Performance boosting trick: place the proj definitions that you use most at the top of your epsg file instead of the bottom. MapServer is currently really dumb about looking up epsg codes and will seqentially scan the entire file until if finds the definition its looking for. By putting the 900913 and whatever projection your data is in (4326?) at the top, you will get a performance boost. Whether it is noticeable depends on the number of layers you are rendering, of course.
Brendan Says:
April 18th, 2008 at 1:50 pm
Not related to your post (which is really neat!) but when I clicked on the Original Posting link from Google Reader to visit this site, I got a warning from Google that your site may infect my computer!

Not worried about it myself, but I thought you might be interested to know.
Rupert de Guzman Says:
April 18th, 2008 at 10:26 pm
Really interesting post… Not directly related to this post since its TC on top of GoogleMap/VE API..

But I wonder if it is now possible to do it with OpenLayers API (Google as BaseLayer) + Custom TileCache 900913 Road Overlay?

I’ve tried using speherical mercator on OpenLayers (Google as BaseLayer) + WMS 900913 Road Layer without any problems. Hoping TC to make significant performance improvements instead of using WMS as stated above.

Again thank you for making invaluable contributions to the internet GIS industry…
crschmidt Says:
April 19th, 2008 at 7:46 am
Rupert:

That is absolutely possible… and has been for quite a while already. http://openlayers.org/dev/examples/spherical-mercator.html does exactly that with no problems that I’m aware of.
Diego Guidi Says:
April 28th, 2008 at 4:27 pm
Absolutely awesome!
It’s planned a support for Google Earth’s KML SuperOverlays with TileCache?
Gdal2Tiles support this behavior, but don’t support KML generation from WMS…
crschmidt Says:
April 28th, 2008 at 4:44 pm
Diego:

TileCache 2.x has KML SuperOverlay support for layers in EPSG:4326. See http://openaerialmap.org/static/oam.kml for how to set it up.
Diego Guidi Says:
April 29th, 2008 at 1:55 am
Thanks a lot for the information 🙂
Diego Guidi Says:
May 3rd, 2008 at 10:50 am
Some documentation available on how to generayte kml superoverlays?
Or maybe i need to look into the source code?
Martijn van Exel Says:
May 13th, 2008 at 5:02 am
Cr, two comments:
* The VETileSourceSpecification constructor (at least in v6.1 of the VE control) won’t take null for TileSource. An empty string will do though.
* 3D mode in VE does not support custom tile naming schemas. I’ll look into setting up tilecache to do standard VE tile naming. That way this can be used in VE 3D mode as well.
Diego Guidi Says:
May 20th, 2008 at 2:15 am
I’ve found some docs:
http://tilecache.org/docs/SuperOverlays.html
http://svn.tilecache.org/trunk/tilecache/docs/SuperOverlays.txt
mike Says:
May 22nd, 2008 at 3:05 pm
This is great. Could you add some explanation of how you came up with the values of the configuration items bbox and maxResolution?
mike Says:
May 28th, 2008 at 12:35 pm
To partly answer my own question, I think the author might have gotten the magic numbers from this article:

http://cfis.savagexi.com/articles/2006/05/03/google-maps-deconstructed
siba Mohanty Says:
September 26th, 2008 at 5:34 am
hey tht’s quite usefull information u guys are hving there, am tyrin to implement the same version i:e tc+ms+OL but the only problem is tht am unable to solve the edge effect there.

when i use OL with mapserver the gutter parameter works well to reduce ask for bigger tiles and reduce the effect but once i put the tilecache in between, it cribs,
Also i have tried to give the metaTiling and metaBuffer parameter in tileCache, it does a valid request and gets the tile from mapserver but now Openlayer cribs.

Any solution anybody ??

P:S. got to say the tileCache is realy gud work!!!!
chrismarx Says:
November 9th, 2008 at 2:16 am
hi,
can you provide the full example of how you parse your url into the correct parameters for tilecache?
chrismarx Says:
November 13th, 2008 at 12:40 pm
ok, i see i missed a section of the tilecache docs that talks about these “TMS” style requests. Is the format for these types of requests documented anywhere? Also, does anyone have a current link to enabled uri style (/param1/param2) parameters for IIS? The link in the docs is dead-
Elmer C Says:
February 10th, 2009 at 8:58 am
Thanx a million! Very, very helpful!
Rahul Teni Says:
August 29th, 2009 at 8:34 am
Hi,

Does anybody know how to fix edging effect with tilecache. I mean my two tiles contains one line but at intersection point it doesn’t get displayed correctly. I have tried with metaBuffer option.

Thanks,
Rahul Teni
M'Hamed Says:
October 18th, 2009 at 12:34 pm
I need your help for a windows installation. Is that possible? You can see from the website that I am trying to project information (POI, etc). It would be nice to project on Google Map! Many thanks in advance.
Tabloid Says:
March 5th, 2010 at 1:12 pm
This is an excellent demo of gmap, VE with tilecache. I wasw wondering, if anyone had any luck in showing tiles generated by tilecache and WMS service to display on with ESRI layer.

Thanks,
Ros Says:
August 11th, 2011 at 11:16 am
Hi there,

I’m trying to setup make Tilecache+GoogleMaps working.

My tilecache.cfg:

srs=EPSG:900913
projection= +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs +over
bbox=3183721.654300025,-16359226.383120917,3183860.851285995,-16358297.240003694

And it generates black square…. Can you please advise?

Thanks so much!