CODEWITHSUNDEEP
javascriptsvgraphael
RIDER
RIDER

Reputation: 159

Raphael.js map default fill colors

I am trying to familiarize myself with raphael.js. I want to create a USA map that already has default colors for each state and those colors stay there.

Here is what I came up with.

If you look at AK, I'm getting the default color loaded, but if I highlight another state, the default color for AK disappears. I want AK - and other states - to stay the same color.

Specifically, I don't know what is clearing out my AK full color. I think part of this statement is clearing out the fill cover when I mouseover a different state: 

        for (var state in aus) {
        //aus[state].color = Raphael.getColor();
        (function (st, state) {
            st[0].style.cursor = "pointer";
            st[0].onmouseover = function () {
                current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
                st.animate({fill: st.color, stroke: "#ccc"}, 500);
                st.toFront();
                R.safari();
                document.getElementById(state).style.display = "block";
                current = state;
            };

        })(aus[state], state);
    }

Any ideas where I might be going wrong?

Upvotes: 0

Views: 1022

Answers (3)

RIDER
RIDER

Reputation: 159

Bryan Allo touches on part of my problem, but ultimately it is the animation code that is causing problems. I never figured out how to animate to similar color hue and ditched the following code completely: st.animate({fill: st.color, stroke: "#ccc"}, 500);

The end result is a site that lets users create their own presidential race predictions by state. Here it is.

Upvotes: 0

Chasbeen
Chasbeen

Reputation: 1436

Drop your SVG of the USA into.. this

You can optionally remove OR LEAVE IN the mouseover code which is also generated.

Upvotes: 0

Bryan Allo
Bryan Allo

Reputation: 696

It's been a while since I worked with Raphael.js but I think this is the line resetting your state:

current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");

Try replacing #333 with st.color or whatever that state's color is. If my assumptions are correct that would be something like aus['AK']??? You might have to capture the previous state's color. Let me know if that doesn't work and I can take a closer look.

Good Luck.

Upvotes: 1

Related Questions