GeoJSON with rivers and cities

author(s): Torstein Hønsi

by Geo George

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.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

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

    // Prepare the geojson
    var states = Highcharts.geojson(geojson, 'map'),
        rivers = Highcharts.geojson(geojson, 'mapline'),
        cities = Highcharts.geojson(geojson, 'mappoint'),
        specialCityLabels = {
            Melbourne: {
                align: 'right'
            },
            Canberra: {
                align: 'right',
                y: -5
            },
            Wollongong: {
                y: 5
            },
            Brisbane: {
                y: -5
            }
        };

    // Skip or move some labels to avoid collision
    states.forEach(function (state) {
        // Disable data labels
        if (state.properties.code_hasc === 'AU.CT' || state.properties.code_hasc === 'AU.JB') {
            state.dataLabels = {
                enabled: false
            };
        }
        if (state.properties.code_hasc === 'AU.TS') {
            state.dataLabels = {
                style: {
                    color: '#333333'
                }
            };
        }
        // Move center for data label
        if (state.properties.code_hasc === 'AU.SA') {
            state.middleY = 0.3;
        }
        if (state.properties.code_hasc === 'AU.QL') {
            state.middleY = 0.7;
        }
    });

    cities.forEach(function (city) {
        if (specialCityLabels[city.name]) {
            city.dataLabels = specialCityLabels[city.name];
        }
    });

    // Initiate the chart
    Highcharts.mapChart('container', {
        title: {
            text: 'Highmaps from geojson with multiple geometry types'
        },

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

        series: [{
            name: 'States and territories',
            data: states,
            color:...