How to add custom map and custom data to Highmaps?

Question

I am struggling with including a custom map with custom data into Highmaps. I am sure it's a pretty dumb thing, but I just can't find any examples and explanations on the web.

I have a JSON file with the data, and a GeoJSON file with the map. So, it could look like this:

        $(function () 
        {
            $.getJSON('http://xxx/data/P_.json', function (data)
            {
                // Initiate the chart
                $('#container').highcharts('Map',
                {
                    series : [
                    {
                        data : data,
                        mapData: 'http://www/data/countries.geojson',
                        joinBy: ['Name', 'Countries'],
                    }]
                });
            });
        });         

But something is quite obviously wrong. How do I add then the custom mapData?

Thanks for your help!

Answer 1

There is a instruction about how to create custom geoJSON: http://www.highcharts.com/docs/maps/custom-geojson-maps

In 9. there is link to jsFiddle that show how geoJSON file should be parsed to be used by Highcharts as mapData: http://jsfiddle.net/highcharts/xbzxfx2L/

$('#run').click(function () {     
    var geojson = $.parseJSON($('#geojson').val());

    // Initiate the chart
    $('#container').slideDown().highcharts('Map', {
        series: [{
            mapData: geojson
        }]
    });    
});