CODEWITHSUNDEEP
javascriptsvgraphael
lcazarre
lcazarre

Reputation: 743

How to scale a svg map to display on the web

I would like to add an interactive map of Europe on my website, as part of a web development course I am taking.

I am trying to use the raphael javascript library for that purpose. I tried to adapt the following example (map of Australia) from the raphaeljs website: http://raphaeljs.com/australia.html

I am planning to use the following map of Europe, as a replacement for the map in the above example: http://commons.wikimedia.org/wiki/File:Blank_map_of_Europe.svg

However, the coordinates from the svg file takes values between [0-1400] for the width and [0-1200] for the height. This is much too large to display on a webpage. Instead I would like to scale the map to, for instance, 700x600 pixels.

Is it possible to easily scale the map without having to change all the coordinates (there are thousands of them) manually?

Thanks for your help.

Upvotes: 0

Views: 207

Answers (1)

Ian
Ian

Reputation: 13842

I think you should be able to scale your viewBox, so something like and it should scale ok.

I'm guessing in Raphael it may need something like...

var paper = Raphael('paper');
paper.setViewBox(0,0,1400,1400);

Upvotes: 1

Related Questions