Image Position Links

Hello there,

I am working with GoJS for a couple of weeks so excuse me if I am doing something completly wrong here.
So I want to to display a graph with nodes and links, to those edges i want to attac Images. For some reason the positon of the image is not as I expected it to be. I want the image to be shown at the middle point of each link, I have looked through some examples and I orientated my code with those samples. But for some reason this is not working for me. I use GoJS in combination with Leaflet, but I dont think that this should be an issue.
Here is the code of my linktemplate:

’ diagram.linkTemplate =
$(go.Link,
{ selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
{ relinkableFrom: true, relinkableTo: true, reshapable: true },
{
routing: go.Link.Normal,
curve: go.Link.JumpOver,
corner: 5,
toShortLength: 4
},

            new go.Binding("layerName", "LayerName"),
            new go.Binding("points", "latLngs", function (data) {
                    var points = [];
                    for (var i = 0; i < data.length; i++) {
                        var point = map.latLngToContainerPoint(data[i]);
                        points.push(point.x);
                        points.push(point.y)
                    }
                    return points;
            }).makeTwoWay(function (pt, data) {
                if (myUpdatingGoJS) {
                    return data.latLngs; // no-op
                } else {
                    var ll = (map.containerPointToLatLng([pt.x, pt.y]));
                    return [ll.lat, ll.lng];
                }
            }),
                $(go.Shape,
                    new go.Binding("stroke", "stroke"),
                    new go.Binding("strokeWidth", "strokeWidth"),
            ),

                $(go.Picture, { margin: 0, width: 45, height: 45, /*aligment: go.GraphObject.Center*/ },

                    new go.Binding("source", "imageUrl"),
                ),
                {
                    contextMenu:     // define a context menu for each link
                    $(go.Adornment, "Vertical",
                        $("ContextMenuButton",
                            $(go.TextBlock, "Change Link Style"),
                            { click: changeColorForLink }),
                        $("ContextMenuButton",
                            $(go.TextBlock, "Zoom In"),
                            { click: zoomIn }, ),
                        $("ContextM<img src="/uploads/db3963/original/2X/b/b020162519145e41554704c13cf81bb9783ed90e.PNG" width="763" height="669">enuButton",
                            $(go.TextBlock, "Item Properties"),
                            { click: showItemProperties }, )
                        // more ContextMenuButtons would go here
                    )  // end Adornment
                },
                $(go.Panel, "Auto")

            );`

I hope you guys can help me out!
Best regards

So the circled “A” is what is returned by the imageUrl? I don’t understand why the Pictures aren’t positioned at the midpoint of the links – unless there is a problem with the Link.points that you are binding. You might want to check that there are only two points in your data for each link.

By the way, your final $(go.Panel, "Auto") is completely superfluous and can be deleted.

Thank you for the quick response. I checked the things you mentioned.
Yes the circeld “A” is an image (.png).
I also made sure that there are exactly to points to each link in the binding.
I deleted the superfluous part of my code.

The interesting thing is that I also have an example with the exact same code, where there are links with more than two point in the binding. In this example the image is displayed correctly at the middlepoint of the links. The only differnence is the data I use to fill the binding. I would be suprised if this would be the issue, since at the end of the day it is just a lat/lng pair and the links are shown at the correct position.

Here is a screenshot of the example where the links have more than just two points. The image used here is also a .png file.

Are the Links actually connected to Nodes? What are those big black circles in the first screenshot that are not in the second screenshot?

If you select a Link, can you confirm that the Link.points are actually reasonable? I’m wondering if the link routes were recomputed for some reason, thereby losing your data-bound routes. That might happen if the nodes were connected afterward, or if the nodes changed size afterward, or if the nodes were moved afterward.

On a completely unrelated issue, if your pictures are always of circles with text inside, it might be better if you used a “Spot” or “Auto” Panel holding a “Circle” Shape and a TextBlock. This is usually better for scaling and printing.

The links in the second screenshot are not connected to any Nodes. But anyway I was able to track the issue down thanks to your comment before. I took a detailed look into the points of the links and saw that there was only one coordinate, which makes me wonder why the link would even be visible.
So thank you walter!