score:7

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.


Related Query

More Query from same tag