[GIS] Map render complete event is not triggered – Openlayers 5

geoserveropenlayers

I have written a function in Map render complete event to hide the progress icon if all map tiles are rendered. But the map render complete event is not fired after I added a empty vector layer on map. Below is the code snippet.

var osmLayer = new ol.layer.Tile({
    source: new ol.source.OSM({
        "url": "http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
    })
});
osmLayer.getSource().on('tileloadstart', renderStart);

var extentTransform = ol.proj.transformExtent([minx, miny, maxx, maxy], "EPSG:7844", "EPSG:3857");
osMap = new ol.Map({
    layers: [osmLayer],
    target: 'map',
    view: new ol.View({
        zoom: 11,
        maxZoom: 20,
        minZoom: 5,
        extent: extentTransform,
        center: ol.extent.getCenter(extentTransform),
        controls: []
    })
});
osMap.on('rendercomplete', renderComplete);

var putStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: '#900C3F',
        width: 3
    }),
    fill: new ol.style.Fill({
        color: 'rgba(144, 12, 63, 0.5)'
    })
});   

vectorSource = new ol.source.Vector({
    features: []
});

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

osMap.addLayer(vectorPolygon);

function renderComplete(event) {
    $(".MapLoadPopup").hide(); // Tile loading progress hide
}

function renderStart(evt) {
    $(".MapLoadPopup").show(); // Tile loading progress show
}

function test(){
    vectorSource.clear();
    var geojsonObject = {
        'type': 'Feature',
        'geometry': {
            "type": "Polygon",
            "coordinates": JSON.parse(polygon),
        }
    };

    var features = new ol.format.GeoJSON().readFeatures(geojsonObject);
    vectorSource.addFeatures(features);
  }

If I commented the osMap.addLayer(vectorPolygon); line, the render complete event is triggered correctly. When sourcing this issue in internet, it is came to know that the map render complete event is not fired if we added a vector layer without url.

Myself also tested this case with some url and it is working fine. If so, what could be the solution to overcome this issue.

Best Answer

I have found an alternative way for the render complete event to fire the code once all the tiles are rendered on our map. It is working fine for my case.

var loading = 0;
var loaded = 0;

osmLayer.getSource().on('tileloadstart', tileLoadStart);
osmLayer.getSource().on('tileloadend', tileLoadEnd);
osmLayer.getSource().on('tileloaderror', tileLoadEnd);

//Repeat the same for all layers added on map

function tileLoadStart(event) {
  ++loading;
  console.log("Loading : " + loading);
  if (loading === 1) {
    $(".MapLoadPopup").show(); // show loading progress at start of tile load
  }      
}

function tileLoadEnd(event) {
  ++loaded;
  console.log(loading + ' ' + loaded);
  if (loading === loaded) {
    loading = 0;
    loaded = 0;
    $(".MapLoadPopup").hide(); // Tile loading progress hide
  }
}
Related Question