I’m placing links over a map. Essentially, a string of lat/long pairs are placed inside the ‘points’ field of the link data. I have a start node(red), and an end node (blue). The yellow/green line represents a railroad. My issue is that, as you can see, after the links are drawn using the points array, the end points are rejoined (as if trying to close a polygon). All of my links are doing this. Is there something that generally causes this behavior that I can check?
I’ve verified that there is no legitimate hop back from the end node to the start node in the coordinates. I’ve also tried having and not having end nodes and the links are specifying the correct node keys.
The template for the link is below the image.
`
let theLink =
$(go.Link,
{
layerName: ‘facilities’,
adjusting: go.Link.Stretch,
selectionAdornmentTemplate:
$(go.Adornment,
$(go.Shape,
{isPanelMain: true, stroke: ‘red’, strokeWidth: 3}
)
), // end Adornment
contextMenu:
$(go.Adornment, ‘Vertical’,
$(‘ContextMenuButton’,
new go.Binding(‘fill’, ‘symbolColor’),
$(go.TextBlock,
new go.Binding(‘text’, ‘contextMenuShowDetailsText’),
{
alignment: go.Spot.Left
}),
{
click: (e, obj) => {
this.showInExplorerClicked.emit({e, obj})
}
},
new go.Binding(‘visible’, ‘’, (d) => {
return !this.isDetailPage && d.contextMenuShowDetailsText;
})
),
$(‘ContextMenuButton’,
this.contextMenuButtonStyle,
$(go.TextBlock,
new go.Binding(‘text’, ‘contextMenuEditText’),
{
alignment: go.Spot.Left
}),
{
click: (e, obj) => {
this.editNodeClicked.emit({e, obj})
}
},
new go.Binding(‘visible’, ‘’, (d) => {
return !this.isDetailPage && !this.isUserRealOnly && d.contextMenuEditText;
})
),
$(‘ContextMenuButton’,
this.contextMenuButtonStyle,
$(go.TextBlock,
new go.Binding(‘text’, ‘contextMenuDeleteText’),
{
alignment: go.Spot.Left
}),
{
click: (e, obj) => {
this.deleteNodeClicked.emit({e, obj})
}
},
new go.Binding(‘visible’, ‘’, (d) => {
return !this.isDetailPage && !this.isUserRealOnly && d.contextMenuDeleteText;
})
),
),
toolTip: $(go.Adornment, ‘Auto’,
$(go.Shape, {
figure: ‘RoundedRectangle’,
parameter1: 3, //rounded rect radius
fill: ‘rgba(174, 20, 0, 0.7)’,
strokeWidth: 1,
stroke: ‘white’
}),
$(go.Panel, ‘Vertical’,
new go.Binding(‘itemArray’, ‘toolTipDataArray’),
{
margin: 8,
itemTemplate:
$(go.Panel, ‘Horizontal’,
{
alignment: go.Spot.Left,
margin: 3
},
$(go.TextBlock, {
stroke: ‘#fff’,
font: ‘12px bold arial, sans-serif’,
stretch: go.GraphObject.Fill,
textAlign: ‘center’,
alignment: go.Spot.BottomCenter
},
new go.Binding(‘text’, ‘’)
)
)
},
)
),
},
new go.Binding('points', 'points', (data) => {
let ret = [];
if (!data) return ret;
data.forEach((latlong) => {
let point = this.map.latLngToContainerPoint(latlong);
ret.push(point.x);
ret.push(point.y);
});
return ret;
}),
$(go.Shape, {
strokeWidth: 5,
isPanelMain: true,
cursor: 'pointer',
stroke: 'black'
}),
$(go.Shape,
new go.Binding('stroke', '', (d) => {
if (d.highlighted) {
return 'red';
}
return d.symbolColor;
}),
{
strokeWidth: 3,
isPanelMain: true,
cursor: 'pointer',
name: 'linkFillShape',
}),
$(go.Panel, 'Auto', // this whole Panel is a label
$(go.Shape, 'RoundedRectangle',
new go.Binding('fill', 'symbolColor', (d) => {
return go.Brush.darkenBy(d, .50);
}),
{
stroke: 'white',
name: 'theLabel'
}),
new go.Binding('visible', '', (d) => {
return this.map.getZoom() >= d.minVisibleLabelZoom && this.labelsVisible;
}),
$(go.TextBlock, {
margin: 3,
stroke: '#fff',
font: '9px normal arial, sans-serif',
},
new go.Binding('text', 'linkLabel',))
)
);
`
