Highmaps heatmap

Question

How can we generate a heatmap using highcharts? - All I can do is just plot them on the map.(http://www.highcharts.com/maps/demo/mappoint-latlon).

I need to heatmap similar to this (http://www.highcharts.com/maps/demo/color-axis) but data provided to me is in lat/long format

but I don't see any example related to it.

Any ideas? Thanks

So you want highcharts to determine which state your point is in based on the lat/long? — Learning2Code
There is a function chart.fromLatLonToPoint that may be of help. api.highcharts.com/highmaps/Chart.fromLatLonToPoint — Barbara Laird
It seems that highcharts is expecting the data to come in with a state code. Can this function help determine the state? — Learning2Code
So you have points in lat/lon and you want to associate its value with some regions on Highcharts map? — morganfree

morganfree morganfree · Accepted Answer · 2016-12-20T12:06:42

I do not think there is a straight way to do this. I can think of a solution which bases on getIntersectionList, so check for browser support for that method.

So for example, you use the USA states map, and you have data in the format as follows:

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
}];

Create a dummy series for the map, it can be some of the states or all of them.

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

Create a rect which will be used for intersection list.

var rect = this.renderer.rect(0, 0, 1, 1).attr({
      stroke: 'black',
      'stroke-width': 1
    }).add();

Loop through the real data. Each point's lat/lon should be mapped to x, y values according to axis scales, then to pixels.

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)

Move the rect to the calculated position and get intersection list - we want a path element from that list.

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);
    });

Loop through the dummy series and find if the dummy point's path will match the path from the intersection list. If so, the state is found on the map and you can update its value according to the real data value.

 var series = this.series[0],
      data = series.data,
      dataLen = data.length,
      i = 0;

      for (; i < dataLen; i++) {
        var idx = paths.indexOf(data[i].graphic.element);
        if (idx > -1) {
          data[i].update({
            value: realData[idx].value
          });
        }
      }

example: http://jsfiddle.net/bavLuLpj/

Highmaps heatmap

1 Answers