Orthographic map

by saurabhkolhe

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/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

JavaScript

(async () => {

function getRandomData(topology) {
        return topology.objects.default.geometries.map(() =>
            Math.round(Math.random() * 100));
    }

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

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

    const data = getRandomData(topology);

    // Get geometries for parallels
    function getParallelsGeometries(parallels) {
        return parallels.map(lat => {
            const coordinates = [];
            for (let lon = -180; lon <= 180; lon += 5) {
                coordinates.push([lon, lat]);
            }
            return {
                geometry: {
                    type: 'LineString',
                    coordinates
                },
                lineWidth: lat === 0 ? 2 : undefined
            };
        });
    }

    function getGraticule() {
        const data = [];

        // Meridians
        for (let x = -180; x <= 180; x += 15) {
            data.push({
                geometry: {
                    type: 'LineString',
                    coordinates: x % 90 === 0 ? [
                        [x, -90],
                        [x, 0],
                        [x, 90]
                    ] : [
                        [x, -80],
                        [x, 80]
                    ]
                }
            });
        }

        // Parallels
        const parallels = [];
        for (let y = -90; y <= 90; y += 10) {
            parallels.push(y);
        }
        data.push(...getParallelsGeometries(parallels));

        return data;
    }
    
var projection = {
name: 'EqualEarth',
projectedBounds: 'world',
rotation: [0,0,0].map(Number)
}

var chartOptions = {
  chart: {
  	map: "world",
    animation: false,
    width: 600,
    height: 400,
    marginTop: 60,
   marginBottom:...