Search code examples
javascriptsvggojs

How to get the pixel coordinates from a SVG path String

I want to display geometric objects on a map using go.js in combination with leaflet.js It is important for me that the geometric object sticks to their geo-position. I simply translate the pixel coordinates to lat/lng geo-coordinates.

However, for some geometric objects it is not that easy for me to get all the necessary geo-coordinates. For a polygon I get an SVG-Path String like :

"F M54 77 L39 128 L0 146 L18 178 L45 215 L87 220 L79 321 L79 400 L153 371 L246 340 L296 325 L332 255 L324 207 L355 164 L338 138 L368 105 L380 23 L336 0 L282 35 L222 10 L147 10 L95 38 L60 44z"

as well as the pixel coordinates of the middle Point. This is the polygon using the SVG-Path from above

So I would need the pixel coordinate of every corner point. Do you have any idea or suggestion how I could translate the SVG path to its pixel coordinates?

Hope you guys can help me.

Best regards!

enter image description here

Solution

  • Do you have a GoJS Part (or Node) that holds a Shape whose Shape.geometryString is what you posted?

    If so, I suggest that you look at the Shape.geometry and look at its Geometry.figures' PathFigures and their PathSegments. For each of those points you can convert to GoJS document coordinates by adding the Part.position plus half the Shape.strokeWidth. Then you can convert document coordinates to LatLng by calling Leaflet map's containerPointToLatLng method.