Highcharts Demo

author(s): Torstein Hønsi

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

// Quirks:
// - The detailed map is terribly slow due to huge file size.

$(function () {
    var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);

    // Set a non-random bogus value
    $.each(data, function (i) {
      this.value = i;
    });

    // Instanciate the map
    $('#container').highcharts('Map', {

        title: {
            text : 'Dynamically load details on zoom'
        },

				subtitle: {
        		text: 'Load details for all states at once'
        },

        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },

        colorAxis: {
            min: 0,
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        series: [{
            data : data,
            name: 'USA',
            dataLabels: {
                enabled: true,
                formatter: function () {
                		return this.series.hasDetailedMap ? this.point.name : this.point.properties['postal-code'];
                }
            }
        }, {
            id: 'Separators',
            type: 'mapline',
            data: Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'),
            color: 'black',
            showInLegend: false,
            enableMouseTracking: false        
        }]
    });

		Highcharts.Series.prototype.replaceMapData = function (mapKey) {
        var series = this,
        		chart = series.chart;
        
        // Show the spinner
        chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner

        // Load the drilldown map
        $.getScript('https://code.highcharts.com/mapdata/' + mapKey + '.js', function () {
            data = Highcharts.geojson(Highcharts.maps[mapKey]);

            // Set a non-random bogus value
            $.each(data, function (i) {
              this.value = i;
      ...