Why is only Europe showing up on my RaphaelJs Map?

Question

Morning.

I'm putting together a world map with clickable continents using Parallax's Raphael Map Tutorial: https://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map

I followed everything step by step but once I load the page, the only continent I'm getting is my first one, Europe. Please help me figure out where I went wrong, thanks! I'm very new to working with plugins such as Raphael. Let me know if I need to post anymore information.

The following is my fiddle showing the problem: https://jsfiddle.net/Nimara/jut2c40t/

Sample Code (too large to post with coordinates):

var rsr = Raphael('map', '770', '505.3');
var continents = [];

//Europe
var europe = rsr.path("coordinates jabber, see fiddle")
europe.attr({'stroke-width': '0', 'stroke-opacity': '1','fill': '#000000'}).data('id', 'europe');
continents.push(Europe);

//Asia
var asia = rsr.path("coordinates jabber, see fiddle")
asia.attr({
'stroke-width': '0',
'stroke-opacity': '1',
'fill': '#000000'
}).data('id', 'asia');
continents.push(asia);

//North America
var north_america = rsr.path("coordinates jabber, see fiddle")
north_america.attr(
{
'stroke-width': '0',
'stroke-opacity': '1',
'fill': '#000000'
}).data('id', 'north_america');
continents.push(north_america);

//Africa
var africa = rsr.path("coordinates jabber, see fiddle")
africa.attr(
{
'stroke-width': '0',
'stroke-opacity': '1',
'fill': '#000000'
}).data('id', 'africa');
continents.push(africa);

//South America
var south_america = rsr.path("coordinates jabber, see fiddle")
south_america.attr(
{
'stroke-width': '0',
'stroke-opacity': '1',
'fill': '#000000'
}).data('id', 'south_america');
continents.push(south_america);

//Australia
var australia = rsr.path("coordinates jabber, see fiddle")
australia.attr(
{
'stroke-width': '0',
'stroke-opacity': '1',
'fill': '#000000'
}).data('id', 'australia');
continents.push(australia);

//Iterate through the regions and select continent to fill with color
for (var i=0; i<continents.length; i++) {
    if (continents[i].data('id') == 'africa'){
    continents[i].node.setAttribute('fill', 'red');
}
}


//NOT SO SURE I NEED THIS BOTTOM HALF. With or without it the problem persists.
XMLID_1209_.attr(
{
'id': 'XMLID_1209_',
'name': 'XMLID_1209_'
});
var rsrGroups = [XMLID_1209_];
XMLID_1209_.push(europe, asia, north_america, africa, south_america, australia);

This is the map I processed: http://www.amcharts.com/svg-maps/?map=continents

Thanks again!

Answer 1

Working example

There are some problem in your script:

europe.attr({'stroke-width': '0', 'stroke-opacity': '1','fill': '#000000'}).data('id', 'europe');
continents.push(Europe);// javascript is case-sensitive

should be:

europe.attr({'stroke-width': '0', 'stroke-opacity': '1','fill': '#000000'});
europe.id='europe';
continents.push(europe);

This method is not defined:

.data

It is recurrent for every continent.

for (var i=0; i<continents.length; i++) {
    if (continents[i].data('id') == 'africa'){
        continents[i].node.setAttribute('fill', 'red');
    }
}

Should be :

for (var i=0; i<continents.length; i++) {
    if (continents[i].id == 'africa'){
        continents[i].node.setAttribute('fill', 'red');
    }
}

This code actually doesn't make sense(XMLID_1209_ is not defined):

XMLID_1209_.attr(
{
    'id': 'XMLID_1209_',
    'name': 'XMLID_1209_'
});
var rsrGroups = [XMLID_1209_];
XMLID_1209_.push(europe, asia, north_america, africa, south_america, australia);

I suggest you to take a look to your developer tools(F12 in your preferred browser) every time you are debugging your scripts; take this suggestion like a general rule. As you can see in the image below:

The error was really clear