Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.src.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>


<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(function() {

  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=us-population-density.json&callback=?', function(data) {

    // Make codes uppercase to match the map data
    $.each(data, function() {
      this.code = this.code.toUpperCase();
    });
    console.log(data);
    var point = {};

    var dummyData = [{
      code: 'NJ',
      value: 1
    }, {
      code: 'OH',
      value: 1
    }, {
      code: 'ND',
      value: 1
    }, {
      code: 'SD',
      value: 1
    }];

    var realData = [{
      lat: 47.44439588071483,
      lon: -100.71715548110211,
      value: 117
    }, {
      lat: 44.70260711020746,
      lon: -100.27445285060993,
      value: 350
    }, {
      lat: 40.31102515359527,
      lon: -82.72203429498387,
      value: 840
    }, {
      lat: 39.89016758310687,
      lon: -74.53569085311527,
      value: 14
    }];





    // Instanciate the map
    var chart = Highcharts.mapChart('container', {

      chart: {
        animation: false,
        borderWidth: 1,
        events: {
          load: function() {
            var rect = this.renderer.rect(0, 0, 1, 1).attr({
              stroke: 'black',
              'stroke-width': 1
            }).add();

            var paths = [];

            realData.forEach(point => {
              var pos = this.fromLatLonToPoint({
                lat: point.lat,
                lon: point.lon
              });

              point.x = this.xAxis[0].toPixels(pos.x);
              point.y = this.yAxis[0].toPixels(pos.y)

              rect.attr({
                x: point.x,
                y: point.y
              });

              var list = Array.prototype.filter.call(
                this.renderer.box.getIntersectionList(rect.element.getBBox(), null),
                element => element.tagName === 'path'
              );

              point.path = list.length && list[0];
              paths.push(point.path);
            });

            console.log(realData);



       ...