Displaying Points And Drilldown Data in Highmaps

Question

I'm having a problem using Highmaps to display both heat map data as well as points on a map. Here is a example:

http://jsfiddle.net/3se9q3uq/

This is the just out of the box example for a US drill down map ( http://www.highcharts.com/maps/demo/map-drilldown ) but I've modified it so that if you drill down into the state of Illinois I'm attempting to add a single point (within a series) to the map.

Below is the snippet I'm using to do this:

chart.addSeries({
  id: 'points',
  type: 'mappoint',
  name: 'Store Data',
  color: Highcharts.getOptions().colors[8],
  data: [{
    name: 'Point 1',
    lat: 40.0633,
    lon: -88.2498
  }]
});

The result (if you open your browsers console) is an error stating:

Highcharts error #22: www.highcharts.com/errors/22

I've tried converting coordinate systems and instead plot X & Y:

var pos = chart.fromLatLonToPoint({
   lat: json[i].latitude,
   lon: json[i].longitude
});

But that didn't work as it fails to convert the points, returning 0 for X and null for Y. I've also tried changing the map type but that doesn't work either.

I can create a map of just points without drill down but I cannot seem to get layers of heat map like effect (colors) with drill downs that have the same effect and points. I don't see a limitation listed anywhere on their side about points and drill down / coloring segments.

Has anyone been able to get this working before? Am I thinking of these map layers to generically and this just isn't doable?

Answer 1

To use latitude and longitude you need to include Proj4js. Also, you need to either do manual conversion between coordinate systems, or be using maps from the Highmaps map collection. For example:

<script src="http://.../proj4.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>

In your case the drilldown example wraps the Highchart.maps in Highcharts.geojson to include extra attributes (drilldown and value), like this:

var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);

$.each(data, function (i) {
    this.drilldown = this.properties['hc-key'];
    this.value = i; // Non-random bogus data
});

$('#container').highcharts('Map', {
    // ...
    series : [{
        data : data,
        name: 'USA'
    }]
});

This seems to cause Highmaps to not recognize the map as one from the collection, and you are therefor not allowed to use latitude and longitude with this method.

Instead, you can use Highcharts.maps as it is, and use both mapData and data with joinBy to attach extra data that way, while keeping the latitude/longitude functionality, like this:

var myData = [{
    "hc-key": "us-ma",
    "value": 1
}];

$('#container').highcharts('Map', {
    // ...
    series : [{
        data : myData,
        mapData : Highcharts.maps['countries/us/us-all'],
        joinBy: 'hc-key',
        name: 'USA'
    }]
});

Unfortunately, in using this technique on two levels (top and drilldown) and your additional point-series I encountered all kinds of problems. Strangely including the same information in both data and mapData seem to avoid them, so I ended up with this approach:

var mapData = Highcharts.maps['countries/us/us-all'],
    myData = Highcharts.geojson(Highcharts.maps['countries/us/us-all']);

$.each(myData, function (i) {
    this['hc-key'] = this.properties['hc-key'];
    this.drilldown = this.properties['hc-key'];
    this.value = i;
});

$('#container').highcharts('Map', {
    // ...
    series : [{
        data : myData,
        mapData : mapData,
        joinBy: 'hc-key',
        name: 'USA'
    }]
});

See this updated JSFiddle of how it currently looks with drilldown, latitude/longitude support and point series.

I'll also include this JSFiddle, which uses the more standard data approach (instead of cloning mapData), but has all kinds of problems which I'm not quite sure why they happen.