I'm currently creating a splash page for a project website. I was instructed to design a world map with a menu on its side and add some blinking effect while hovering on the sub menus.
I'm done with transforming/scaling the map, but I'm having a problem when hovering on sub menus, the small red circles doesn't pop up on where it should be. Without the .transform() method, the small red circles pop up correctly, but it gives me a big but cropped map.
I used .transform() method to scale the world map down.
I put .transform() method here:
r.path(worldmap.shapes[country]).attr({stroke: "#9b59b6", fill: c, "stroke-opacity": 0.25}).transform("s.628,.740 0,0");
In the code all of the locations of the cities is stored as lon/lat coordinates in the name attribute. This is then parsed through a world.parseLatLon function which then calls getXY() . I would say that in the function getXY the returning coordinates need to be transformed as well. There is some interesting number manipulation that is going on there (multiplying by 2.6938 and then adding 465.4) - I would say that this is adjusting the coordinates for the size of the image. Now that you have changed the size of the image, these will also need to be adjusted