Displaying WMS Layers in Google Maps

Image Web Server from ER Mapper offers a WMS reflector that lets you request pieces of JPEG 2000 and ECW images. The trick was to get that WMS data into a Google Maps interface.

Here’s the steps:

(1) I can’t get IWS to reproject images, so they have to be in the right projection for Google Maps. This should be easy, but Google Maps doesn’t use a standard projection, and I can’t figure out what datum/projection codes it is in ER Mapper. So here’s my trick: use gdalwarp (available as part of FWTools) to reproject a TIFF to the Google projection, and then ER Mapper to make the JPEG 2000. ER Mapper picks up the geospatial references from the header of the GeoTiff generated by gdalwarp and makes a JPEG 2000 that has the right stuff embedded.

Here’s what my gdalwarp batch file looks like (EPSG:2272 is PA State Plane South Feet):

set MyProj="+proj=merc +latts=0 +lon0=0 +k=1.0 +x0=0 +y0=0 +ellps=WGS84 +datum=WGS84 +units=m no_defs"
set MyArgs=-srcnodata 0 -dstnodata 255 -rc -multi -of GTiff
set MyOutput=Processed

gdalwarp -s_srs EPSG:2272 -t_srs %MyProj% %MyArgs% ellet-EPSG-2272.tif %MyOutput%ellet-google.tif

If you need to mosaic a bunch of files, ER Mapper can do that too.  Just make sure to georeference and reproject each of the individual maps that will make up the mosiac, then add all these images to one algorithm (surface?) in ER Mapper.  “Feathering” is usually helpful.

(2) Once you upload the file to the server, you have to use Image Web Server’s config console to enable the WMS protocol for the specific image in question. It is not enabled by default. Make sure to give the image a layer name, which you will use when configuring the client.

(3) I’m using a WMS script for Google Maps that was developed by John Deck at UC Berkeley, with the contributions of many others, and a few minor modifications of my own. You can see my javascript file here, but my modifications aren’t commented or fully tested yet.

(4) Once everything else is in place, define the layers. Here’s a layer definition:

var tileEllet = new GTileLayer(new GCopyrightCollection("Athenaeum of Philadelphia"),1,16);
tileEllet.myLayers ='ellet-google';
tileEllet.myFormat ='image/png';
tileEllet.mySRS = 'none';
tileEllet.myBaseURL ='http://replace.philageohistory.org/tiles/ecwcache2.php?';
tileEllet.myBaseMax = 6;
tileEllet.myBaseReplace = 'replace';
tileEllet.myBaseSubRoot = 'w';
tileEllet.getTileUrl = CustomGetTileUrl;
tileEllet.getOpacity = customOpacity;

All that fun stuff with the myBaseMax, myBaseReplace, and myBaseSubRoot is to request alternating tiles with different domain names (w1.philageohistory.org, w2.philageohistory.org, through w6). Since Firefox and IE limit connections to 2 per domain, tiles would load sequentially instead of in parallel. With the different domain names, it works a little smoother.

The cache URL is explained in another post.

(5) Make a map type and add it to the map.

var ElletLayers = [tileEllet];
var ElletHybridLayers = [tileEllet,G_HYBRID_MAP.getTileLayers()[1]];

var ElletMap = new GMapType(ElletLayers, G_SATELLITE_MAP.getProjection(), "1843 Ellet");
var ElletHybridMap = new GMapType(ElletHybridLayers, G_SATELLITE_MAP.getProjection(), "1843 Ellet (w/ overlay)");

map.addMapType(ElletMap);
map.addMapType(ElletHybridMap);

(6) Enjoy. You’ll need to add a map type control, or select the map type using javascript. But that’s pretty easy and obvious from Google’s documentation.

My latest work is visible here.