Map svg from Illsutrator.
When click in SVG, memorise name of the Illustrator's layer (eg : BREST, SAINTBRIEUC) and pass the result to a function to update datas in a symbol.
Some updates works fine, other not!
My code. In RED the errors !?!
// DATAS
var l_v = new Array(); // city
var l_d = new Array(); // state
var l_c = new Array(); // comment
var l_e = new Array(); // code
// *************************
l_v["SAINTBRIEUC"] = "SAINT-BRIEUC";
l_d["SAINTBRIEUC"] = "COTE D'ARMOR";
l_c["SAINTBRIEUC"] = "Ici SB le commentaire";
l_e["SAINTBRIEUC"] = "G";
l_v["BREST"] = "BREST";
l_d["BREST"] = "FINISTERE";
l_c["BREST"] = "Ici BR le commentaire";
l_e["BREST"] = "D";
// *************************
// SVG
yepnope({
load: "images/EdgeCommons.js",
complete: function() {
// SVG
EC.SVG.accessSVG(sym.$("bretagne")).done(
function(svgDocument){
// Add event
svgDocument.addEventListener("select", function(event) {
// memorise code
sym.setVariable("selectedPart", event.target);
// save the name of the layer in Illsutrator
// SAINTBRIEUX, BREST, …
var leDep = event.target.id;
// call the function
sym.getComposition().getStage().res(leDep);
});
});
}
})
// *************************
sym.res = function(d) {
// show the symbol where this function will update the datas
sym.$("dep").show();
// show caption
sym.$("legende").show();
/*
OK
*/
// memorise name of the symbole
var dp = sym.getSymbol("dep");
// Url
var u = "url(images/" + l_v[d] + ".png)";
// load image
dp.$("image").css("background-image",u);
/*
Must be : url(images/BREST.png)
ERROR => url(images/undefined.png)
*/
// text fields
dp.$("ville").html(l_v[d]);
dp.$("departement").html(l_d[d]);
dp.$("commentaire").html(l_c[d]);
/*
OK
*/
// hide all the code option
dp.$("G").hide();
dp.$("D").hide();
dp.$("DG").hide();
dp.$("GD").hide();
dp.$("FN").hide();
/*
OK
*/
// show the code option for this city
dp.$(l_e[d]).show();
/*
ERROR => don't show
*/
}
Thank's for help and/or advise
Christian