Three level drill down highmap

I am trying to make multilevel drill down map using highmap, like first map will show all the countries, then clicking any country will drill down to all states in that country, then selecting any state will show all the districts in that.

I have three boundary files, - countries, states and districts. I have never done javascript before, I am from python and R background. However i dont see any such examples except this - https://www.highcharts.com/maps/demo/map-drilldown . I see this in javascript and also its using only 2 levels. Can anyone help me to use this for 3rd drill down, also i need to join the country/state/district code with my data and show the value in tooltip.

Thanks.

Basic usage:

    series: [{
  name: 'World',
  data: [{
    'hc-key': 'eu',
    drilldown: 'd1',
    value: 10
  }],
  mapData: Highcharts.maps['custom/world-continents'],
  joinBy: 'hc-key',
  dataLabels: {
    enabled: true,
    format: '{point.name}' + '<br />' + ' {point.value}' + '%'
  }
}],
drilldown: {
  series: [{
    id: 'd1',
    mapData: Highcharts.maps['custom/asia'],
    joinBy: 'hc-key',
    click: function() {
      alert('Hello');
    },
    data: [{
      'hc-key': 'ir',
      value: 4,
      drilldown: 'd2'
    }]
  }, {
    id: 'd2',
    mapData: Highcharts.maps['custom/europe'],
    joinBy: 'hc-key',
    data: [{
      'hc-key': 'dk',
      value: 4
    }]
  }]
}

live example: http://fiddle.jshell.net/jktrefL1/