OpenLayers – Troubleshooting Wrong Tiles Generated in OpenLayers XYZ Layer

Question

I am creating a map in OpenLayers using Base layer as ESRI online map server. And second layer as our own Esri map server serving the overlay. The base layer shows correctly, but OpenLayers requests some extra tiles at lower zoom levels which do not exist. Check this image too see what I mean:

Now if I zoom in everything looks fine and the data in the overlay is correct. But how do I make OpenLayers not request those pink tiles?

Here is the related code:

For Base Map:

// layerURL loaded using OpenLayers.Protocol.Script()
var baseLayer = new OpenLayers.Layer.ArcGISCache("Street Map", layerURL, {
    layerInfo : layerInfo,
    type : 'png'
    });

    map = new OpenLayers.Map('map', {
    maxExtent : baseLayer.maxExtent,
    units : baseLayer.units,
    resolutions : baseLayer.resolutions,
    numZoomLevels : baseLayer.numZoomLevels,
    tileSize : baseLayer.tileSize,
    displayProjection : baseLayer.displayProjection
    });

    //The layer with the bad tile problem
    layer = new OpenLayers.Layer.XYZ("ESRI", "http://url_removed/tile/${z}/${y}/${x}", {
    format : "image/jpg",
    transparent : "true",
    isBaseLayer : false,
    opacity : 0.8
    });

Answer 1

use this:

OpenLayers.Util.onImageLoadError = function() {this.src = '/img/noimg.png';};

i hope it helps you...