So new to OpenLayers 3, and I'm trying to create a "loading bar" to indicate how much of a layer has loaded. I'm thinking of making it based on the number of tiles loaded so far divided by the total number of tiles that need to be loaded to render that whole layer from the WMS server-- but I've been looking around the API and I don't know how to get either of those numbers in OpenLayers 3.

Does anyone know anything about this, or alternatively does anyone know a different approach I could use to create a layer loading bar?


It seems that this functionality was recently added to the OpenLayers 3 examples.

See Tile load events for a working example. Note the loading bar right below the map indicating how much it takes to load map tiles.

You can also have a look at the code of the example and notice the use of tileloadstart, tileloadend, and tileloaderror events to handle the loading process.

You can monitor with something like:

var tile_loading = 0, tile_loaded = 0;
tileSource.on('tileloadstart', function(){
tileSource.on('tileloadend', function(){
    if(tile_loaded == tile_loading){
        //do stuff
  • Correct me if I'm wrong but there is no way to monitor when tiles are unloaded so its hard to get a correct view of the number of loaded tiles? – Peter Oct 27 '20 at 10:31

For the moment it is not possible with OpenLayers3. See this post on the openlayers 3 dev mailinglist

If you want to get this implemented you can vote for this issue at github project, or maybe start implementing it yourself.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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