Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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
share|improve this question
What is your question? – underdark Feb 27 '12 at 7:43
@underdark when view has no data i.e. no row the layer is as shown in picture – kinkajou Feb 27 '12 at 8:07
... and you want to know how to get rid of the red tiles? – underdark Feb 27 '12 at 8:25
@underdark yes is there any way to do so – kinkajou Feb 27 '12 at 8:53
up vote 5 down vote accepted

did you try this for adding some default image on image error:

OpenLayers.Util.onImageLoadError = function(){
     this.src = "images/blank.png";
share|improve this answer
great solution worked for me. – kinkajou Feb 28 '12 at 3:48

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;
share|improve this answer
From style.css: .olImageLoadError { background-color: pink; opacity: 0.5; filter: alpha(opacity=50); /* IE */ } – ca0v Aug 17 '12 at 19:58

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.

share|improve this answer
I have added these parameters but still same error I have added code too – kinkajou Feb 27 '12 at 10:42
You must set the params BEFORE any openlayers object is created. – unicoletti Feb 27 '12 at 12:17
using geoext these variable was declared on top as my edit shows but still it does not work. It only works when I am using only openlayers any problem with my initialization? – kinkajou Feb 27 '12 at 12:54
You could have explained that you were using geoext from the beginning. It's in the faq too: – unicoletti Feb 27 '12 at 21:16
my bad :( well some of my pages only use open layers and others use geoext + openlayers tried this using only open layer works fine but stuck with other – kinkajou Feb 28 '12 at 3:48

It Just Worked For Me OpenLayers V2.13.1

.olTileImage.olImageLoadError {
    display: none !important;
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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