AmCharts - AmMap with a custom map shows upside down

Question

I followed AmCharts tutorials to create a custom map, but used SVG from our previous system (the UK is an example, but I have about 2,000 custom SVGs defining regions / territories / district collections).

While the map is displayed without problems, it is displayed upside down.

can someone help reset them back without having to recreate all the SVGs?

you can see this problem 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"); }); 

SVG example (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" } 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 { "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" } 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 " { "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 applied the solution to this problem here:

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

Result:

I will be the first to notice that these are not the most elegant solutions, since it involves transforming the SVG matrix after AmCharts provided its output. I also introduced jQuery to the application to apply the code to perform the conversion (you can change this to javascript later, I just used jQuery for my convenience).

The solution includes a group transformation (i.e. the 'g' element) that contains the i.e.

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

This transformation matrix reflects everything around a horizontal line in the center of the image. "370" is the height of your SVG (370 pixels).

I applied this matrix transformation using:

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

Update

While this solution changes coordinates correctly, the drag / drop function up / down has been violated (doh!). I will not delete this answer as it may help, and hopefully someone will have a clever idea on how to invert the mouse's Y axis in this scenario!

What you can try, apply this transformation, flip the arrows left and right, but turn off the drag and drop function. This should allow the user to intuitively navigate the map, but without the convenience of using the mouse.