HighCharts Map Drilldown - Map is rotating 180 degrees after Drillup

Question

I am using HighCharts Map and using json data to render the USA map (I have used an SVG file and converted the SVG into json using https://highcharts.github.io/map-from-svg/ tool). I am implementing drill-down feature in the map. The drill-down works but when I click "USA" in the breadcrumb, the map rotates by 180 degrees. The expected behavior should be - The USA map should not be upside down after the drill up. I am not sure what's wrong with my code. Can anyone please provide guidance to fix the issue?

To reproduce the issue in the fiddle -

1. Click on any state in the USA map (i.e California)
2. Now click "USA" in the breadcrumbs
3. Issue - USA map is upside down now.

The complete code - https://jsfiddle.net/seaxfdrz/7/

The code snippet is -

Highcharts.mapChart('container', {
    chart: {
        events: {
            drilldown,
            afterDrillUp
        }
    },

    title: {
        text: 'Highcharts Map Drilldown'
    },

    //mapView,

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

    plotOptions: {
        map: {
            states: {
                hover: {
                    color: '#EEDD66'
                }
            }
        }
    },

    series: mapJason,

    drilldown: {
        activeDataLabelStyle: {
            color: '#FFFFFF',
            textDecoration: 'none',
            textOutline: '1px #000000'
        },
        breadcrumbs: {
            floating: true,
            relativeTo: 'spacingBox'
        },
        drillUpButton: {
            relativeTo: 'spacingBox',
            position: {
                x: 0,
                y: 60
            }
        }
    }
});

Answer 1

You want to do a drill down from your custom SVG map, which doesn't have any projection into the TopoJSON state map, which has its built-in projection. Then, after drilling up projection is not changed and it is trying to apply projection to your custom SVG map. To resolve this problem simply change mapView.projection.hasCoordinates flag to false after drilling up.

Live demo: https://jsfiddle.net/BlackLabel/gzqfsv63/