Using rendercomplete for vector layer in OpenLayers 5

Question

I am interested to add a preloader on the web page, cause i'm loading on the map a 15mb vector, so when all layers are loaded on the map i will hide the preloader.

I have found the rendercomplete function in the API docs, how can i implement this?

something like

map.rendercomplete(function(){
//...
})

Vector:

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
    url: 'getjson.json',
    format: new ol.format.GeoJSON()
    }),style:style_simple
});

Map:

var map = new ol.Map({
  target: 'map',
  layers: [roadlayer,vector],
    controls: ol.control.defaults().extend([new ol.control.ScaleLine()]),
    view: new ol.View({
    center: ol.proj.fromLonLat([33.33386, 35.14710]),
    zoom: 14,
    maxZoom: 19
  })
});

Answer 1

Catching events is pretty straightforward:

map.on('rendercomplete', e => {
    // do something

})

Depending on your approach you need to hide the loader. If it's a Single Page Application you change the state. If it's a plain JS script you can remove the loader node from the DOM like var el = document.getElementById('loader'); if (el){el.remove()}

Answer 2

Cleanest solution seems to be to test the state of vector source with getState() method. When source data is loaded, it returns ready value.

If vector layer is GeoJSON, implementation could look something like this:

var vectorSource = new ol.source.Vector({
  url: 'myGeojSON_file.geojson',
  format: new ol.format.GeoJSON()
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: style
});

var sourceEventListener = vectorSource.on('change', function(e) {
  if (vectorSource.getState() == 'ready') {
    console.log('GeoJSON loaded');
    vectorSource.un('change', sourceEventListener);
  }
});

map.addLayer(vectorLayer);