EPSG 4326 Image overlaid on EPSG 3857 map

[Jim Jackson]

I have a 1000px by 1000px PNG image with a bounding box of [[-78.86875644165448, -180], [90, 180]].  It is an overlay created using an EPSG 4326 (globe) projection.  I'm trying to precisely display it on an EPSG 3857 map (OpenStreetMaps).

Using leaflet.imageOverlay(imageUrl, imageBounds) shows a latitudinal shift due to the differing projections.  

I have tried setting the map's crs to L.CRS.EPSG4326.  It works; however, all markers and latitude/longitude readings are then off.  Also the image's bounding box is larger than the EPSG 3857 bounds, but I'm not sure if that makes a difference or not.

I'm currently trying to use Proj4js to transform the bounding box coords, but it's not working.  Any thoughts on how to get the image overlay displayed correctly?

     self.createPngHeatmapLayer = function(pngHeatmapObject) {

        var nLat = pngHeatmapObject.coords[0];

        var sLat = pngHeatmapObject.coords[1];

        var eLong = pngHeatmapObject.coords[2];

        var wLong = pngHeatmapObject.coords[3];

        

        logger.debug("createPngHeatmapLayer() [[" + sLat + ", " + wLong + "], [" + nLat + ", " + eLong + "]] length:" + pngHeatmapObject.image.length);

        

        var imageUrl = "data:image/png;base64," + pngHeatmapObject.image;

//        var imageBounds = [[sLat, wLong], [nLat, eLong]];

        var source = new proj4.Proj('EPSG:4326');

        var dest = new proj4.Proj('EPSG:3857');

        var p = new proj4.Point(wLong, sLat);

        proj4.transform(source, dest, p);

        var p2 = new proj4.Point(eLong, nLat);

        proj4.transform(source, dest, p2);

        

        logger.debug("createPngHeatmapLayer() [[" + p+"], [" + p2 + "]]");

        var imageBounds = leaflet.bounds([p.x, p.y], [p2.x, p2.y]);

        

        //pngHeatLayer = leaflet.imageOverlay(imageUrl, imageBounds);

        pngHeatLayer = leaflet.Proj.imageOverlay(imageUrl, imageBounds);

     };

And the log statements:

2014-08-14 16:59:05,776 DEBUG createPngHeatmapLayer() [[-78.86875644165448, -180], [90, 180]] length:88532 log4javascript-1.4.9.js:155

2014-08-14 16:59:05.7972014-08-14 16:59:05,795 DEBUG createPngHeatmapLayer() [[x=20037508.342789244,y=-14809245.287863323], [x=0,y=1.5707963267948966]]

Cheers,

Jim

[Jim Jackson]

Hopefully, this helps others in the future:

1. As of Sep 14, I couldn't find a way to reproject an EPSG 4326 image to 3857 in javascript.

2. It appears that GDAL can do this (http://gis.stackexchange.com/questions/17336/transforming-epsg3857-to-epsg4326) although this requires an OS-specific install.

3. For a java-only solution, GeoTools (http://docs.geotools.org/stable/userguide/library/coverage/grid.html) appears to be able to translate images between projections.

4. In the end I adapted the MapService reply from here (http://stackoverflow.com/questions/14329691/covert-latitude-longitude-point-to-a-pixels-x-y-on-mercator-projection) to take the original data and create an EPSG 3857 compatible image from scratch rather than trying to reproject the EPSG 4326 image.

Cheers,

Jim