highmap does not display

Question

$(document).ready(function () {

      Highcharts.mapChart('container1', {
    chart: {
        map: 'map',
        spacingBottom: 20
    },

    title: {
        text: 'areas'
    },

    legend: {
        enabled: true
    },

    plotOptions: {
        map: {
            allAreas: false,
            joinBy: ['area', 'code'],
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                style: {
                    fontWeight: 'bold'
                },
                // Only show dataLabels for areas with high label rank
                format: null,
                formatter: function () {
                    if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
                        return this.point.properties['area'];
                    }
                }
            },
            tooltip: {
                headerFormat: '',
                pointFormat: '{point.area}: <b>{series.area}</b>'
            }
        }
    },

    series: [{
        name: 'Area1',
        data: ['1','2'].map(function (code) {
            return { code: code };
        })
    }, {
        name: 'Area2',
        data: ['3','4'].map(function (code) {
                return { code: code };
            })
    }, {
        name: 'nodata',
        data:  [{
            code: 'RU'
        }]
    }]
});

    
});

i have to display highmap on my web page . i have followed this example https://www.highcharts.com/maps/demo/category-map

i am not getting any error but my map is not loading or displaying. actually shapefile is not displaying . above is is my code

Answer 1

You should use jQuery to load your data after DOM is loaded:

$(document).ready(function () { ... });

Example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<!-- Import the world -->
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<script type="text/javascript">
$(document).ready(function () {

     Highcharts.mapChart('container1', {
chart: {
    map: 'custom/world', //add the world as a map
    spacingBottom: 20
},

title: {
    text: 'areas'
},

legend: {
    enabled: true
},

plotOptions: {
    map: {
        allAreas: false,
        joinBy: ['iso-a2', 'code'], //join by iso-a2
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            style: {
                fontWeight: 'bold'
            },
            // Only show dataLabels for areas with high label rank
            format: null,
            formatter: function () {
                if (this.point.properties && this.point.properties.labelrank.toString() < 5) {
                    return this.point.properties['iso-a2']; //join by iso-a2
                }
            }
        },
        tooltip: {
            headerFormat: '',
            pointFormat: '{point.name}: <b>{series.name}</b>'
        }
    }
},

series: [{
    name: 'Area1',
    // use country code as CODE
    data: ['FR','BE'].map(function (code) {
        return { code: code };
    })
}, {
    name: 'Area2',
    data: ['ES','PT'].map(function (code) {
            return { code: code };
        })
}, {
    name: 'nodata',
    data:  [{
        code: 'RU'
    }]
}]
});
});
</script>

<div id="container1" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

EDIT : Here is a working fiddle, because the one in SO seems to have some bugs: https://jsfiddle.net/zxmfvp0u/10/