title: How to display Loading Icon while rendering Markers on the MAP
body: <p>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.</p>
  <p>I'm using latest Nokia(Here)- Maps API version <code>2.5.3</code>.
  i have tried with <code>transitionstart</code> and <code>transistionend</code> events but it is not showing my GIF icon but if i only handle the <code>tranisionstart</code> 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.</p>
  <p>I tried this:</p>
  <p><strong>JavaScript:</strong></p>
  <pre><code>  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(&quot;transitionstart&quot;, function () {
      ChangeProgressGif(true);
   });
  
   map.addListener(&quot;transitionend&quot;, function () {
          ChangeProgressGif(false);
      });
  
  
  function ChangeProgressGif(progressFlag)
  {       
      if (progressFlag)
          document.getElementById(&quot;ProgressIcon&quot;).style.visibility = &quot;visible&quot;;
      else
          document.getElementById(&quot;ProgressIcon&quot;).style.visibility =  &quot;hidden&quot;;
  }
  </code></pre>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;img src=&quot;Images\\Resources\\LoadingGIF.gif&quot; id=&quot;ProgressIcon&quot;/&gt;
  </code></pre>
  <p><strong>NOTE:</strong> i have tried BaseMapChangeStart and BaseMapChangeEnd events also but none of them worked. any help would be greatly appreciated.</p>
  <p><strong>EDIT:</strong> after trying the @Jason solution it is even taking some time to render the points after the <code>CluterProvider</code> state is changed to <code>ready</code>.</p>
  <p>and as mentioned in comments i tried with state <code>Clustered</code> as well, but state <code>Clustered</code> is coming before the <code>ReadyState</code>.</p>
  <p><strong>Console Output from chrome:</strong></p>
  <p><img src="https://i.stack.imgur.com/LxtfJ.png" alt="enter image description here" /></p>
  <p>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.</p>
  <p>Thank you.</p>