World - Highmaps

Highmaps demo

by Torstein Hønsi

HTML

<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.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

$(function () {
    
    // 1. Get the language (replace this with dynamic code)
    var lang = 'fr';
    
    // 2. Put your localized country names in an object like this
    var countryNames = {
        fr: {
            fr: 'France',
            de: 'Alemagne'
        }
    };
    
    // 3. Replace the map data
    var cNames = countryNames[lang];
    $.each(Highcharts.maps['custom/world'].features, function (i, feature) {
        if (feature.properties && cNames[feature.properties['hc-key']]) {
            feature.properties.name = cNames[feature.properties['hc-key']];
        }
    });
        

    // Prepare demo data
    var data = [
        {
            "hc-key": "dz",
            "value": 0
        },
        {
            "hc-key": "ao",
            "value": 1
        },
        {
            "hc-key": "eg",
            "value": 2
        },
        {
            "hc-key": "bd",
            "value": 3
        },
        {
            "hc-key": "ne",
            "value": 4
        },
        {
            "hc-key": "qa",
            "value": 5
        },
        {
            "hc-key": "na",
            "value": 6
        },
        {
            "hc-key": "bg",
            "value": 7
        },
        {
            "hc-key": "bo",
            "value": 8
        },
        {
            "hc-key": "gh",
            "value": 9
        },
        {
            "hc-key": "pk",
            "value": 10
        },
        {
            "hc-key": "pa",
            "value": 11
        },
        {
            "hc-key": "jo",
            "value": 12
        },
        {
            "hc-key": "eh",
            "value": 13
        },
        {
            "hc-key": "ly",
            "value": 14
        },
        {
            "hc-key": "my",
            "value": 15
        },
        {
            "hc-key": "pr",
            "value": 16
        },
        {
            "hc-key": "kp",
            "value": 17
        },
        {
            "hc-key": "tz",
   ...