I have a map of Europe along with a JSON file that displays the unemployment rate for each country in the year 2011. The JSON file also includes x and y elements, allowing me to place a blue circle on top of each country on the map.
My goal is to be able to hover over one of these circles (representing a country) and retrieve and display its unemployment rate from the JSON file.
How can I extract the 'rate' element specific to the country I'm hovering over on the map from my JSON file?
JSON FILE:
[
{ "year": "2011", "country": "Finland", "rate": 8.0, "x":681, "y":18 },
{ "year": "2011", "country": "Sweden", "rate": 7.6, "x":486, "y":114 },
{ "year": "2011", "country": "Estonia", "rate": 13.6, "x":625, "y":206 },
...
jQuery File
$(document).ready(function(){
$.getJSON("eu.json", function(data) {
console.log("Data loaded successfully");
$.each(data, function(i, elem) {
$('<div></div>').addClass('dataPt').css({
"margin-left": elem.x + "px",
"margin-top": elem.y + "px",
"border-width": elem.rate + 5 + "px"
}).appendTo('#map');
$('div.dataPt').hover(function(){
$(this).addClass("dataPtHover");
},function(){
$(this).removeClass("dataPtHover");
});
});
});
});
Check out this jsfiddle link to better understand what I am trying to achieve.