How to convert coordinates

68 views
Skip to first unread message

artur....@gmail.com

unread,
Dec 7, 2017, 5:20:48 AM12/7/17
to Google Maps JavaScript API v3
Good day.
Have an interesting task: to convert coordinates of poligons from map here to LatLng format in order to use in google maps API.
"Digging" the code of that map I discovered strings like
<path class="leaflet-interactive" stroke="black" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0" fill="#ffff00" fill-opacity="0.3" fill-rule="evenodd" d="M462 399L454 405L454 408L451 406L452 409L445 414L445 418L448 417L448 419L451 418L453 420L457 418L466 418L467 413L469 411L467 411L465 407L460 407L463 402L462 400z">


So I am assuming, that
d="M462 399L454 405L454 408L451 406L452 409L445 414L445 418L448 417L448 419L451 418L453 420L457 418L466 418L467 413L469 411L467 411L465 407L460 407L463 402L462 400z"


is coordinates to convert.

BUT
I have no idea how to convert it into LatLng format.
Does anyone has any suggestions?

Rob

unread,
Jan 2, 2018, 3:50:30 AM1/2/18
to Google Maps JavaScript API v3
Hi Artur,

Your d="M462..." string is basically a set of instructions to move a virtual "pen" to draw a series of straight-line sections to make up a polygon. The "M" and "L" parts of the string are commands which tell the "pen" where to go and what to do; so

M462 399

instructs the "pen" to Move to the point (462, 399), and

L454 405

instructs the "pen" to draw a straight Line from the previous point (462, 399) to the point (454, 405), and so on, until the "z" command tells the system to close the path. For more information on those commands see e.g. SVG Paths

So, you will note that the coordinates given ((462, 399), (454, 405), etc.) are all simple integer values which represent (I'm guessing here) pixel coordinates in the "leaflet-interactive" component where you got the code you posted. In other words, these integer values IN NO WAY represent lat/long coordinates, and so - unless you can convert somehow between pixels-to-lat/long values in the original (Leaflet?) component - you will not be able to use the values in your string to create a polygon at the correct position in the map using the Google maps API.

Best regards,
Rob

Olha Buchel

unread,
Jan 7, 2018, 6:43:47 PM1/7/18
to google-map...@googlegroups.com
These are pixellated coordinates. They have to be converted to geographic coordinates. I do not remember the name of the function that there is a function in Google maps api for such a conversion.

Olha

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-maps-js-api-v3+unsub...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at https://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.

JKurtock

unread,
Jan 8, 2018, 7:37:07 PM1/8/18
to Google Maps JavaScript API v3
Your "path" element cited is part of an SVG element.  https://developer.mozilla.org/en-US/docs/Web/SVG The SVG element may contain a viewBox attribute.  Using those attributes will allow the browser to map the coordinates in the path element to the pixels on the screen.

The points in the path element do not represent pixels, until they are scaled by the browser using the viewBox attribute and others (and they are are not "pixelated" anything; that's a completely different concept.)  I'm going to guess that they happen to draw a polygon on top of a map (in another div).  It is up to you to determine the relationship between the SVG element and the map; google maps has no way to know any of that, and there is no google maps "function" to determine that for you.
Reply all
Reply to author
Forward
0 new messages