Avoiding Pink tiles when DB view/Table is empty

Question

I have views that are spatial in a sense that they select some spatial column from other table. This table is published using GeoServer. This table is live and sometime has no data at all. When the table has no data the wms displayed is all red and error in firebug console is:

The WMS returned:

>  <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE
> ServiceExceptionReport SYSTEM
> "http://192.168.70.65:80/geoserver/schemas/wms/1.1.1/WMS_exception_1_1_1.dtd"> <ServiceExceptionReport version="1.1.1" >   <ServiceException>
>           java.lang.NullPointerException
>     null
>     </ServiceException></ServiceExceptionReport>

The Code:

function init(){    
            OpenLayers.IMAGE_RELOAD_ATTEMPTS = 1;
                OpenLayers.Util.onImageLoadErrorColor = "transparent";    
                        
                map = new OpenLayers.Map('map', {   
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    displayProjection: new OpenLayers.Projection("EPSG:4326"),
                    numZoomLevels: 21,
                    maxExtent: new OpenLayers.Bounds(-20037508, -20037508,20037508, 20037508.34),   
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.LayerSwitcher({'ascending':false}),                       
                        new OpenLayers.Control.ScaleLine(),
                        new OpenLayers.Control.MousePosition(),
                        new OpenLayers.Control.OverviewMap(),
                        new OpenLayers.Control.KeyboardDefaults()
                    ]   
                    
                    
                });
            
                

Using GeoExt:

<script src="http://localhost/geoserver/www/ext/adapter/ext/ext-base.js" type="text/javascript"></script>
        <script src="http://localhost/geoserver/www/ext/ext-all.js"  type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="http://localhost/geoserver/www/ext/resources/css/ext-all.css"/>

        <link rel="stylesheet" href="http://localhost/geoserver/www/openLayers/theme/default/style.css" type="text/css" />
        <script src="http://localhost/geoserver/www/openLayers/OpenLayers.js" type="text/javascript"></script>

        <script src="http://localhost/geoserver/www/geoext/lib/GeoExt.js" type="text/javascript"></script>        
        <link rel="stylesheet" type="text/css" href="http://localhost/geoserver/www/geoext/resources/css/geoext-all.css"/>
      
        
        <script>
            
            OpenLayers.Util.onImageLoadErrorColor = 1;
            OpenLayers.Util.onImageLoadErrorColor = "transparent";          
        
            Ext.BLANK_IMAGE_URL = "http://localhost/geoserver/www/ext/resources/images/default/s.gif";
            var app, items = [], controls = [];
            var lon = 85.344;
            var lat = 27.7;
            var zoom = 12;
            var url = "http://localhost/geoserver/wms";
                    
            

            Ext.onReady(function() {            
                app = new Ext.Viewport({
                    layout: "border",
                    items: items
                });     

Answer 1

Newer versions of OpenLayers (post 2.11) should use CSS classes for this.

.olImageLoadError { 
    /* when OL encounters a 404, don't display the pink image */
    display: none !important;
} 

Answer 2

You could try this for adding some default image on image error:

OpenLayers.Util.onImageLoadError = function(){
     this.src = "images/blank.png";
};

Answer 3

Set the following parameters in OpenLayers:

// Avoid pink error tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

Reference document/tutorial:

http://workshops.opengeo.org/stack-intro/openlayers.html

Please note that 3 is a very high-tolerance value for reload attempts IMHO and could be lowered to just 1.

Answer 4

It Just Worked For Me OpenLayers V2.13.1

.olTileImage.olImageLoadError {
    display: none !important;
}