[GIS] Image display/scaling in OpenLayers vs Google Maps

openlayers-2overlay

When I plot an image on OpenLayers, it looks like that image is stretched a little bit as compared to Google Maps. I was wondering if it is normal or there is something wrong with my code.

OpenLayers:
enter image description here

Google Maps (maps.google.com):
enter image description here

Following is the XML :

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Folder>
    <name>Ground Overlays</name>
    <description>Examples of ground overlays</description>
    <GroundOverlay>
      <name>Large-scale overlay on terrain</name>
      <description>Overlay shows Mount Etna erupting 
          on July 13th, 2001.</description>
      <Icon>
        <href>http://code.google.com/apis/kml/documentation/etna.jpg</href>
      </Icon>
      <LatLonBox>
        <north>37.91904192681665</north>
        <south>37.46543388598137</south>
        <east>15.35832653742206</east>
        <west>14.60128369746704</west>
        <rotation>59.1556640799496235</rotation>
      </LatLonBox>
    </GroundOverlay>


  </Folder>
</kml>

And following is my JavaScript code:

xml=jQuery.parseXML(oRequest.responseText)  //oRequest.responseText contains above xml

    groundOverlays=jQuery(xml).find('GroundOverlay');

    jQuery.each(groundOverlays,function(index, value){
        var groundOverlay=new Object();
        parentFolder=jQuery(groundOverlays).parent('Folder').find('name').text();

        groundOverlay.href=jQuery(value).find('href').text();
        groundOverlay.name=jQuery(value).find('name').text();
        groundOverlay.description=jQuery(value).find('description').text();
        groundOverlay.north=jQuery(value).find('north').text();
        groundOverlay.south=jQuery(value).find('south').text();
        groundOverlay.east=jQuery(value).find('east').text();
        groundOverlay.west=jQuery(value).find('west').text();
        groundOverlay.rotation=jQuery(value).find('rotation').text();



        var options = {   
            'opacity': 1.0, 
            'isBaseLayer': false,
            numZoomLevels : 20 ,
            //aspectRatio:50,

        };
        var image = new OpenLayers.Layer.Image(
            groundOverlay.name,
            groundOverlay.href,
            new OpenLayers.Bounds( groundOverlay.west, groundOverlay.south,  groundOverlay.east, groundOverlay.north),
            new OpenLayers.Size(1, 1),
            options
            );

        map.addLayers([image]);


    });

Best Answer

Spherical Mercator Projection is used for Google Maps API/Bing Map API.

One of the reasons that the Spherical Mercator projection is so important is that it is the only projection which will allow for overlaying image data on top of commercial layers like Google Maps correctly. When using raster images, in the browser, it is not possible to reproject the images in the same way it might be in a ‘thick’ GIS client. Instead, all images must be in the same projection.

How to create Spherical Mercator projected tiles depends on the software you are using to generate your images. MapServer is a possible route.

http://docs.openlayers.org/library/spherical_mercator.html

(See Creating Spherical Mercator Raster Images)

Related Question