Search code examples
svgrenderinggeospatialopenstreetmapgeo

Convert geographic coordinates into svg coordinates


I want to build a Node JS application that generates an SVG image from geographic coordinates it fetches from overpass.

I tried to implement that by just using the geographic coordinates as coordinates for SVG paths, but the result looks distorted (it should look like this):

enter image description here

I assume the problem is that the earth is actually a sphere and there needs to be done some math in order to get a correct map projection.

What is the actual problem here? Are there any existing algorithms or libraries to cope with that?


Solution

  • The math behind this is called map projection.

    Many online maps use the Mercator projection. The OSM Wiki has example code in various languages. I'm sure you will find more libraries on the Internet.