0

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.

  • In the first place, why do you want to add layer which has no content? – TomazicM Aug 22 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 at 13:27
  • Then simply put osMap.addLayer(vectorPolygon); inside renderComplete function. – TomazicM Aug 22 at 14:40
  • Inside means how? much helpful if you could share piece of code. Thanks – venkat Aug 22 at 18:31
  • Between { and } in function definition: function renderComplete(event) { ... }. – TomazicM Aug 22 at 18:41
1

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
  }
}

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.