Hello,
I want to bind a custom geometry inside the nodeTemplate.
Since I am using GOJS in combination with leaftlet.js, it is important that the geo location of nodes and links is correct.
I want to bind every cornerpoint of a polygon to a geographic location. Otherwise I would just use the Shape.geometryString
. So posted a question on stackoverflow, because I thought I was facing a general problem.
I followed the suggested instructions and I think it is working pretty nice (Thank you Walter!). Take a look at the post javascript - How to get the pixel coordinates from a SVG path String - Stack Overflow
Now that I have the correct geographic coordinates to each point how am I able to display this?.
My approach was to create a new geometry object, that I would pass to the node through a binding. I am creating the geometry with this method
//segments is an array of lat/lng pairs function createGeometryForPolygon(startGeoPos, segments) { var point = map.latLngToContainerPoint(startGeoPos); var geometryObject = new go.Geometry() .add(new go.PathFigure(point.x, point.y));
for (var i = 0; i < segments.length; i++) { var pixPos = map.latLngToContainerPoint(segments[i]); geometryObject.add(new go.PathSegment(go.PathSegment.Line, pixPos.x, pixPos.y)); // close the figure if the last segement has been added if (i == segments.length - 1) { geometryObject.add(new go.PathSegment(go.PathSegment.Line, pixPos.x, pixPos.y).close()); } } return geometryObject; }
So I tried to bind this geometry object in different ways:
new go.Binding("figure", "type", function (d) { if (typeof (d) == "object") { console.log(createFiguresForPolygons(d.startGeo, d.geoCoordinates)); return createFiguresForPolygons(d.startGeo, d.geoCoordinates); } else { return d; } }),
new go.Binding("shape", "geo"),
new go.Binding("geometry", "geo"),
I hope you understand what my problem is.
Best regards!