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.
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.
Share Improve this question edited Jan 8, 2015 at 17:01 Chris Smith asked Jan 8, 2015 at 16:19 Chris SmithChris Smith 4805 silver badges14 bronze badges2 Answers
Reset to default 7You 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./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:
- the min-x-value
- the max-x-value
- the min-y-value
- the max-y-value
These variables use to calculate the viewBox of the svg-element.
the 4 parameters for the viewBox are:
- x: use
minX - y: use
minY - width: use
(maxX-minX) - height: use
(maxY-minY)
Demo(drawing the shape of the US): http://jsfiddle/doktormolle/9xhsL39u/
(Note: the demo loads the maps-API, but only for the purpose of path-decoding, the used paths are very plex and therefore encoded. The maps-API is not required for the coordinate-conversion/svg-drawing)
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!!