2

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.

Chris Smith
  • 480
  • 5
  • 12

2 Answers2

7

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)

Community
  • 1
  • 1
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Works perfectly. Without using decoding and using a single polygon I had to format my data like this: var paths = []; polygon.getPaths().forEach(function (x) { paths.push(x.getArray()); }); – Chris Smith Jan 12 '15 at 11:30
  • @Dr.Mollie thanks for the code sample! I'm having a terrible time trying to have the polygon render as an outline rather than filled. Simply changing the fill attribute to none and setting a stroke fills the entire SVG with the stroke color and none of my attempts to adjust the path format have worked. Do you have any insight into how an outline can be achieved? – Dave Morro May 30 '16 at 12:32
  • 1
    @DaveMorro : set the fill of `g` to `none` and the desired stroke for `path` (instead of `g`) https://jsfiddle.net/doktormolle/eg58oupw/ – Dr.Molle May 30 '16 at 12:47
  • does this account for the curvature of the earth? – Ryan Taylor Mar 06 '18 at 15:56
0

Here is the basic HTML code for drawing polygon when you have set of points, you can embed this in a Javascript function and call with a map object.

<!DOCTYPE html>
<html>
<body>

<svg height="210" width="500">
<polygon points="200,10 250,190 160,210,102,108" style="fill:red;stroke:purple;stroke-     width:1" />
</svg>
</body>
</html>

Here you can replace the x and y coordinates with variables for latitude and longitude for a particular location that the user has input in order to draw polygon on map.For example for the first point x1 = 200 and y1 = 10 and likewise.

Hope this would help!!

AniV
  • 3,997
  • 1
  • 12
  • 17