Question

I am a Raphael newbie and need some help with the following:
I am using this raphael demo in order to build a map of Europe
http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael/demo.html

Here is my version: – less countries displayed here.
http://jsbin.com/isecus/20

At the moment all the countries of the map have a fill colour of #fff, and when the user hovers the mouse over a country the fill color changes to #1669AD.

What I need to do is by the time the map is loaded, specific countries must have specific colour fills.
For example Poland should have a fill color of red and Spain a fill color of yellow. All other countries should have the default color of white/ #fff.
Any suggestions of how to accomplish this are more than welcomed.

Answer 1

You must add fill attribute to each country like this

iceland: {

        name: 'Iceland',
        path: ...,
        fill: '#eee' //your color
    },

And then in your for cycle you must add that color to fill attribute of your object

for (var country in paths) {
        var obj = r.path(paths[country].path);
        obj.attr(attributes).attr({fill:paths[country].fill}); //like this
        arr[obj.id] = country;
               //your other code here
        }

Also, you must do same thinf in after-hover part in your code to bring back fill attribute to paths[country].fill.