Best way to scale a map?

[Daniel Austin]

I have a map of the US drawn in RaphaelJS but it's too big.

I took the path info from an SVG map. I used Inkscape to scale it down but Inkscape just records the transformation and leaves the original path info untouched. So when I convert those paths to RaphaelJS library calls the map stays large.

I tried using the scale transformation and this does indeed shrink the constituent parts (the US states) but leaves large gaps between each state because although they're smaller they stay in the same position.

Now I'm writing a script to scale all the numbers in the original SVG but perhaps there's an easier way? For example, can I get Inkscape to permanently apply the transformation or get RaphaelJS to scale and move the states?

Any ideas welcome. :-)

Dan

[charles thomas]

Austin   It sounds like you have not "grouped" the states in Inkscape (Selector tool + Control G) Once you have "grouped" in inkscape you really do have a "united states" and you can scale her down just like a single object.   Then get the path(s) into Raphael... --- On Tue, 3/24/09, Daniel Austin <daniel...@gmail.com> wrote:

Now with a new friend-happy design! Try the new Yahoo! Canada Messenger

[Janos Erdelyi]

i had that exact same issue. i ended up writing a brute force console app in c#. it's not terribly flexible though - for some reason xpath was not working properly on the input svg/xml and i just wanted it done. but it worked! i also had it trim out all decimal places on the resulting coordinates - it was going out to the hundred-thousands and millions decimals. that knocked down the resulting file size significantly.

[karf]

Hi, Daniel,

I had exactly the same problem. You can do it in Inkscape. Make sure
you have checked Transform -> Optimized in Inkscape preferences.
Inscape will then apply all transformations to the path data instead
of the transform attribute - if possible. But if you have the paths
inside groups, this will not work when scaling the group. I have found
a little trick - select the paths using "search" command. This will
find paths inside groups and select them directly. Then it is possible
to scale them all at once with transform applied to the path data.

As for scaling in Raphael - it is possible too, but Raphael cannot
(AFAIK) scale group of objects - you have to scale all the paths
manually and compute all the transform matrices separately (not very
trivial task).

Karel

[Daniel Austin]

Thanks everyone.

Seems I should get to know Inkscape a little better.

In the end I brute-forced it with some pretty ugly Perl code. Sounds similar to what you did Janos.

I'll now go back and try and do it "properly." :-)

Dan

[Janos Erdelyi]

cool, please let us know how that goes. i have inkscape, but i quickly grew frustrated with my lack of knowledge with it.

[Nphyx]

Janos: could you share that program/source? :)

On Mar 25, 4:36 pm, Janos Erdelyi <janos.erde...@gmail.com> wrote:
> cool, please let us know how that goes. i have inkscape, but i quickly grew
> frustrated with my lack of knowledge with it.
>

[Janos Erdelyi]

sure thing. it's a bit gross to post here directly - so here's a pastebin.
http://trac.pastebin.com/m227825f2

a few warnings-  this was hackish and gross and a quickie. :O

it takes in an svg file and reads it - the file i had was of a very particular structure, so it would need to be tuned to fit in order to find the right nodes to extract data from. for my needs it worked great though -  all 50 US states were too small and in a very strange place on the canvas, so this scaled and moved the paths.
it's spitting out some pre-formed javascript so the output will likely need alteration as well.

-janos

2009/3/26 Nphyx <nph...@gmail.com>

[Dmitry Baranovskiy]

This is the case where XSLT will be for the rescue. :)

[Janos Erdelyi]

excellent. i've had very little need (or desire) for xslt over the years, but i can definitely see where it could be useful here. good luck!

[marc....@gmail.com]

> I tried using the scale transformation and this does indeed shrink the
> constituent parts (the US states) but leaves large gaps between each state
> because although they're smaller they stay in the same position.

Here is a way: first scale, then translate the path.
When raphaeljs scales, it does so that the BBox after is the same as
before. So to keep your map consistent, you can apply the following
code to each path that constitute your map:

var scaleFactor=...
// This will scale centered on the path BBbox center
p.scale(scaleFactor, scaleFactor);
// Tranlate the path so that the whole map is scaled.
var box = p.getBBox();
var x = box.x + box.width/2.0, y = box.y + box.height/
2.0;
var dx = x * scaleFactor - x, dy = y * scaleFactor-
y ;
p.translate(dx, dy);

[marc....@gmail.com]

> When raphaeljs scales, it does so that the BBox after is the same as
> before.

I meant the BBox center stays the same.