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>


<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},
                               ...