[GIS] How to display KML image overlays in OpenLayers

coordinate systemopenlayers-2overlay

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?

Best Answer

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.

Related Question