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



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


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
  • Can you add your vector layer definition code to your question? This will help finding the right answer. – TomazicM Jun 21 '19 at 16:06
  • added the vector which is loaded on the map – csandreas1 Jun 22 '19 at 4:24
  • In this case my answer below should be OK. – TomazicM Jun 22 '19 at 7:04
  • @TomazicM okay will check on Monday and let you know. Thanks – csandreas1 Jun 22 '19 at 11:20

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);

  • it seems that browsers cache the Json file and sometimes this method cannot hide the preloader – csandreas1 Jun 28 '19 at 7:30

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

  • i log the event and it executes 96 times, sometimes 94,95,etc. Not sure if it works with vector layers as it executes immediately when base tile layer is loaded – csandreas1 Jun 21 '19 at 9:38
  • From api docs: “Triggered when rendering is complete, i.e. all sources and tiles have finished loading for the current viewport, and all tiles are faded in.” – dmh126 Jun 21 '19 at 9:53
  • yes but i am trying to detect vector load not tile. Vector loads 15 mb, tile is way less – csandreas1 Jun 21 '19 at 10:01
  • 3
    The Layer class triggers the same event. Just use layer.on(...) – dmh126 Jun 21 '19 at 10:05
  • the event is triggered before the json in the vector layer is downloaded – csandreas1 Jun 21 '19 at 10:35

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.