{"id":311,"date":"2008-04-18T06:15:00","date_gmt":"2008-04-18T11:15:00","guid":{"rendered":"http:\/\/crschmidt.net\/blog\/?p=311"},"modified":"2008-04-18T06:15:00","modified_gmt":"2008-04-18T11:15:00","slug":"using-tilecache-with-google-maps-and-virtual-earth","status":"publish","type":"post","link":"https:\/\/crschmidt.net\/blog\/archives\/311\/using-tilecache-with-google-maps-and-virtual-earth\/","title":{"rendered":"Using TileCache with Google Maps, Virtual Earth"},"content":{"rendered":"<p>In order to use TileCache to cache tiles for use in the Google Maps API, you need three things: <\/p>\n<ul>\n<li>A WMS server which supports the spherical mercator projection<\/li>\n<li>A properly configured TileCache pointing to it<\/li>\n<li>A small snippet of code to add a custom TileLayerOverlay to your Google Map<\/li>\n<li>A small snippet of code to add a custom TileSource to your Virtual Earth Map<\/li>\n<\/ul>\n<h3>WMS Server<\/h3>\n<p>My experience is with MapServer, so that&#8217;s what I&#8217;m going with here.<\/p>\n<p>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.<\/p>\n<p>On Linux systems, edit the \/usr\/share\/proj\/epsg file. At the bottom of that file, add the line:<\/p>\n<pre>\n&lt;900913> +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 \n               +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs\n<\/pre>\n<p>After you do this, you must add the projection to your wms_srs metdadata in your map file:<\/p>\n<pre>\nmap\n  web\n    metadata\n      wms_srs \"EPSG:4326 EPSG:900913\"\n    end\n  end\n  # Layers go here\nend\n<\/pre>\n<p>This will allow you to request tiles from your MapServer WMS server in the Spherical Mercator projection.<\/p>\n<h3>Configuring TileCache<\/h3>\n<p>Your TileCache configuration will need to point to your WMS installation, using the parameters suggested for Spherical Mercator in the default tilecache.cfg. <\/p>\n<pre>\n[google-tiles]\ntype=WMS\nurl=http:\/\/labs.metacarta.com\/wms\/vmap0\nlayers=basic\nextension=png\nbbox=-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892\nmaxResolution=156543.0339\nsrs=EPSG:900913\n<\/pre>\n<p>Here, you can see that I&#8217;ve used the MetaCarta Labs vmap0 WMS. If you&#8217;re using a standard MapServer WMS, you might have a url more like:<\/p>\n<p>url=http:\/\/example.com\/cgi-bin\/mapserv?map=\/mapdata\/mapfiles\/vmap0.map<\/p>\n<h3>Setting up Google Maps<\/h3>\n<p>Finally, you must make a GTileLayerOverlay for your tiles.<\/p>\n<pre> \n    var myTileLayer = new GTileLayerOverlay(new GTileLayer(null,null,null,{ \n      tileUrlTemplate: 'http:\/\/example.com\/tilecache\/1.0.0\/google-tiles\/{Z}\/{X}\/{Y}.png?type=google', \n      isPng:true})); \n    var map = new GMap2(document.getElementById(\"map_canvas\"));\n    map.setCenter(new GLatLng(0,0), 0);\n    map.addControl(new GSmallMapControl());\n    map.addOverlay(myTileLayer);\n<\/pre>\n<p>The &#8216;type=google&#8217; flag on the end of the URL tells TileCache to use the &#8220;Google-style&#8221; 0,0 in the upper left corner.<\/p>\n<p>Once you&#8217;ve done this, you should have a TileCache layer on top of your Google Maps base layer. You can see <a href=\"http:\/\/crschmidt.net\/mapping\/google-tilecache.html\">an example<\/a> of this setup, just for proof that I&#8217;m not putting you on. \ud83d\ude42<\/p>\n<h3>Virtual Earth Javascript<\/h3>\n<p>&#8220;But I don&#8217;t like Google!&#8221; you say. &#8220;I want VE!&#8221; Well then, why aren&#8217;t you using OpenLayers already? I mean, that&#8217;s what it&#8217;s for, right? \ud83d\ude42<\/p>\n<p>More seriously, VE isn&#8217;t much more difficult:<\/p>\n<pre>\n    vemap = new VEMap('myMap');\n    vemap.LoadMap(new VELatLong(0, 0), 0 );\n    \/\/Add layer\n    var tileSourceSpec = new VETileSourceSpecification(\"mclabs\", null, 1, \n       [new VELatLongRectangle(new VELatLong(-86,-180),new VELatLong(86,180))], \n       1, 16, function (tileContext)\n{\n   if(tileContext != null && tileContext != \"undefined\")\n   {\n      var key = tileContext.ZoomLevel+ \"\/\" + tileContext.XPos + \"\/\" + tileContext.YPos + \".png?type=google\";\n      var path = \"http:\/\/example.com\/tiles\/1.0.0\/google-tiles\/\" + key;\n      return path;\n   }\n}, 0.8, 100 );\n     vemap.AddTileSource(tileSourceSpec);\n    \n     var tileLayer = new VELayerSpecification(VELayerType.VETileSource,\"mclabs\",\"mclabs\");\n     vemap.AddLayer(tileLayer);\n<\/pre>\n<p>And, for your viewing pleasure: <a href=\"http:\/\/crschmidt.net\/mapping\/ve-tilecache.html\">an example<\/a> of the same tileset in use.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82,44,58,102],"tags":[],"class_list":["post-311","post","type-post","status-publish","format-standard","hentry","category-google-maps","category-locality-and-space","category-tilecache","category-virtual-earth"],"_links":{"self":[{"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/posts\/311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/comments?post=311"}],"version-history":[{"count":0,"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/posts\/311\/revisions"}],"wp:attachment":[{"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/media?parent=311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/categories?post=311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crschmidt.net\/blog\/wp-json\/wp\/v2\/tags?post=311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}