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:

enter image description here

The WMS returned:

>  <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE
> ServiceExceptionReport SYSTEM
> ""> <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"/>
            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

4 Answers 4


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;

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

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

Set the following parameters in OpenLayers:

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

Reference document/tutorial:


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


It Just Worked For Me OpenLayers V2.13.1

.olTileImage.olImageLoadError {
    display: none !important;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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