Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Guest zachledoux

World map using Raphael plugin

Recommended Posts

Hello,

 

I would like to use the JS Raphael plugin to make a world map like this one, made for the original Raphael plugin.

 

http://raphaeljs.com/world/

 

How would I do that?

 

Thanks!

Zach

Link to comment
Share on other sites

Hi,

 

I'm not understanding your question. I'm a bit confused by what you are referring to as the "JS Raphael plugin" and "the original Raphael plugin".

 

In your second post you mention something about a "non-GS version" but again, I don't know what exactly that means.

 

Do you have a very simple example of what you are working on that illustrates the errors you are experiencing?

Link to comment
Share on other sites

Sorry for the confusion. I didn't explain properly.

 

The above links are maps that were designed with the Raphael.js script. I would like to do a similar map using the GS RaphaelPlugin.min.js scrpit. How would I adjust the markup of one of those examples, to work with the GS script?

 

Thanks,

Zach

Link to comment
Share on other sites

Thanks for the clarification, makes a lot more sense now;)

 

I'm not a Raphael expert by any means, but I downloaded the files for the 2nd example and got this to work by just replacing 2 of the raphael animate() calls with TweenMax tweens

 

 

for (var state in map) {
map[state].color = Raphael.getColor();
(function (st, state) {
st[0].style.cursor = "pointer";
st[0].onmouseover = function () {

//Not so sure what to do with this line
//current && map[current].animate({fill: "#333", stroke: "#060"}, 300);

//st.animate({fill: st.color, stroke: "#ccc"}, 300);
TweenMax.to(st, .3, {raphael:{fill: st.color, stroke:"#ccc"}})
R.safari();
current = state;
};
st[0].onmouseout = function () {
//st.animate({fill: "#333", stroke: "#666"}, 300);
TweenMax.to(st, .3, {raphael:{fill: "#333", stroke:"#666"}})
R.safari();
};

st[0].onclick = function () {
alert(state);
};
})(map[state], state);
}; // end for

 

Be sure to include the RaphaelPlugin

 

 

<script src="plugins/RaphaelPlugin.min.js"></script>
<script src="TweenMax.min.js"></script>

  • Like 1
Link to comment
Share on other sites

On a side note I would also recommend using SVG map and then TweenMax/Lite to animate properties.

 

something like the following, as you may notice I have set an ID for each country so I could manipulate that object on demand.

 

http://www.netgfx.com/trunk/svgmap/

 

Whilst Rafael is an excellent library I tend to keep things simple when I can. Just my 0.2$ 8-)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×