Jump to content

Guest zachledoux

World map using Raphael plugin

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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




How would I do that?




Link to comment
Share on other sites



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?




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"}})
current = state;
st[0].onmouseout = function () {
//st.animate({fill: "#333", stroke: "#666"}, 300);
TweenMax.to(st, .3, {raphael:{fill: "#333", stroke:"#666"}})

st[0].onclick = function () {
})(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.




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.