World, Miller projection, high resolution - Highmaps

Highmaps demo

by Umair Rafiq

HTML

<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/custom/world-highres.js"></script>

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

CSS

#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
['ae',41.525],
['af',61.8],
['at',13.5548387096774],
['au',6.49166666666667],
['ba',46.46],
['bd',97.1],
['be',12.7826086956522],
['bg',23.2666666666667],
['bh',59.8],
['br',16.0818181818182],
['ca',7.45301204819277],
['ch',11.1363636363636],
['cl',19.3666666666667],
['cn',37.784358974359],
['co',13.9],
['cy',16.22],
['cz',20.8265306122449],
['de',13.0362416107382],
['ee',7.21111111111111],
['es',9.28823529411765],
['et',27.1],
['fi',6.13888888888889],
['fr',10.5122302158273],
['gb',10.2567901234568],
['hr',14.35],
['hu',17.1705882352941],
['id',28.15],
['ie',9.5],
['il',19.8444444444444],
['in',69.5189655172414],
['ir',21.8764705882353],
['is',4.225],
['it',14.9092783505155],
['jp',11.7561436672968],
['kh',20.1],
['kr',23.8170731707317],
['kv',30.4],
['kw',56],
['kz',29.8],
['lk',32],
['lt',15.3166666666667],
['lu',10.3333333333333],
['mk',38.025],
['mn',58.5],
['mt',11],
['mx',20.1214285714286],
['ng',43.05],
['nl',11.55],
['no',7.80526315789474],
['np',47.2],
['nz',9.15384615384615],
['pe',28],
['ph',17.53125],
['pk',79.4],
['pl',22.8023255813953],
['pr',13.35],
['pt',7.71875],
['ro',16.7772727272727],
['rs',23.9],
['ru',14.075],
['se',6.98],
['sg',14.8],
['sk',18.2464285714286],
['th',26.985],
['tr',23.31],
['tw',18.475],
['ua',17.3],
['ug',40.8],
['us',8.52918395573997],
['uz',34.3],
['vn',33.85]
];

// Create the chart
Highcharts.mapChart('container', {
    chart: {
        map: 'custom/world-highres',
        borderWidth: 1
    },

    colors: ['#ffffff','#5ba7c8','#a8e05f', '#fdd74b', '#fe9b57','#fe6a69', '#a97abc', '#a87383'],
    title: {
        text: 'AirVisual Most polluted countries'
    },

    subtitle: {
        text: 'Powered by : <a href="https://www.airvisual.com">Airvisual.com</a> - Plotted by Umair Rafiq'
    },


    mapNavigation: {
        enabled: true,
       ...