How to display image overlays in OpenLayers?

Question

I am working on displaying Ground Overlays on OpenLayers by parsing KML manually.

To do so, I was trying to add an image on top of Google Map by looking at GroundOverlay section from code.google.com/apis/kml/documentation/KML_Samples.kml file.

<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>-0.1556640799496235</rotation>
      </LatLonBox>
    </GroundOverlay>

On Google maps it looks like this

Now following is the code I am playing with to display the image in a similar fashion on top of Google Maps layer in OpenLayers:

  //-------create base map------------------------------
    map = new OpenLayers.Map('map',{
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: new OpenLayers.Projection("EPSG:4326")
    });

    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", // the default
        {
            numZoomLevels: 20
        }
        );

    map.addLayer(gmap);



    var point = new OpenLayers.LonLat( 14.93,37.70); 
    var zoomLevel=7;
    point.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()); 
    map.setCenter(point, zoomLevel);



    map.addControl( new OpenLayers.Control.LayerSwitcher() );
    map.addControl(new OpenLayers.Control.MousePosition());





    //-------add an image------------------------------
    var proj = new OpenLayers.Projection("EPSG:4326");
    var bounds = new OpenLayers.Bounds(37.91904192681665, 37.46543388598137, 15.35832653742206, 14.60128369746704)
    bounds.transform(proj, map.getProjectionObject());

    var graphic = new OpenLayers.Layer.Image(
        'Large-scale overlay on terrain',
        'http://code.google.com/apis/kml/documentation/etna.jpg',
        bounds ,
        new OpenLayers.Size(453, 339) ,
        {
            'opacity': 0.5, 
            'isBaseLayer': false, 
            'visibility': true,
            projection: new OpenLayers.Projection("EPSG:900913")
        }

        );
    map.addLayer(graphic);   

Now with above code, the layer name gets added to the layer switcher control, but no image is displayed. Could you please see if I am setting the projection, size and other parameters correctly? Also how do an image rotation?

Answer 1

It's exceedingly unlikely that this will work well in OpenLayers. The KML GroundOverlay extension is more or less tailored toward Google Earth and Google Maps, which has the ability to tile and reproject images behind the scenes - something that OpenLayers can't (and will never be able to) do.

It'd be a much better idea to make a tileset based on the image on hand, and use it was XYZ or TMS.

Answer 2

Check if the image element (the <img> tag) is being added to the page, but is off-screen, hidden, or under something else.

To do this use Firefox with the Firebug extension, this shows you the current state of the HTML elements on the page, and will highlight the changes in the tree as they happen.

You could also add after map.addLayer(graphic);, the line:

console.log(graphic.div);

This will make Firebug put a link to the HTML element that is the layer on the page. This allows you to quickly find the element and view its properties.