Google Maps – How to Add WMS Layer with EPSG:3857 in Google Maps

google mapswms

I am adding wms layers to my google maps application. As Google Maps projection is a web mercator, I thought it would be better to request wms layers with srs=3857 (or equivalent) instead of the 4326. I searched a bit for fellow implementation and I saw that most (if not all) use 4326 instead.

I wanted to experiment by myself, I request the 3857 to the map server and do some reprojections for the BBOX coordinates.
I have the two running so I can compare them. The result is:
– 4326, the tiles look OK acvtually, I can't notice much of a shift.
– 3857 the wms tiles are completely off, huge lat shift

My question is: I am right to think that I should be querying for a 3857 projected wms layer or should I stick to 4326? and is it normal that I have a big shift in my 3857 tiles?

edit

This is the code I use for creating the layer

    layer = new google.maps.ImageMapType({
        getTileUrl: function (coord, zoom) {
            var proj = _map.getProjection();
            var zfactor = Math.pow(2, zoom);
            // get tile coordinates
            var top = proj.fromPointToLatLng(new google.maps.Point(coord.x * 256 / zfactor, (coord.y + 1) * 256 / zfactor));
            var bot = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * 256 / zfactor, coord.y * 256 / zfactor));
            // convert from wgs84 lat,lng to new srs coordinates
            var topConverted = srsConversion(top);
            var botConverted = srsConversion(bot);
            //create the Bounding box string
            // handles 1.3.0 wms by ordering lat, lng instead of lng, lat
            var bbox;
            if(version == "1.3.0") {
                bbox = botConverted.lng + "," + botConverted.lat + "," + topConverted.lng + "," + topConverted.lat;
            } else {
                bbox = topConverted.lng + "," + topConverted.lat + "," + botConverted.lng + "," + botConverted.lat;
            }
            //base WMS URL
            var url = lURL + "&BBOX=" + bbox; // set bounding box
            return url; // return URL for the tile
        },
        isPng: true,
        tileSize: new google.maps.Size(256, 256)
    });

Best Answer

I finally got the issue... my 4326 -> 3857 transform was wrong! sorry about the trouble. This is the transform I use now (found on StackOverflow):

function srsConversion(latLng) {
   if ((Math.abs(latLng.lng()) > 180 || Math.abs(latLng.lat()) > 90))
         return;

var num = latLng.lng() * 0.017453292519943295;
var x = 6378137.0 * num;
var a = latLng.lat() * 0.017453292519943295;

    return {lng: x, lat: 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)))};

}

Related Question