When does mapquest route finish rendering?

Question

I am using MapQuest map with leaflet. The routes are being injected dynamically. When we add routes to the map, it takes time to finish the rendering. I want to block the screen while the map is being rendered. Is there any way(mapquest API or leaflet event) to know the map is ready or finished rendering so that I can stop the blocking of the screen.

I'm using Leaflet to add the routes. Something like this:

function (locations) {
  const dir = MQ.routing.directions();
  dir.route({ locations: locations });
  comp.mqroute = MQ.routing.routeLayer({
    directions: dir,
    fitBounds: true,
    draggable: false,
  });
  comp.map.addLayer(comp.mqroute);
}

Answer 1

This is a case of RTFM.

The fact that you're using MQ.routing.directions in your code tells me that you're using the Mapquest routing plugin for Leaflet, which has complete API documentation.

By reading that API documentation, one can notice a success event, I quote:

success

Fired when route data has been retrieved from the server and shapePoints have been decompressed. [...]

I have a heavy suspicion that you don't need to know when the route is rendered (meaning: when the lines have been displayed on the screen) but rather when then network requests for the route are finished (which is what takes most time). The time to actually render lines on the screen is usually negligible unless one is working with thousands of segments (after the automatic douglas-peucker simplification).

I also have a heavy suspicion that this is a XY problem, and that the root problem you're trying to solve is race conditions when the user is (re-)requesting routes too fast, to which the solution is just throttling the requests rather than blocking the UI.

How to use this success event is illustrated in MapQuest's Route Narrative example:

dir = MQ.routing.directions();

dir.on('success', function(data) {
     // ...
     // the code here will run once the route is ready
     // ...
  }