7

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"
                        }
Ben Smith
  • 19,589
  • 6
  • 65
  • 93
Rafael Herscovici
  • 16,558
  • 19
  • 65
  • 93
  • amMap does not have a method to reverse coordinates. I guess your SVG data is actually reversed (would it be possible to see original SVG?). What I would also suggest is to divide all the numbers by 1000 and round them - you would save a lot of kilobytes by doing so. – zeroin Aug 19 '14 at 07:19
  • @zeroin - that is what i guessed, if you check the jsfiddle example i linked in the question, you can see the actual `reversed` SVG's – Rafael Herscovici Aug 19 '14 at 07:51

1 Answers1

2

I have implemented a solution to this problem here:

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

The result is:

enter image description here

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.

Ben Smith
  • 19,589
  • 6
  • 65
  • 93
  • This is a great step forward, but kind of leaves me with an new issue which i cannot resolve. removing functionality (as you suggested) is not something i would like to do. also, the map is re-sizing with the browser, which creates another issue. – Rafael Herscovici Aug 23 '14 at 15:35
  • I totally agree with you. I hoped that what I did would fix your problem but got this new one :( hopefully someone else might come up with a fix. Reading up more on this problem and it seems you may need to translate the coordinates. Out of interest where do you store this data? – Ben Smith Aug 23 '14 at 15:57
  • Also you say the map is re-sizing with the browser, but on my machine re-sizing the browser has the same effect on the browser as on your jsfiddle example. – Ben Smith Aug 23 '14 at 16:06
  • The data is stored in files (per country/region/territory/etc). – Rafael Herscovici Aug 23 '14 at 16:33
  • @Dementic glad the answer helped. How did you fix your datasets in the end? Did you transform all the data in the database or apply a fix like in this answer? Nasty problem! – Ben Smith Nov 20 '14 at 10:04
  • it turned out that the geometries were upside down and not AmCharts fault. at the end i use NetTopologySuite to turn all shapes upside down and recalculate coordinates. – Rafael Herscovici Nov 20 '14 at 10:59
  • 1
    @Dementic NetTopologySuite looks interesting. Glad you found a way of reversing the co-ordinates as I guess it was a frustrating problem. – Ben Smith Nov 20 '14 at 11:10