AmCharts - AmMap with custom map shows upside down

Question

i have followed the tutorials on the AmCharts to create a custom map, but used SVG's from our previous system (the UK one is an example, but i have around 2000 custom SVG's defining regions/territories/district collection).

While the map displays with no issue, it is showing upside down.

can someone help in flipping those back without the need to recreate all the SVG's ?

you can see the issue here http://jsfiddle.net/aZt8N/830/

AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "http://www.ammap.com/lib/3/images/";
    //map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
    map.balloon.color = "#000000";

    var dataProvider = {
        mapVar: AmCharts.maps.UK,
        getAreasFromMap: true
    };

    map.dataProvider = dataProvider;
    map.write("mapdiv");
});

Example SVG (JSON format):

{
    "id": "19",
    "title": "Isle of Man",
    "d": "M-294128.0419983654 6005604.579318236 L-297849.15 6002052.63 L-302960.48 6004919.03 L-307536.97 6003878.02 L-308772.14 6004362.52 L-305875.18 6009275.65 L-304770.50193180586 6012664.048443736 L-302096.82 6020865.08 L-298362.66970319534 6023706.069639378 L-296413.32 6025189.16 L-291628.35136520385 6032625.148624786 L-288841.99 6036955.24 L-283264.74 6040009.53 L-281429.49 6039424.07 L-280324.93 6038202.8 L-280267.3142244041 6037728.901568649 L-278638.37 6024330.59 L-281236.71112765424 6021135.176051484 L-282416.08 6019684.8 L-283956.92 6015313.33 L-287114.60612506856 6012299.189836851 L-288129.6779798481 6011330.2623612285 Z"
                        }

Answer 1

I have implemented a solution to this problem here:

http://jsfiddle.net/Fresh/rzL509qr/

The result is:

I'll be the first to note that it is not the most elegant of solutions, as it involves using an SVG matrix transformation after AmCharts has rendered it's output. I have also introduced jQuery into the application to apply the code to perform the transformation (you can change this to javascript at a later date, I've just used jQuery for my convenience).

The solution involves transforming the group (i.e. 'g' element) which contains map i.e.

<g transform="matrix(1 0 0 -1 0 370)">

This transformation matrix reflects everything about the horizontal line through the centre of the image. "370" is the height of your SVG (370px).

I've applied this matrix transformation using:

$('svg g:nth-child(8)').attr('transform','matrix(1 0 0 -1 0 370)');

Update

Whilst this solution correctly reverses the co-ordinates, the drag up/down functionality has been broken (doh!). I wont delete this answer as it may help and hopefully someone will have a smart idea on how to invert the mouse y-axis in this scenario!

What you could try is apply this transformation, reverse the left and right arrows, but disable the drag facility. This should allow a user to navigate intuitively around the map, though without the convenience of using a mouse.