Highcharts Demo

author(s): Øystein Moseng Torstein Hønsi

by Aman Adhikari

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/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/mapdata/custom/world-highres.js"></script>
<div id="container"></div>

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 1500px;
    margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

$(function () {

    var H = Highcharts,
        map = H.maps['custom/world-highres'],
        chart;
        var json = [{"abbrev":"AL","parentState":"Alabama","capital":"Montgomery","lat":32.38012,"lon":-86.300629,"population":205764,"z":205764}]
        var data = [];
        $.each(json, function () {
            this.z = this.population;
            data.push(this);
        });
        
        console.log(JSON.stringify(data));

        $('#container').highcharts('Map', {

            title: {
                text: 'Highmaps lat/lon demo'
            },

            tooltip: {
                formatter: function () {
                    return this.point.capital + ', ' + this.point.parentState + '<br>Lat: ' + this.point.lat + ' Lon: ' + this.point.lon + '<br>Population: ' + this.point.population;
                }
            },

            series: [{
                name: 'Countries',
                mapData: map, 
                border:false,              
                nullColor: 'rgba(200, 200, 200, 0.2)',
                showInLegend: false
            }, {
                type: 'mapbubble',
                dataLabels: {
                    enabled: true,
                    format: '{point.capital}'
                },
                name: 'Cities',
                data: data,
                maxSize: '12%',
                color: H.getOptions().colors[0]
            }]
        });

        chart = $('#container').highcharts().mapZoom(0.2, 1300, -7750);;
    //$('#mapContainer').highcharts().mapZoom(0.2, 1300, -7750);

    // Display custom label with lat/lon next to crosshairs
  
});