Adding Id's To Raphael Objects

I have a fairly large map consisting of Raphael paths which im trying to make accessible to some jquery ajax scripts to be populated. I've tried to add an ID or anything to make it

Solution 1:

Well, the way I'm doing this is the following. First I write all the paths in an object, for example:

var paths = {
    path1: 'the paths coordinates',
    path2: 'the paths coordinates',
    path3: 'the paths coordinates',
}

Then you just loop trough all the paths, seting the coordinates for each path and giving them an ID (this is an internal Raphael's ID):

for(pathin paths){
   var newpath = paper.path(paths[path]);
   newpath.attr({options})
   newpath.id = path;
}

Now, if you want to get one of this elements you can use the next Raphael feature:

var thisPath = paper.getById('path1');

This way you can use the path on any of the Raphael methods. So, if you need to get the node in the dome you can do the following:

var node = thisPath.node

But if you need to animate the path, you better use the Raphael's animate method, or if you need to change attibutes the attr method.

thisPath.animate(.....)

If you need to apply some change to all the paths, you can use:

paper.forEach(function(thisArg))

you need to pass the function to run on each element and thisArg reference the element on each iteration

And maybe you want to take a look to the Raphael's sets wich can be useful for use methods on groups of elements. If you need any help using this features just let me know and I'll do my best to help you out. Bye!

Solution 2:

You could just push them to an array :

var pathArray = newArray();
var path_gs = rsr.path("path coords");
pathArray.push(path_gs); 

Then loop through pathArray.

Another option is grouping them in sets.