Detailed map, US counties

author(s): Torstein Hønsi

by Rajan Paneru

HTML

<div id=
"container" style="height: 520px; width: 800px; margin: 0 auto; text-align:center; line-height: 520px">
    Downloading map...
</div>

<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-all.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<button id="toggle">Hide state maps</button>

JavaScript

Highcharts.getJSON(
  'https://cdn.jsdelivr.net/gh/highcharts/highcharts@c116b6fa6948448/samples/data/us-counties-unemployment.json',
  function(data) {
    Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/us-population-density.json', function(data2) {
      // Make codes uppercase to match the map data
      data2.forEach(function(p) {
        p.code = p.code.toUpperCase();
      });

      var countiesMap = Highcharts.geojson(
          Highcharts.maps['countries/us/us-all-all']
        ),
        // Extract the line paths from the GeoJSON
        lines = Highcharts.geojson(
          Highcharts.maps['countries/us/us-all-all'], 'mapline'
        ),
        // Filter out the state borders and separator lines, we want these
        // in separate series
        borderLines = Highcharts.grep(lines, function(l) {
          return l.properties['hc-group'] === '__border_lines__';
        }),
        separatorLines = Highcharts.grep(lines, function(l) {
          return l.properties['hc-group'] === '__separator_lines__';
        });

      // Add state acronym for tooltip
      Highcharts.each(countiesMap, function(mapPoint) {
        mapPoint.name = mapPoint.name + ', ' +
          mapPoint.properties['hc-key'].substr(3, 2);
      });

      document.getElementById('container').innerHTML = 'Rendering map...';

      // Create the map
      setTimeout(function() { // Otherwise innerHTML doesn't update
        const chart = Highcharts.mapChart('container', {
          chart: {
            map: 'countries/us/us-all',
            borderWidth: 1,
            marginRight: 20 // for the legend
          },

          title: {
            text: 'US Counties unemployment rates, January 2018'
          },

          legend: {
            layout: 'vertical',
            align: 'right',
            floating: true,
            backgroundColor: ( // theme
              Highcharts.defaultOptions &&
             ...