bboybeatle bboybeatle - 28 days ago 9
HTML Question

Add click action to countries in raphael JS world map

I'm making a world map in which you click a region (North America, Asia etc. ) using raphaeljs and world.js shapes

@David Noël has opensourced a way of combining countries into one element which highlights when you rollover, which I have done succesfully.

I'm usually OK with Javascript but I can't figure out how to create a click event for these regions, so some relevant info pops up for each region. I think there may be the answer in Davids link above but I don't fully understand the documentation

You can see my progress so far here.. http://thetally.efinancialnews.com/tallyassets/mapareas/index.html

Answer Source

OK so after contacting David Noel personally he helped me out with the answer.

When initializing anywhere I made country groups using the country codes like so...

 <script src="anywhere.js"></script>
<script type="text/javascript">
  var aw = new Anywhere(
    document.getElementById('map_div'),
    {
<!--"AFRICA":["DZ","AO","SH","BJ","BW","BF","BI","CM","CV","CF","TD","KM","CG","DJ","EG","GQ","ER","ET","GA","GM","GH","GW","GN","CI","KE","LS","LR","LY","MG","MW","ML","MR","MU","YT","MA","MZ","NA","NE","NG","ST","RE","RW","ST","SN","SC","SL","SO","ZA","SH","SD","SZ","TZ","TG","TN","UG","CD","ZM","TZ","ZW","SS","CD"],-->
<!--"EUROPE":["AL","AD","AT","BY","BE","BA","BG","HR","CY","CZ","DK","EE","FO","FI","FR","DE","GI","GR","HU","IS","IE","IT","LV","LI","LT","LU","MK","MT","MD","MC","NL","NO","PL","PT","RO","RU","SM","RS","SK","SI","ES","SE","CH","UA","GB","VA","RS","IM","RS","ME"],-->
"EMEA":["AL","AD","AT","BY","BE","BA","BG","HR","CY","CZ","DK","EE","FO","FI","FR","DE","GI","GR","HU","IS","IE","IT","LV","LI","LT","LU","MK","MT","MD","MC","NL","NO","PL","PT","RO","RU","SM","RS","SK","SI","ES","SE","CH","UA","GB","VA","RS","IM","RS","ME","DZ","AO","SH","BJ","BW","BF","BI","CM","CV","CF","TD","KM","CG","DJ","EG","GQ","ER","ET","GA","GM","GH","GW","GN","CI","KE","LS","LR","LY","MG","MW","ML","MR","MU","YT","MA","MZ","NA","NE","NG","ST","RE","RW","ST","SN","SC","SL","SO","ZA","SH","SD","SZ","TZ","TG","TN","UG","CD","ZM","TZ","ZW","SS","CD"],
"NORTH AMERICA":["AI","AG","AW","BS","BB","BZ","BM","VG","CA","KY","CR","CU","CW","DM","DO","SV","GL","GD","GP","GT","HT","HN","JM","MQ","MX","PM","MS","CW","KN","NI","PA","PR","KN","LC","PM","VC","TT","TC","VI","US","SX","BQ"],
"SOUTH AMERICA":["AR","BO","BR","CL","CO","EC","FK","GF","GY","GY","PY","PE","SR","UY","VE"],
"ASIA":["AF","AM","AZ","BH","BD","BT","BN","KH","CN","CX","CC","IO","GE","HK","IN","ID","IR","IQ","IL","JP","JO","KZ","KP","KR","KW","KG","LA","LB","MO","MY","MV","MN","MM","NP","OM","PK","PH","QA","SA","SG","LK","SY","TW","TJ","TH","TR","TM","AE","UZ","VN","YE","PS"],
"PACIFIC":["AS","AU","NZ","CK","FJ","PF","GU","KI","MP","MH","FM","UM","NR","NC","NZ","NU","NF","PW","PG","MP","SB","TK","TO","TV","VU","UM","WF","WS","TL"]
},

..then my custom JS file looked like this...

// JavaScript Document

$( document ).ready(function() {


function changeChart() {

console.log('change');

if (dataSet == 1) {

var bank11 = 14
var bank12 = 74
var bank13 = 74

var bank21 = 45
var bank22 = 78
var bank23 = 111

var bank31 = 35
var bank32 = 75
var bank33 = 86 

} else if (dataSet == 2) {

var bank11 = 34
var bank12 = 74
var bank13 = 124

var bank21 = 45
var bank22 = 38
var bank23 = 211

var bank31 = 35
var bank32 = 15
var bank33 = 86 

}


$('.column1 .block1').animate({ 'height' : bank11 });
$('.column1 .block2').animate({ 'height' : bank12, 'bottom' : bank11 });
$('.column1 .block3').animate({ 'height' : bank13, 'bottom' : bank12+bank11  });

$('.column2 .block1').animate({ 'height' : bank21 });
$('.column2 .block2').animate({ 'height' : bank22, 'bottom' : bank21 });
$('.column2 .block3').animate({ 'height' : bank23, 'bottom' : bank22+bank21  });

}   


var dataSet = 0;


eve.on('aw:click', function (identifier, groupKey) {


if (groupKey == 'EMEA'){
dataSet = 1;
} 

if (groupKey == 'ASIA'){
dataSet = 2;
} 

changeChart();


console.log('you clicked ' + identifier +', in '+ groupKey);

$('.'+groupKey).css({"background-color":'#345'});

});


});