World continents - Highmaps

Highmaps demo

by Sajeetharan Sinnathurai

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/drilldown.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world-continents.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/asia.js"></script>

<script src="http://code.highcharts.com/mapdata/custom/oceania.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/europe.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/north-america.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/south-america.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/lk/lk-all.js"></script>


<div id="container"></div>

CSS

#container {
  height: 500px;
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}

.loading {
  margin-top: 10em;
  text-align: center;
  color: gray;
}

JavaScript

$(function() {

  // Initiate the chart
  $('#container').highcharts('Map', {
    title: {
      text: 'Lat/lon on drilldown'
    },

    chart: {
      events: {

        drilldown: function(e) {
          // alert(e.point.name);
          if (!e.seriesOptions) {
            //alert(e.point);
            var chart = this,
              pointWithLatLon = function(point, latLon) {
                return Highcharts.merge(point, chart.transformFromLatLon(latLon,
                  Highcharts.maps['custom/world']['hc-transform']['default']));
              };

            var continent;
            var contName;
            switch (e.point.name) {
              case "Asia":
                chart.addSeriesAsDrilldown(e.point, {
                  mapData: Highcharts.maps['custom/asia'],
                  joinBy: 'hc-key',
                  click: function() {
                    alert('Hello');
                  },
                  data: [{
                    'hc-key': 'ir',
                    value: 4
                  }, {
                    'hc-key': 'ph',
                    value: 12
                  }, {
                    'hc-key': 'sa',
                    value: 25
                  }, {
                    'hc-key': 'jp',
                    value: 5
                  }, {
                    'hc-key': 'mn',
                    value: 26
                  }, {
                    'hc-key': 'kw',
                    value: 9
                  }, {
                    'hc-key': 'iq',
                    value: 14
                  }, {
                    'hc-key': 'ae',
                    value: 6
                  }, {
                    'hc-key': 'la',
                    value: 9
                  }, {
                    'hc-key': 'pk',
                    value: 4
                  }, {
                    'hc-key': 'jk',
                    value: 45
                  }, {
                    'hc-key': 'qa',
                    value: 9
          ...