Reputation: 11363
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
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
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