webpacking highmaps

mapChart.vue

<template>
  <div class="mapchart">
    <highmaps :options="mapOptions">Loading map of {{ mapScope }}...</highmaps>
  </div>
</template>

<script>
import Vue from 'vue';
import VueHighcharts from 'vue-highcharts';
import loadMap from 'highcharts/modules/map';
import Highcharts from 'highcharts/highmaps';
import worldMap from './maps/world-palestine-lowres.geo.json';
import northAmericaMap from './maps/north-america-no-central.geo.json';

loadMap(Highcharts);
Vue.use(VueHighcharts, { Highcharts });


export default {
  name: "map-chart",
  computed: {
    mapData() {
      return this.mapScope === 'world' ? worldMap : northAmericaMap;
    },
    mapScope() {
      // If the data contains only Canadian, Mexican or US data, then display a North American map
      const { data } = this.remoteData.chartData.series[0];
      if (data.length > 3) return 'world';
      for (let country of data) {
        if (country.code !== 'us' && country.code !== 'ca' && country.code !== 'mx') {
          return 'world';
        }
      }

      return 'northAmerica';
    },

    mapOptions() {
      const { chartData, title } = this.remoteData;
      return {
        title,
        map: this.mapData,
        series: [
          Object.assign({
            dataLabels: {
              enabled: true
            }
          }, chartData.series[0])
        ]
      }
    }
  },
  props: {
    remoteData: {
      type: Object
    }
  }
}
</script>