Projecting an Image on Google Map using OpenLayers 3 - google-maps

Question

I am trying to overlay a satellite image (a 6471x7669 jpg file) over Google Map using OL3. The image file's meta-data and projection info is provided as:
Driver: JP2ECW/ERDAS JPEG2000 (SDK 3.x)
Files: /mnt/NAIP/TN/2012/34084/m_3408403_ne_16_1_20120527_20120911.jp2
Size is 6471, 7669
Coordinate System is:
PROJCS["NAD83 / UTM zone 16N",
GEOGCS["NAD83",
DATUM["North_American_Datum_1983",
SPHEROID["GRS 1980",6378137,298.2572221010002,
AUTHORITY["EPSG","7019"]],
AUTHORITY["EPSG","6269"]],
PRIMEM["Greenwich",0],
UNIT["degree",0.0174532925199433],
AUTHORITY["EPSG","4269"]],
PROJECTION["Transverse_Mercator"],
PARAMETER["latitude_of_origin",0],
PARAMETER["central_meridian",-87],
PARAMETER["scale_factor",0.9996],
PARAMETER["false_easting",500000],
PARAMETER["false_northing",0],
UNIT["metre",1,
AUTHORITY["EPSG","9001"]],
AUTHORITY["EPSG","26916"]]
Origin = (710739.000000000000000,3875921.000000000000000)
Pixel Size = (1.000000000000000,-1.000000000000000)
Metadata:
COLORSPACE=MULTIBAND
COMPRESSION_RATE_TARGET=9
VERSION=1
Corner Coordinates:
Upper Left ( 710739.000, 3875921.000) ( 84d41'26.44"W, 35d 0'14.31"N)
Lower Left ( 710739.000, 3868252.000) ( 84d41'33.42"W, 34d56' 5.56"N)
Upper Right ( 717210.000, 3875921.000) ( 84d37'11.35"W, 35d 0' 9.39"N)
Lower Right ( 717210.000, 3868252.000) ( 84d37'18.55"W, 34d56' 0.64"N)
Center ( 713974.500, 3872086.500) ( 84d39'22.44"W, 34d58' 7.49"N)
Band 1 Block=256x256 Type=Byte, ColorInterp=Undefined
Description = Band #1
Overviews: 3235x3834, 1617x1917, 808x958, 404x479, 202x239
Band 2 Block=256x256 Type=Byte, ColorInterp=Undefined
Description = Band #2
Overviews: 3235x3834, 1617x1917, 808x958, 404x479, 202x239
Band 3 Block=256x256 Type=Byte, ColorInterp=Undefined
Description = Band #3
Overviews: 3235x3834, 1617x1917, 808x958, 404x479, 202x239
Band 4 Block=256x256 Type=Byte, ColorInterp=Undefined
Description = Band #4
Overviews: 3235x3834, 1617x1917, 808x958, 404x479, 202x239
The problem I'm having is to interpret the data and figure out what projection to use (I'm not a geographer). I have already tested both EPSG:900913 and EPSG:3857 to transform to EPSG:4326, but it doesn't seem to work:
var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
The provided data mentions EPSG:7019, EPSG:6269, EPSG:4269, EPSG:9001, and EPSG:26916, none of which seem to have Proj4js definitions. The provided corner & center lat/lons coordinates are pretty accurate.
My questions are: is there an existing proj4.defs for this? If not, how can I create one? Any help on this is greatly appreciated.
UPDATE
Expanding on this question further: Initially we center the static image over Google Map just fine.
But not sure what transformation to use as the layers are moved together. In a nutshell what should be the transformation <transform> in this code?
view.on('change:center', function() {
var center = ol.proj.transform(view.getCenter(), <transform>, 'EPSG:4326');
gmap.setCenter(new google.maps.LatLng(center[1], center[0]))
});

Answer 1

You source image is in NAD83 UTM 16N or EPSG:26916 see http://spatialreference.org/ref/epsg/nad83-utm-zone-16n/
UTM is a Transverse Mercator projection with vertical 6 degree strips of the world projected onto a cylinder with its axis through the poles. Google maps uses a spherical Mercator (horizontal cylindrical) projection - EPSG:3857. The properties of these two are quite different - you will not be able to accurately overlay your 26916 image on a 3857 map without reprojecting it.
Have you looked at this http://openlayers.org/en/latest/examples/reprojection-image.html ?
Alternatively, you could use a GIS program of some sort to re-project your image to 3857 for easier composition with a 3857 map - say something like GlobalMapper.