These are the steps I have gone through:
1. Renamed the layers of a map in Illustrator and then export it as a svg.
2. Import this svg map on the Edge Animate stage and then write the code to paint several countries according to its id (=layers renamed):
// Load Edge Commons
yepnope({
load: "http://cdn.edgecommons.org/an/1.4.0/js/min/EdgeCommons.js",
complete: function() {
// Enable SVG access
EC.SVG.accessSVG(sym.$("mapa")).done(
function(svgDocument){
//colores
var c1 = "#e74459";
var c2 = "#f58f72";
var c3 = "#f5db69";
var c4 = "#66b05e";
var c0 = "#c0c0c0";
$("path", svgDocument).css({"cursor":"pointer"});
$("#alemania", svgDocument).css("fill", c4);
$("#brasil", svgDocument).css("fill", c1);
$("#rusia", svgDocument).css("fill", c3);
$("#indonesia", svgDocument).css("fill", c3);
$("#kazajistan", svgDocument).css("fill", c3);
$("#sudafrica", svgDocument).css("fill", c2);
$("#estadosunidos", svgDocument).css("fill", c2);
$("#portugal", svgDocument).css("fill", c1);
$("#italia", svgDocument).css("fill", c4);
});
}
});
3. Then I made a symbol as a tooltip, so I inserted this code to show the text according to the id of the target selected (path) and also to change its opacity:
$("path", svgDocument).mouseover(function(e){
$(e.currentTarget).css({opacity:0.5});
sym.getSymbol("tooltip").$("pais").html(e.currentTarget.id);
});
$("path", svgDocument).mouseout(function(e){
$(e.currentTarget).css({opacity:1});
});
4. Lastly I wrote the lines to made this tooltip follow the mouse:
document.getElementById('Stage').addEventListener('mousemove', mouseMove, false);
function mouseMove(e) {
sym.$("tooltip").css({
"left" : e.pageX,
"top" : e.pageY
});
}
And here was the problem: svg doesn't seem to allow the mouseMove function. I put a circle on top of the map so I could see that this code was working as long as I didn't hover the svg. It shows the id, but the tooltip doesn't move (if I try to click on the symbol it also changes, but because the symbol itself is on top of the map).
Any solution??