Openlayers 3 - load start / load end events on layers

With the latest versions of OL3 we have the ability to listen for the 'loadstart' and 'loadend' events on layers exist on our map. In openlayers 2 that was quite clear.

With the latest versions of  openlayers 3, things start to be a bit more clear, though not as clear as it used to be on OL2.

So for TILE (ol.layer.Tile) layers our code snip should look like:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//declare the layer var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); //asign the listeners on the source of tile layer osmLayer.getSource().on('tileloadstart', function(event) { //replace with your custom action document.getElementById('tilesloaderindicatorimg').src = 'css/images/tree_loading.gif'; }); osmLayer.getSource().on('tileloadend', function(event) { //replace with your custom action document.getElementById('tilesloaderindicatorimg').src = 'css/images/ok.png'; }); osmLayer.getSource().on('tileloaderror', function(event) { //replace with your custom action document.getElementById('tilesloaderindicatorimg').src = 'css/images/no.png'; });

For WMS layers the approach is a bit different:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

//declare the layer var wmsLayer = new ol.layer.Image({ source: new ol.source.ImageWMS({ attributions: [new ol.Attribution({ html: '&copy; ' + '<a href="http://www.geo.admin.ch/internet/geoportal/' + 'en/home.html">' + 'National parks / geo.admin.ch</a>' })], crossOrigin: 'anonymous', params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'}, serverType: 'mapserver', url: 'http://wms.geo.admin.ch/' }) }); //and now asign the listeners on the source of it var lyrSource = wmsLayer.getSource(); lyrSource.on('imageloadstart', function(event) { console.log('imageloadstart event',event); //replace with your custom action var elemId = event.target.params_.ELEMENTID; document.getElementById(elemId).src = 'css/images/tree_loading.gif'; }); lyrSource.on('imageloadend', function(event) { console.log('imageloadend event',event); //replace with your custom action var elemId = event.target.params_.ELEMENTID; document.getElementById(elemId).src = 'css/images/ok.png'; }); lyrSource.on('imageloaderror', function(event) { console.log('imageloaderror event',event); //replace with your custom action var elemId = event.target.params_.ELEMENTID; document.getElementById(elemId).src = 'css/images/no.png'; });

For WFS Vecotr layers things are even more complicated:

so I made a fiddle you may see here -->fiddle

fiddle preview -->

openlayers 3 new version 3.9.0

open layers version 3.9.0 launched.
release notes may be found here --> release notes
Latest version may be downloaded from here -->v3.9.0.zip.
Still wait, for the vector api, the donut polygon support (intermediate solution for donut polygon may be found here -->draw hole fiddle ) as well as the undo/redo interaction. Hope to get these on next version.
There is also a new version for the ol3-cesium based on OL 3.9.0 and Cesium 1.13.
ol3-cesium v1.8 may be downloaded from here -->get it