Removing a layer in OpenLayers

Question

I don't know why this isn't working. I would assume the answer is really simple. I need to remove a layer before adding a new one.

                     if (graphic) {
        window.map.removeLayer(graphic);
    }
    var graphic = new OpenLayers.Layer.Image(
        'Sightline'+''+SC,
        url,
        new OpenLayers.Bounds(derWesten[0].firstChild.nodeValue,derSueden[0].firstChild.nodeValue,derOsten[0].firstChild.nodeValue, derNorden[0].firstChild.nodeValue),
        new OpenLayers.Size(0,0),
        options
    );

    window.map.addLayer(graphic);   

It just keeps piling on the layers and not removing any. Any help?

Answer 1

Your if statement will always evaluate to false because you re-declare graphic every time you run that part of code. The variable is hoisted and the value of it will be undefined when the if is evaluated.

You need to declare the variable in a different scope:

var graphic;

function removeAddLayer() {
   if (graphic) {
      window.map.removeLayer(graphic);
   }
   graphic = new OpenLayers.Layer.Image( /* stuff */); // note: no 'var' in front of graphic
   window.map.addLayer(graphic);
}

Answer 2

Use map.getLayersByName(layerName) get the layers. You might need to keep track of the names of the layers in some array or something

The method returns an array, so you go through the array of layers and use map.removeLayer(layer).

You can externalize this solution in a different function if you want and it works.

Answer 3

Experimentially I found out that removing a layer doesn't clean the memory in the client browser(in my case it's about 2 hyndreds of wms layers that get about 2gb of memory in firefox). So the only approach that worked for me is to create only one wms layer and to mergeNewParams. Hope it will help.