<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<script src="https://code.highcharts.com/mapdata/countries/kr/kr-all.js"></script>
<div id="container"></div>
#container {
  height: 680px;
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}
.loading {
  margin-top: 10em;
  text-align: center;
  color: gray;
}
var colorLessThan10 ="#1E8449", colorMoreThan10 ="#F9E79F", colorMoreThan50 ="#FF0000";
(async () => {

  const topology = await fetch(
    'https://code.highcharts.com/mapdata/countries/kr/kr-all.topo.json'
  ).then(response => response.json());
  
  
// Initialize the chart
var chart = Highcharts.mapChart('container', {

  title: {
    text: 'South Korea domestic flight routes'
  },

  legend: {
        align: 'right',
    layout: 'vertical',
    floating: true,
    x:-50,
  },

  mapNavigation: {
    enabled: true
  },

  tooltip: {
    formatter: function () {
      return "<b>" +this.point.id +"</b>"
    }
  },

  plotOptions: {
    series: {
      marker: {
        fillColor: '#FFFFFF',
        lineWidth: 2,
        lineColor: Highcharts.getOptions().colors[1]
      }
    }
  },

  series: [{

    mapData: topology,
    name: 'Basemap',
    borderColor: '#707070',
    nullColor: 'rgba(200, 200, 200, 0.3)',
    showInLegend: false
  }, {
    // Specify cities using lat/lon
    type: 'mappoint',
    name: 'Airport',
    dataLabels: {
      format: '{point.id}'
    },
    // Use id instead of name to allow for referencing points later using
    // chart.get
    data: [{
      id: 'Seoul ICN',
      lat: 37.4602,
      lon: 126.4407,
      dataLabels: {
        color:colorMoreThan50
      }
    }, {
      id: 'Busan',
      lat: 35.166668,
      lon: 129.066666,
      dataLabels: {
        color:colorMoreThan50
      }
    }, {
      id: 'Jeju',
      lat: 33.4996,
      lon: 126.5312,
      dataLabels: {
        color:colorMoreThan50
      }
    }, {
      id: 'Seoul GMP',
      lat: 37.5587,
      lon: 126.7945,
      dataLabels: {
        color:colorMoreThan10
      }
    },{
      id: 'Wonju',
      lat: 37.3422,
      lon: 127.9202,
      dataLabels: {
        color:colorLessThan10
      }
    }, {
      id: 'Daegu',
      lat: 35.8714,
      lon: 128.6014,
      dataLabels: {
        color:colorLessThan10
      }
    }, {
      id: 'Yangyang',
      lat: 38.0754,
      lon: 128.6189,
      dataLabels: {
        color:colorLessThan10
      }
    }, {
      id: 'Gunsan',
      lat: 35.9677,
      lon: 126.7366,
      dataLabels: {
        color:colorLessThan10
      }
    }, {
      id: 'Gwangju',
      lat: 35.1595,
      lon: 126.8526,
      dataLabels: {
        color:colorLessThan10
      }
    }, {
      id: 'Pohang',
      lat: 36.0190,
      lon: 129.3435,
      dataLabels: {
        align: 'left',
        x: 5,
        verticalAlign: 'middle',
        color:colorMoreThan10
      }
    }, {
      id: 'Cheongju',
      lat: 36.6424,
      lon: 127.4890,
      dataLabels: {
        color:colorMoreThan10
      }
    }, {
      id: 'Ulsan',
      lat: 35.5384,
      lon: 129.3114,
      dataLabels: {
        color:colorLessThan10
      }
    }, {
      id: 'Yeosu',
      lat: 34.7604,
      lon: 127.6622,
      dataLabels: {
        color:colorLessThan10
      }
    }, {
      id: 'Sacheon',
      lat: 35.0038,
      lon: 128.0642,
      dataLabels: {
        color:colorLessThan10
      }
    }]
  }]
});

  function pointsToPath(fromPoint, toPoint, invertArc) {
    const
      from = chart.mapView.lonLatToProjectedUnits(fromPoint),
      to = chart.mapView.lonLatToProjectedUnits(toPoint),
      curve = 0.05,
      arcPointX = (from.x + to.x) / (invertArc ? 2 + curve : 2 - curve),
      arcPointY = (from.y + to.y) / (invertArc ? 2 + curve : 2 - curve);
    return [
      ['M', from.x, from.y],
      ['Q', arcPointX, arcPointY, to.x, to.y]
    ];
  }

var seoulICNPoint = chart.get('Seoul ICN'),
    seoulGMPPoint = chart.get('Seoul GMP'),
    busanPoint = chart.get('Busan'),
    jejuPoint = chart.get('Jeju');

// Add a series of lines for Seoul ICN
chart.addSeries({
  name: 'Seoul ICN flight routes',
  type: 'mapline',
  lineWidth: 2,
  color: Highcharts.getOptions().colors[4],
  data: [{
    id: 'Seoul ICN - Daegu',
    path: pointsToPath(seoulICNPoint, chart.get('Daegu'))
  }, {
    id: 'Seoul ICN - Busan',
    path: pointsToPath(seoulICNPoint, chart.get('Busan'), true)
  }]
});
// Add a series of lines for Seoul GMP
chart.addSeries({
  name: 'Seoul GMP flight routes',
  type: 'mapline',
  lineWidth: 2,
  color: Highcharts.getOptions().colors[1],
  data: [{
    id: 'Seoul - Daegu',
    path: pointsToPath(seoulGMPPoint, chart.get('Daegu'))
  }, {
    id: 'Seoul - Busan',
    path: pointsToPath(seoulGMPPoint, chart.get('Busan'), true)
  }, {
    id: 'Seoul - Pohang',
    path: pointsToPath(seoulGMPPoint, chart.get('Pohang'), true)
  }, {
    id: 'Seoul - Gwangju',
    path: pointsToPath(seoulGMPPoint, chart.get('Gwangju'), true)
  }, {
    id: 'Seoul - Yeosu',
    path: pointsToPath(seoulGMPPoint, chart.get('Yeosu'), true)
  }, {
    id: 'Seoul - Sacheon',
    path: pointsToPath(seoulGMPPoint, chart.get('Sacheon'), true)
  }, {
    id: 'Seoul - Ulsan',
    path: pointsToPath(seoulGMPPoint, chart.get('Ulsan'), true)
  }]
});
// Add a series of lines for Busan
chart.addSeries({
  name: 'Busan flight routes',
  type: 'mapline',
  lineWidth: 2,
  color: Highcharts.getOptions().colors[3],
  data: [{
    id: 'Busan - Jeju',
    path: pointsToPath(busanPoint, chart.get('Jeju'))
  }, {
    id: 'Busan - Yangyang',
    path: pointsToPath(busanPoint, chart.get('Yangyang'), true)
  }, {
    id: 'Busan - Seoul GMP',
    path: pointsToPath(busanPoint, chart.get('Seoul GMP'), true)
  }]
});
// Add a series of lines for Jeju
chart.addSeries({
  name: 'Jeju flight routes',
  type: 'mapline',
  lineWidth: 2,
  color: Highcharts.getOptions().colors[5],
  data: [{
    id: 'Jeju - Gwangju',
    path: pointsToPath(jejuPoint, chart.get('Gwangju'))
  }, {
    id: 'Jeju - Gunsan',
    path: pointsToPath(jejuPoint, chart.get('Gunsan'), true)
  }, {
    id: 'Jeju - Wonju',
    path: pointsToPath(jejuPoint, chart.get('Wonju'), true)
  }, {
    id: 'Jeju - Yangyang',
    path: pointsToPath(jejuPoint, chart.get('Yangyang'), true)
  }, {
    id: 'Jeju - Daegu',
    path: pointsToPath(jejuPoint, chart.get('Daegu'), true)
  }, {
    id: 'Jeju - Yeosu',
    path: pointsToPath(jejuPoint, chart.get('Yeosu'), true)
  }, {
    id: 'Jeju - Sacheon',
    path: pointsToPath(jejuPoint, chart.get('Sacheon'), true)
  }, {
    id: 'Jeju - Ulsan',
    path: pointsToPath(jejuPoint, chart.get('Ulsan'), true)
  }, {
    id: 'Jeju - Cheongju',
    path: pointsToPath(jejuPoint, chart.get('Cheongju'), true)
  }]
});

})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.