How To Display Loading Icon While Rendering Markers On The Map

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

Solution 1:

Checking if clustering is complete

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

functionclusterDataPoints(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:

functionextend(B, A) {
  functionI() {}
  I.prototype = A.prototype;
  B.prototype = newI();
  B.prototype.constructor = B;
}

functionHtmlControl (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.