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/exporting.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/europe.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) {
                    if (!e.seriesOptions) {
                        var chart = this,
                            pointWithLatLon = function (point, latLon) {
                                return Highcharts.merge(point, chart.transformFromLatLon(latLon, 
                                         Highcharts.maps['custom/europe']['hc-transform']['default']));
                            };

                        chart.addSeriesAsDrilldown(e.point, {
                            mapData: Highcharts.maps['custom/europe'],
                            joinBy: 'hc-key',
                            data: [
                                {'hc-key': 'gr', value: 4},
                                {'hc-key': 'dk', value: 2},
                                {'hc-key': 'gb', value: 2},
                                {'hc-key': 'fr', value: 2},
                                {'hc-key': 'ru', value: 1}
                            ]
                        });
                        
                        chart.addSeries({
                            id: 'cities',
                            name: 'Cities',
                            type: 'mappoint',
                            color: 'black',
                            marker: {
                                symbol: 'circle'
                            },
                            data: [
                                pointWithLatLon({ name: 'Paris' }, { lat: 48.8567, lon: 2.3508}),
                                pointWithLatLon({ name: 'Bucharest' }, { lat: 44.4325, lon: 26.103889}),
                                pointWithLatLon({ name: 'Riga' }, { lat: 56.948889, lon: 24.106389})
                            ]
                        });
                    }
           ...