Highcharts vue. Как использовать Drilldown на карте?

Question

Я хочу спросить, как использовать детализацию на карте, используя vue js.

На этом этапе я следовал за кодом в этой ссылке:

http://jsfiddle.net/maxsinev/h9x3kpn5/3/

Что я хочу спросить:

1. Когда я меняю страну на Индонезию, я получаю сообщение об ошибке 403, действительно ли оно доступно только для некоторых стран? Если вы можете, пожалуйста, объясните.

По моему мнению, это происходит потому, что нет карт всех индонезийских провинций.

Если есть другие способы, пожалуйста, объясните.

Main. js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'

import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'
import mapInit from 'highcharts/modules/map'
import addWorldMap from './worldmap'

mapInit(Highcharts)
addWorldMap(Highcharts)
Vue.prototype.$mapChart = Highcharts
Vue.use(HighchartsVue)

process.env.NODE_ENV == 'development' ? Vue.config.productionTip = false : Vue.config.productionTip = true

new Vue({
    router,
    store,
    vuetify,
    render: h => h(App)
}).$mount('#app')

Mapsdrilldown. vue

<template>
  <highcharts ref="highcharts" :constructor-type="'mapChart'" :options="mapOptions" class="map"></highcharts>
</template>

<script>
export default {
  data () {
    return {
      mapOptions: {
        chart: {
          map: 'myMapName'
        },
        title: {
          text: 'Highmaps basic demo'
        },
        subtitle: {
          text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world.js">World, Miller projection, medium resolution</a>'
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        colorAxis: {
            min: 0
        },
        drilldown: {
            activeDataLabelStyle: {
            color: '#FFFFFF',
            textDecoration: 'none',
            textOutline: '1px #000000'
            },
            drillUpButton: {
            relativeTo: 'plotBox',
            position: {
                x: 70,
                y: 280
            }
            }
        },
        series: [{
            data: this.$mapChart.geojson(this.$mapChart.maps['myMapName']).map((d, i) => {
            // set value just for example
                d.drilldown = true
                d.value = i
                return d
            }),
            name: 'Random data',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }]
      }
    }
  },
  created () {
    this.mapOptions.chart.events = {
        drilldown: this.drilldown.bind(this),
        drillup: this.drillup.bind(this)
    }
  },
  methods: {
    drilldown (e) {
      let { chart } = this.$refs.highcharts
      if (!e.seriesOptions) {
        let mapKey = 'countries/id/' + e.point.properties['hc-key'] + '-all'
        if (this.$mapChart.maps[mapKey]) {
          this.prepareDrilldownData(mapKey, e.point)
          return
        }
        this.isLoading = true
        this.loadScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', () => {
          this.isLoading = false
          this.prepareDrilldownData(mapKey, e.point)
        })
      }
      chart.setTitle(null, { text: e.point.name })
    },
    drillup (e) {
        console.log(e);
      let { chart } = this.$refs.highcharts
      chart.setTitle(null, { text: '' })
    },
    prepareDrilldownData (mapKey, point) {
      let { chart } = this.$refs.highcharts
      let data = this.$mapChart.geojson(this.$mapChart.maps[mapKey]).map((d, i) => {
        // set value just for example
        d.value = i
        return d
      })
      chart.addSeriesAsDrilldown(point, {
        name: point.name,
        data: data,
        dataLabels: {
          enabled: true,
          format: '{point.name}'
        }
      })
    },
    loadScript (url, onLoad) {
        var scriptTag = document.createElement('script')
        scriptTag.src = url
        scriptTag.onload = onLoad
        scriptTag.onreadystatechange = onLoad
        document.body.appendChild(scriptTag)
    }
  }
}
</script>
 <style scoped>
.map {
  min-height: 500px;
}
 </style>

В этом случае в моем проекте vue ничего не произошло. Но когда я перешел по ссылке выше, развертка работала, но запрос с карты был 403.

В JSFIDDLE https://jsfiddle.net/mochakbar/gronhjvz/1/

Спасибо