How to display Loading Icon while rendering Markers on the MAP

Question

Rightnow i'm developing an application where i have to display huge number of markers on the map roughly (30K to 50K).right now while rendering the map it is taking time to render whole points so i would like to add an loading gif icon while Navteq Map renders the pointsso that user will be aware of that map is rendering the points.

I'm using latest Nokia(Here)- Maps API version 2.5.3. i have tried with transitionstart and transistionend events but it is not showing my GIF icon but if i only handle the tranisionstart event then the ICON willbe shown.but if i handle both events it would display the icon, i'm suspecting that it is due to start and end events are attached sidebyside.

I tried this:

JavaScript:

  map = new nokia.maps.map.Display(mapContainer, {
    // Initial center and zoom level of the map

    center: [51.410496, 5.459197],
    zoomLevel: ZoomLevel,
    components: [
        // We add the behavior component to allow panning / zooming of the map
        new nokia.maps.map.component.Behavior(),
        new nokia.maps.map.component.ZoomBar(),
        new nokia.maps.map.component.Overview(),
        new nokia.maps.map.component.TypeSelector(),
        new nokia.maps.map.component.ScaleBar(),
        infoBubbles
    ]
 });
 map.addListener("transitionstart", function () {
    ChangeProgressGif(true);
 });

 map.addListener("transitionend", function () {
        ChangeProgressGif(false);
    });


function ChangeProgressGif(progressFlag)
{       
    if (progressFlag)
        document.getElementById("ProgressIcon").style.visibility = "visible";
    else
        document.getElementById("ProgressIcon").style.visibility =  "hidden";
}

HTML:

<img src="Images\\Resources\\LoadingGIF.gif" id="ProgressIcon"/>

NOTE: i have tried BaseMapChangeStart and BaseMapChangeEnd events also but none of them worked. any help would be greatly appreciated.

EDIT: after trying the @Jason solution it is even taking some time to render the points after the CluterProvider state is changed to ready.

and as mentioned in comments i tried with state Clustered as well, but state Clustered is coming before the ReadyState.

Console Output from chrome:

from the console i observed that there are many ready states and can we identify which one is the last ready state so that we can stop/hide the loading icon.

Thank you.

Answer 1

Checking if clustering is complete

You probably want to add an observer to the state property of the cluster provider instead:

function clusterDataPoints(data) {
  clusterProvider = new nokia.maps.clustering.ClusterProvider(map, {
    eps: 16,
    minPts: 1,
    dataPoints: data
  });

  clusterProvider.addObserver("state", 
    function (obj, key, newValue, oldValue) { 
      console.log(newValue);
    }
  );
  clusterProvider.cluster();
}

The ClusterProvider will change state to STATE_READY whenever clustering is complete.

Adding a loading icon

To add a "Loading" icon, you should add a custom map control like this:

function extend(B, A) {
  function I() {}
  I.prototype = A.prototype;
  B.prototype = new I();
  B.prototype.constructor = B;
}

function HtmlControl (html, id) {
  nokia.maps.map.component.Component.call(this);
  this.init(html, id);
}

extend(HtmlControl,
    nokia.maps.map.component.Component);


HtmlControl.prototype.init = function (html, id) {
  that = this;
  that.id = id
  that.set('node',  document.createElement('div'));  
  that.node.innerHTML = html;
};

HtmlControl.prototype.getId = function () { 
  return 'HtmlControl.' + this.id;
};

HtmlControl.prototype.attach = function (map) {
  map.getUIContainer().appendChild(this.node);
};

HtmlControl.prototype.detach = function (display) {
  map.getUIContainer().removeChild(this.node);
};

It can be added to the map like this:

htmlControl = new HtmlControl(
     '<div class=\'loader\' style=\'width:540px; height:334px; display:block\'></div>', 'Loader');
  map.components.add(htmlControl);

and styled using CSS:

<style>
  .loader {
    position: relative;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:black;
    background-color: rgba(0,0,0,0.5);
    background-image: url(img/loading.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }
  </style>

You would then just need to add() or remove() the html control to display the loading gif.