<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";

// 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: [{
    // Use the gb-all map with no data as a basemap
    mapData: Highcharts.maps['countries/kr/kr-all'],
    name: 'Basemap',
    borderColor: '#707070',
    nullColor: 'rgba(200, 200, 200, 0.3)',
    showInLegend: false
  }, {
    name: 'Separators',
    type: 'mapline',
    data: Highcharts.geojson(Highcharts.maps['countries/kr/kr-all'], 'mapline'),
    color: '#707070',
    showInLegend: false,
    enableMouseTracking: 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 to return an SVG path between two points, with an arc
function pointsToPath(from, to, invertArc) {
  var arcPointX = (from.x + to.x) / (invertArc ? 2.4 : 1.6),
    arcPointY = (from.y + to.y) / (invertArc ? 2.4 : 1.6);
  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.