What is the proper way to add a data series after a drilldown event in Highcharts Maps?

Question

I would like to use Highcharts Maps with Drilldown module to enable a user to view all of their contacts on a global map, and then click to drilldown to continent level and see only the contacts in that continent, and then click to drilldown into a country and only see the contacts in that country.

My problem is that I don't know when or how to add the data series of contacts. The way I do it now, something prevents the drilldown from completing.

I created a simple example that starts at USA country level and then drills down into states. I'm only adding the contacts after a drill down has happened. Here is a Fiddle: https://jsfiddle.net/PolarIce/50ukqjsh/21/

Steps to reproduce:

1. Load page: https://jsfiddle.net/PolarIce/50ukqjsh/21/
2. Click the state of Texas
3. Notice the map zooms like 90% of the way, but leaves the edges of the surrounding states visible.
4. Notice the contact is shown as a dot
5. Comment out line 53-56
6. Run code
7. Click the state of Texas
8. Notice all other states are removed, but no contact is shown of course
9. Uncomment the code that adds the contact series
10. Increase the timeout to 3000 MS
11. Run Code
12. Click Texas
13. Notice the drill down completes 100%, all other states but Texas are remove
14. After 3 seconds, the contact show up

I think I'm missing something, as setting a 3 second timeout is not listed in the documentation anywhere. I did try it with 1500 MS and that works too, but still, is this a requirement?

Relevant Code:

    setTimeout(() => {
    addContactSeries(chart);
      }, 0);
            
        

   const addContactSeries = function(chart) {

    chart.addSeries({ 
    name: "contacts",
    type: 'mappoint',
    data: contacts,
    dataLabels: {
                enabled: true,
                format: '{point.name}'
            }

  
      });

    }

const contacts = [
    {
    "city": "Dallas",
    "country": "United States of America",
    "lat": 32.998524,
    "lon": -96.84046,
    "name": "Contact 1",
    "subregion": "Texas",
    "z": 1
    },
    {
    "city": "New York",
    "country": "United States of America",
    "lat": 40.728928,
    "lon": -73.99173,
    "name": "Contact 2",
    "subregion": "New York",
    "z": 1
    },
    {
    "city": "Liverpool",
    "country": "United Kingdom",
    "lat": 53.405323,
    "lon": -2.9935844,
    "name": "Contact 3",
    "subregion": "Liverpool",
    "z": 1
    },
    {
    "city": "Llandudno",
    "country": "United Kingdom",
    "lat": 53.328495,
    "lon": -3.82909,
    "name": "Contact 4",
    "subregion": "Wales [Cymru GB-CYM]",
    "z": 1
    }
];

Answer 1

This is related to asynchronous operations. To ensure that the drilldown is completed before adding the series, the recommended approach is to use the afterDrilldown() event. If you want to remove the series, you can utilize the afterDrillUp() event.

 chart: {
        events: {
            drilldown,
            afterDrillUp,
            afterDrilldown() {
                addContactSeries(this);
            }
        }
    },

Demo: https://jsfiddle.net/BlackLabel/rzt25eng/