Question

I am using OpenLayers to display dynamically loaded images. The code I am using is:

      var map;
      function init(strURL) {
      map = new OpenLayers.Map('map');

      var options = { numZoomLevels: 3,
                isBaseLayer: true, };

      var graphic = new OpenLayers.Layer.Image(
            'City Lights',
            strURL + "?sc=page",
            new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
            new OpenLayers.Size(580, 288),
            options
        );

    //    graphic.events.on({
    //      loadstart: function () {
    //        OpenLayers.Console.log("loadstart");
    //      },
    //      loadend: function () {
    //        OpenLayers.Console.log("loadend");
    //      }
    //    });

    var jpl_wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",
            "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
            { layers: "landsat7" }, options);

    map.addLayers([graphic, jpl_wms]);


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

  }

I am calling this function on a button click event and passing the strURL (sources of the images) at that time. The result is, with each click a different image is loaded and displayed on the web page but is not clearing the previous image. So I 5 different images on the webpage are shown with 5 clicks and so on.

My javascript knowledge is limited, so my apologies if this is a stupid question. How to stop this behavior? Thanks for any assistance.

Also, I didn’t quite understand the lines:

    var jpl_wms = new OpenLayers.Layer.WMS("NASA Global Mosaic",
        "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
        { layers: "landsat7" }, options);

But I know these lines are needed since I’m getting js error if I remove them.

Answer 1

So currently you are calling init(strURL) with each button click? Divide that code into two parts:

• On page load, create map and layer objects
• On button click, just update URL of existing image layer. Image layer has setUrl(url) method for that: http://dev.openlayers.org/apidocs/files/OpenLayers/Layer/Image-js.html#OpenLayers.Layer.Image.setUrl

Here is sample, that should explain it: http://jsfiddle.net/mEHrN/6/

About var jpl_wms = … – it creates WMS layer, that should display Landsat imagery (but that URL doesn’t seem to work). If you remove it, remember also to remove it from map.addLayers:

map.addLayers([graphic]); 

Probably this was reason, why you got JS error.