javascript - Convert a Google Maps polygon path to an SVG path

Question

When a user has drawn a polygon in Google Maps using the built in Drawing Manager I save the polygon path. I want to convert this polygon path to an SVG path so that I can reproduce the shape of the polygon drawn easily, without requiring lots of additional map loads and calls to the Google Maps API.

I'm sure it's just some fairly trivial mathematics but can't work out how to do it. Do I need to create a bounding box around the points and translate it to LatLng 0, 0 before scaling it down or can I do something simpler using just the LatLng coordinates of each point?

I've found lots of questions asking to achieve the opposite, converting SVG to a map polygon but not this. Any pointing me in the right direction appreciated.

Answer 1

You can't use the coordinates directly, you first must translate them to points based on a projection.

For the mercator-projection you'll find the formula here: https://stackoverflow.com/a/14457180/459897

A javascript-function based on this formula may look like this:

/**
  *@param latLng object with properties lat and lng(of the coordinate)
  *@return object with properties x and y(of the translated latLng)
  **/
function latLng2point(latLng){

  return {
          x:(latLng.lng+180)*(256/360),
          y:(256/2)-(256*Math.log(Math.tan((Math.PI/4)
                     +((latLng.lat*Math.PI/180)/2)))/(2*Math.PI))
         };
}

Convert the coordinates of the path via this function. A path in svg is a sequence of x,y-pairs, delimited by a space as seen in the answer by AniV( but I guess you know what to do with a svg-path).

When you Convert the path, create 4 variables where you store:

1. the min-x-value
2. the max-x-value
3. the min-y-value
4. the max-y-value

These variables use to calculate the viewBox of the svg-element.

the 4 parameters for the viewBox are:

1. x: use minX
2. y: use minY
3. width: use (maxX-minX)
4. height: use (maxY-minY)

Demo(drawing the shape of the US): http://jsfiddle.net/doktormolle/9xhsL39u/

(Note: the demo loads the maps-API, but only for the purpose of path-decoding, the used paths are very complex and therefore encoded. The maps-API is not required for the coordinate-conversion/svg-drawing)