svgraphaeltransform

Spherical map transformation


I'm using Raphael JS to display a scrollable, zoomable map of the world, which is working fine. But any 2D representation of a globe is going to be distorted. If possible I'd like to transform the map so that the top and bottom are pinched in, to make the map at least a little bit more representative of a globe. Is it possible to achieve such effects with Raphael's matrix, or by hacking deeper into it to insert a manual transformation?


Solution

  • You can't achieve this effect with Raphael's tranform (or SVG's native matrix transform). Raphael is an excellent vector drawing library, but trying to use maps on it is somewhat akin to using Illustrator when you should be using a GIS, posible but not ideal.

    If you can afford to lose IE 8 =< support, d3.js is an SVG visualization library that supports geographic projections. Take a look at this demo http://mbostock.github.io/d3/talk/20111018/azimuthal.html

    Otherwise, I'd recommend getting the source for a map with a projection more suited to your needs, such as this one http://en.wikipedia.org/wiki/File:BlankMap-World6.svg. But then it would be more difficult to convert lon lat to pixels.