GeoJSON areas

author(s): Torstein Hønsi

by koh_edwin

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/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.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 random data
var data = [
    ['DE.SH', 728],
    ['DE.BE', 710],
    ['DE.MV', 963],
    ['DE.HB', 541],
    ['DE.HH', 622],
    ['DE.RP', 866],
    ['DE.SL', 398],
    ['DE.BY', 785],
    ['DE.SN', 223],
    ['DE.MV', 605],
    ['DE.NW', 237],
    ['DE.BW', 157],
    ['DE.HE', 134],
    ['DE.NI', 136],
    ['DE.TH', 704],
    ['DE.', 361]
];

Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/germany.geo.json', function (geojson) {

    // Initialize the chart
    Highcharts.mapChart('container', {
        chart: {
            map: geojson
        },

        
        
        colorAxis: {
            tickPixelInterval: 100
        },

        series: [
        	{
            data: data,
            keys: ['code_hasc', 'value'],
            joinBy: 'code_hasc',
            name: 'Random data',
            states: {hover: {color: '#a4ed00'}},
            dataLabels: {enabled: true,format: '{point.properties.postal}'}
        	},
          {
                type: 'mapbubble',
                dataLabels: {
                    enabled: true,
                },
                
                name: 'Provinces',
                data: data,
                keys: ['code_hasc', 'z'],
            joinBy: 'code_hasc',
            maxSize: '12%',
                //color: H.getOptions().colors[0]
            }
        ]
    });
});