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

Answer 1

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

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

2. 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();
   

3. 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)
   

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

5. 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/