Question

I've got an SVG map which draws up perfectly and I've got some (average) code that offers a mouseOver, onClick and mouseOut state. In my finished page, I need to be able to click on different countries on the map and display data relating to that country in a table below it. (data table entry omitted, I've got that bit running on a local server already).

http://jsfiddle.net/dE9cK/

I've taken a snippet of my raphael-map code here to show how I get my map up and running, the full code is in the jsfiddle above:

var rsr = Raphael('SVGmap', '679', '350');

var layer1 = rsr.set();
var path6251 = rsr.path("M-289.826-562.781c-2.617-0.95-3.363-1.923-2.737-3.568c0.506-1.331,2.102-1.962,2.102-0.831   c0,0.303,0.547,1.292,1.216,2.197C-286.882-561.785-286.9-561.718-289.826-562.781z").attr({id: 'path6251',fill: '#909155',label: 'Ebene 1',groupmode: 'layer',parent: 'layer1','stroke-width': '0','stroke-opacity': '1'}).transform("t470,892.401").data('id', 'path6251');

var rsrGroups = [layer1];
layer1.push(
    path6251 
);

What I need help with is to:

  1. Add a unique ID/name to each path once it has been drawn up (to enable me to target each individual path for the data table - would prefer it if this was the current path name to make it easier to reference - I'm tidying up all path names once I've got this up and working).

    Each path has a data id in my JS file but I can't seem to get that to pull through with the path.

  2. Group paths together (I've got Alaska & USA as named paths in my fiddle, would like to know how I would group these two to both become selected/active when either is clicked).

Really appreciate any help anybody can give. Thank you.

Was it helpful?

Solution

  1. You can use node property to get the element and set id to it like below

    path6251.node.id = 'p6251';

  2. Use set() method to group elements and perform operations on the set.

Sample code

var group1 = rsr.set();
group1.push(path1);
group1.push(path2);
group1.attr({fill: 'red'}); //will change color of both path1 and path2
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top