Image Position Links

@n0gare wrote:

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

Posts: 2

Participants: 2

Read full topic