'Highcharts Map bubble on Pacific Centered World map

We have a requirement of map bubble on a pacific centered world map. We have achieved the part of pacific centered world map using the https://www.highcharts.com/forum/viewtopic.php?t=36545 but when we are trying to pass the latitude and longitude to the map to plot the bubble on it, it is not working? Can we please get any solution on how to plot the bubbles using latitude and longitude? We have plotted the bubble on the normal map using the proj4 package but we need to solution on a pacific centered world map.

angularhighchartsproj4js


Solution 1:[1]

Based on a rotation's lambda option any part of the world could be used as a center. With lambda of 210 it looks like here: https://jsfiddle.net/BlackLabel/p5or2gfe/ (also added a live demo at the bottom of this answer).

Code reference:

        mapView: {
            projection: {
                name: 'Miller',
                rotation: [210]
            }
        },

You could also see this in action with GUI for rotation and projection options in Highcharts Projection Explorer.

(async () => {

    const mapData = await fetch(
        'https://code.highcharts.com/mapdata/custom/world.topo.json'
    ).then(response => response.json());

    const data = await fetch(
        'https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/world-population-density.json'
    ).then(response => response.json());

    // Initialize the chart
    Highcharts.mapChart('container', {

        title: {
            text: 'America-centric Miller projection'
        },

        colorAxis: {
            min: 1,
            max: 1000,
            type: 'logarithmic'
        },

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

        mapView: {
            projection: {
                name: 'Miller',
                rotation: [210]
            }
        },

        series: [{
            data,
            mapData,
            joinBy: ['iso-a2', 'code'],
            name: 'Population density',
            states: {
                hover: {
                    color: '#a4edba'
                }
            },
            tooltip: {
                valueSuffix: '/km²'
            }
        }]
    });
})();
#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kacper Madej

Related Questions