How to I scale the Raphael map in Rob Flaherty's US map example?

Question

I'm trying to implement this awesome map, but I can't figure out how to scale it. Changing the size of the container div or the height/width values just crops the underlying map. I think I need paper.scaleAll(.5) in here somewhere, but can't figure it out. Thanks!

    <script>
  window.onload = function () {
    var R = Raphael("container", 1000, 900),
      attr = {
      "fill": "#d3d3d3",
      "stroke": "#fff",
      "stroke-opacity": "1",
      "stroke-linejoin": "round",
      "stroke-miterlimit": "4",
      "stroke-width": "0.75",
      "stroke-dasharray": "none"
    },
    usRaphael = {};

    //Draw Map and store Raphael paths
    for (var state in usMap) {
      usRaphael[state] = R.path(usMap[state]).attr(attr);
    }

    //Do Work on Map
    for (var state in usRaphael) {
      usRaphael[state].color = Raphael.getColor();

      (function (st, state) {

        st[0].style.cursor = "pointer";

        st[0].onmouseover = function () {
          st.animate({fill: st.color}, 500);
          st.toFront();
          R.safari();
        };

        st[0].onmouseout = function () {
          st.animate({fill: "#d3d3d3"}, 500);
          st.toFront();
          R.safari();
        };

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

  };
</script>

score 2 · Accepted Answer · answered Feb 03 '13 at 19:22

The other answer is almost correct, but you have to set the anchor point of the scale command to 0,0 so that each state is scaled from the same point:

element.transform("s2,2 0,0");

While you're at it, I'd make an R.set() element and add each state to it, so that you can apply the scale just to the states in the event that you add other objects, like a legend, that you do not want to scale:

usRaphael = {},
states = R.set();

//Draw Map and store Raphael paths
for (var state in usMap) {
  usRaphael[state] = R.path(usMap[state]).attr(attr);
  states.push(usRaphael[state]);
}

Then at the end:

states.transform("s2,2 0,0");

jsFiddle

score 0 · Answer 2 · answered Feb 02 '13 at 22:21

0

After you draw the map (outside of your for loops) try the following:

R.forEach(function(element) {
    element.transform("s2");
});

I'm not sure what version of Raphael you are using, but my code is assuming the latest. What this does is it iterates over every path on the paper and sets the transform to "scale 2". This will scale all of the paths by 2.

answered Feb 02 '13 at 22:21

DigitalZebra

39,494
39
114
146

1

Thanks! I'm using the latest Raphael, but this snippet doesn't quite work. It scales each element but leaves the overall map the same size, so there are huge gaps between states when trying to scale smaller. I think I just need to insert a command at the "paper" level. – Acyra Feb 02 '13 at 22:30

How to I scale the Raphael map in Rob Flaherty's US map example?

2 Answers2