CODEWITHSUNDEEP
javascriptraphael
Jason
Jason

Reputation: 11363

Raphael - Get ID and name of path

I'm building an interactive map using the Raphael library. As part of the UI functionality, I have several functions that are going to execute on mouseover, mouseout and onclick. In order to do this, I have to extract out several fields within the Raphael object.

I have a JSON file that is loaded on page load and used by this function to draw the map of the US and counties:

function drawMap(data) {
  map = Raphael(document.getElementById("us_map_container", 555, 352));

  var pathCount = data.length;

  for (i = 0; i < pathCount; i++) {
    var currentPath = map.path(data[i][2]);
    currentPath.name = data[i][0];
    currentPath.id = data[i][1];
    currentPath.attr({"stroke" : "#FFFFFF", "fill" : "#CBCBCB", "stroke-width" : "0.2"});
    currentPath.mouseover(function(e){countyMouseOver(e)});
    currentPath.mouseout(function(e){countyMouseOut(e)});
  }
}

The data is formatted into over 3000 rows with the formatting

["North Slope, AK", "02185", 
  ["M62", "259L63", "258L64", "257L64", "258L64", "258L64", "258L66", "257L68", "255L70",
   "256L70", "256L69", "257L69", "258L70", "257L70", "256L71", "256L71", "257L72", "257L72",
   "258L73", "257L74", "257L75", "257L76", "257L75", "258L75", "258L76", "258L76",        
   "259L77", "259L78", "258L81", "258L82", "259L83", "259L84", "259L84", "259L85", "259L86", "259L87", 
   "259L89", "259L89", "259L90", "258L90", "258L91", "258L92", "258L96", "259L97", "263L97", 
   "265L88", "267L89", "269L87", "270L82", "271L82", "271L72", "272L69", "272L69", "271L68", 
   "271L68", "271L66", "271L64", "271L63", "271L63", "271L62", "271L62", "271L60", "271L60",
    "271L60", "271L60", "271L59", "271L58", "270L57", "270L57", "271L57", "271L54", "271L54",
    "272L52", "272L51", "271L50", "270L51", "269L51", "267L52", "267L54", "267L55", "267L56", 
   "265L57", "263L58", "261L59", "261L60", "261L61", "260L62", "259"]
]

Here, the name is the county name and two letter state abbreviation, and id is the FIPS number for that county. These two fields are index positions 0 and 1 respectively. The third array is a array of lines making a path to represent a county boundaries.

On a mouseover event, how can I get the element's name and ID from the event object?

So far, I have

function countyMouseOver(e) {
  var hover = e.target;
  var countyName = hover.name;
  $(hover).attr({"stroke" : "#FF0000", "stroke-width" : "1"});
}

The $(hover) allows me to set the line color and thickness upon a mouseover event, but countyName is empty.

When I have a breakpoint in the function above, I can get the raphaelid of the element, which is very different from the FIPS number that is supposed to be the id. The name field is undefined.

Upvotes: 0

Views: 2215

Answers (2)

Brian
Brian

Reputation: 5028

Also another solution:

You can assign data("id", id) to your path. Then retrieve it in the event by this.data("id").

EDIT

You can assign the data twice and it will work, look at the DEMO

var paper = Raphael("area", 400, 400);
var r = paper.rect(100, 100, 70, 40, 5).attr({fill: 'yellow', stroke: 'red'});
r.data("id",5);
r.data("value", 4);

r.click(function() {
   alert(this.data("value"));
   alert(this.data("id"));
});

Upvotes: 2

Jason
Jason

Reputation: 11363

I found out the solution, and figured someone in the future can use it.

It came down to using Element.node.setAttribute() for the path, ie

currentPath.node.setAttribute("id", data[i][1]);
currentPath.node.setAttribute("name", data[i][0]);

And these can be accessed via the event object via

e.target.attributes[5].value; //get the name data
e.target.id; //get the ID of the object

or

e.target.getAttribute("id");
e.target.getAttribute("name");

Upvotes: 1

Related Questions