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


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

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

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

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

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.

  • In the first place, why do you want to add layer which has no content?
    – TomazicM
    Aug 22 '19 at 12:45
  • Yes, I want to clear and add geometries into this layer on map click event. I have added the code for the same above
    – venkat
    Aug 22 '19 at 13:27
  • Then simply put osMap.addLayer(vectorPolygon); inside renderComplete function.
    – TomazicM
    Aug 22 '19 at 14:40
  • Inside means how? much helpful if you could share piece of code. Thanks
    – venkat
    Aug 22 '19 at 18:31
  • Between { and } in function definition: function renderComplete(event) { ... }.
    – TomazicM
    Aug 22 '19 at 18:41

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) {
  console.log("Loading : " + loading);
  if (loading === 1) {
    $(".MapLoadPopup").show(); // show loading progress at start of tile load

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

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.