Highmaps mulitple series can't seen without di

Question

I have 2 series as you can see below.

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/tr/tr-all.js"></script>

<div id="container"></div>


$(function () {

   Highcharts.mapChart('container', {
        chart: {
            spacingBottom: 20
        },
        title: {
            text: 'Multiple Map Series'
        },

        legend: {
            enabled: true
        },

        plotOptions: {
            map: {
                allAreas: true,
               // joinBy: 'code',
                mapData: Highcharts.maps['countries/tr/tr-all'],
                tooltip: {
                    headerFormat: '',
                    pointFormat: '{series.name}-{point.name}: <b>{point.value}</b>'
                }

            }
        },

        series:  [{
            name: 'AAA',
            data: $.map(['tr-an','tr-iz'], function (code) {
                return { "hc-key": code , value : 150};
            })
        },
        {
            name: 'BBB',
            data: $.map(['tr-ib','tr-or'], function (code) {
                return {  "hc-key": code , value : 122};
            })
        }
        ]
    });
});

jsfiddle is here ; http://jsfiddle.net/usrt1Lrr/5/

first serie(AAA) contains 2 cities 'tr-an' and 'tr-iz'.

second serie(BBB) contains 2 cities 'tr-ib' and 'tr-or'.

2 series cant be seen unless i disable one via legend. If you disable BBB serie; AAA will be visible. That makes no sense.

How can i solve this problem? All series must be seen together

Thanks in advance.

Answer 1

Since you've got plotOptions.map.allAreas: true it draws all the areas for both series, which means the series are drawn on top of eachother (hiding the color of the series below).

An alternative way would be to have your options:

plotOptions: {
    map: {
        allAreas: false,
        // ...
    }
}

And adding a "background" series which you hide, like this:

series:  [{
        allAreas: true, // only show all areas for this series (as a "background")
        showInLegend: false // hide it from the legend
    },
    {
        name: 'AAA',
        data: $.map(['tr-an','tr-iz'], function (code) {
            return { "hc-key": code , value : 150};
        })
    },
    {
        name: 'BBB',
        data: $.map(['tr-ib','tr-or'], function (code) {
            return {  "hc-key": code , value : 122};
        })
    }]

See this JSFiddle demonstration of it in action.