Map loading but data not being rendered

[vaelin]

Hi,

I have an issue where the map is loading, but my data array is not being rendered onto the map. Here is the HTML:

Code: Select all

<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world-palestine-highres.js"></script>

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

And Javascript:

Code: Select all

fetch('https://api.factoshi.io', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        query: `{
            nodeLocations
        }`
    })
})
    .then(res => res.json())
    .then(res => {
        const locationArray = res.data.nodeLocations
            .filter(location => location[0] !== 'null')
            .map(location => [location[0], parseInt(location[1])]);

        console.log(locationArray);
        renderMap(locationArray);
    });

function renderMap(data) {
    Highcharts.mapChart('map-container', {
        chart: {
            map: 'custom/world-palestine-highres'
        },

        title: {
            text: 'Node Distribution'
        },

        legend: {
            title: {
                text: 'Nodes per Country',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        tooltip: {
            backgroundColor: 'none',
            borderWidth: 0,
            shadow: false,
            useHTML: true,
            padding: 0,
            pointFormat:
                '<span class="f32"><span class="flag {point.properties.hc-key}">' +
                '</span></span> {point.name}<br>' +
                '<span style="font-size:30px">{point.value}/km²</span>',
            positioner: function() {
                return { x: 0, y: 250 };
            }
        },

        colorAxis: {
            min: 1,
            max: 100,
            type: 'logarithmic'
        },

        series: [
            {
                data: data,
                joinBy: 'hc-key',
                name: 'Country'
            }
        ]
    });
}

Where am I going wrong?

[wojtek]

Hi vaelin,

Simply map your data collection so that hc-keys will be lowercase and you're done:

Code: Select all

const locationArray = res.data.nodeLocations
    .filter(location => location[0] !== 'null')
    .map(location => [location[0].toLowerCase(), parseInt(location[1])]);

Docs reference: https://www.highcharts.com/docs/maps/map-collection
Online demo: https://jsfiddle.net/wchmiel/ob1tj9vk/

Best regards.

[vaelin]

Aaaah, so simple!

Thanks for your help.

[wojtek]

You're welcome.

Regards.