Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

up vote 1 down vote accepted

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.