Projecting an Image on Google Map using OpenLayers 3

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]))
});

That's a pretty big image. Instead of directly trying to overlay it on top of the map, I suggest you serve it using a map server first, for example with MapServer or GeoServer. That way, you would be able to use the WMS protocol to render optimal images based on zoom level. OpenLayers supports WMS. You might also be interested in looking as OL3-Google-Maps: mapgears.github.io/ol3-google-maps — Alexandre Dubé
Thanks @Alexandre Dubé for your comment. Image rendering is really not a problem or an issue since these are actually .jp2 files (or even larger satellite images). We use IIP image server to efficiently render these. I did look into ol3-google-maps. It seems, at this time, it's limited in scope and does not have an example on how to handle ol.source.ImageStatic. The problem remain as an OL3 transformation issue. We do successfully center (84d39'22.44"W, 34d58' 7.49"N) the image over Google Map, but as you move the layers, they are off. — Morey
You could create an issue on the ol3-google-maps' GitHub about supporting static image sources. A student is currently participating a the Google Summer of Code for that project. If he has time, he could work on this. Or, you could also contribute it yourself by providing a Pull Request. — Alexandre Dubé

billChadwick billChadwick · Accepted Answer · 2016-06-29T22:07:48

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.

Projecting an Image on Google Map using OpenLayers 3

1 Answers