When the OpenLayers map of your site takes some time to load and you wish to give feedback to the user, the first place to look is the Loading Panel Addin. This addin provides an animated bar, that progresses as soon as a layer is loaded on the map. But you are not bound to its standard appearance – CSS offers you an undefined customisation freedom.

I first chose a simple progress bar, with a little globe image added to it for each loaded layer, and I felt happy enough. But I’m still a CSS beginner and moreover a very cold fan of GUIs, unlike Tim, who got a nice nice animated gif to show the progress of the map population. The AjaxInfo website provided a wide range of indicators – have fun and be sure to add it to your bookmarks!

Here are the relevant code snippets of our implementation:

1- Include the LoadingPanel Addin javascript into the head of your HTML page:

<script type="text/javascript" charset="utf-8" src="LoadingPanel.js"> </script>

2- Add the functionality in mainJavaScriptFile.js:

var loadingPanel = new OpenLayers.Control.LoadingPanel();
map.addControl(loadingPanel);    

//show the control
loadingPanel.maximizeControl();
// load your layers here
// remove it as the above function returns
loadingPanel.minimizeControl();

Note: that way, the LoadingPanel doesn’t know how many layers you are loading. The wiki page and the related example do, with much more code. I liked that 5-line implementation – and the animated gif required only a little…

3- CSS tweak

.olControlLoadingPanel {
    background-image: url("/static/images/ajax-loader.gif");
    background-color: none;
    position: relative;
    width: 50px;
    height: 50px;
    background-position:center;
    background-repeat:no-repeat;
    display: none;
}

That rocks heh? Hope this can be helpful to the OpenLayers users community!
–anne