Flag Demo

author(s): Torstein Hønsi

by Geo George

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<!-- Flag sprites service provided by Martijn Lafeber, https://github.com/lafeber/world-flags-sprite/blob/master/LICENSE -->
<link rel="stylesheet" type="text/css" href="https://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" />


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

CSS

#container {
  height: 500px;
  width: 800px;
  margin: 0 auto;
}

.highcharts-tooltip>span {
  padding: 10px;
  white-space: normal !important;
  width: 200px;
}

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

.f32 .flag {
  vertical-align: middle !important;
}

JavaScript

$.getJSON('https://api.myjson.com/bins/1gv4ut', function(data) {

  // Add lower case codes to the data set for inclusion in the tooltip.pointFormat
  $.each(data, function(i,val) {
  	var thiscode=val.code;console.log(thiscode);
    val["flag"] = thiscode.trim().toLowerCase();
  });

  // Initiate the chart
  Highcharts.mapChart('container', {

    title: {
      text: 'Fall 2017 Undergraduate Worldwide Geographic Breakdown'
    },

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

    tooltip: {
      backgroundColor: 'none',
      borderWidth: 0,
      shadow: false,
      useHTML: true,
      padding: 0,
      pointFormat: '<span class="f32"><span class="flag {point.flag}">' +
        '</span></span> {point.name}<br>' +
        '<span style="font-size:30px">{point.value} student(s)</span>',
      positioner: function() {
        return {
          x: 0,
          y: 250
        };
      }
    },

    series: [{
      data: data,
      mapData: Highcharts.maps['custom/world'],
      joinBy: ['name', 'name'],
      name: 'Student population',
      states: {
        hover: {
          color: '#a4edba'
        }
      }
    }]
  });
});