How to show Distance as label between 2 cities?

GoJS
1

How to show Distance (in meter/km) as label between 2 cities ? Also re-calculate Distance after move node to another coordinat.

image
image897×439 203 KB

Thank You

2

Is that supposed to be a tooltip? You could implement that in HTML or in GoJS. If you want the latter, I can show you how to create that. (It’s rather late here.)

I think you should ask your mapping API to determine the path of the route and its length.

3

Can it be bound on the blue line ? so like city’s label
ezgif-4-fcd529c6b9

If can’t, it’s OK to show in tooltip
Thank You

4

You can have a tooltip on any object, including a Link.

[EDIT] Here’s the code. First a custom figure definition:

go.Shape.defineFigureGenerator("TipOutline", (sh, w, h) => {
  const alen = 10;  // horizontal length of pointer
  const t = h/6;  // breadth (height) of pointer
  const geo = new go.Geometry()
    .add(new go.PathFigure(0, 0, true, true)  // filled and shadowed
      .add(new go.PathSegment(go.PathSegment.Line, 0, 0))
      .add(new go.PathSegment(go.PathSegment.Line, w, 0))
      .add(new go.PathSegment(go.PathSegment.Line, w, h-t))
      .add(new go.PathSegment(go.PathSegment.Line, w/2+t, h-t))
      .add(new go.PathSegment(go.PathSegment.Line, w/2, h))
      .add(new go.PathSegment(go.PathSegment.Line, w/2-t, h-t))
      .add(new go.PathSegment(go.PathSegment.Line, 0, h-t).close()));
  geo.spot1 = new go.Spot(0, 0, 4, 4);
  geo.spot2 = new go.Spot(1, 1, -4, -4-alen);  // content should not overlap right side
  return geo;
});

Then the link template tooltip:

  $(go.Link, . . .,
    {
      toolTip:
        $(go.Adornment, "Spot",
          { isShadowed: true },
          $(go.Placeholder),
          $(go.Panel, "Auto",
            { alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom },
            $(go.Shape, "TipOutline",
              { fill: "lightyellow", stroke: "gray", strokeWidth: 0.5, shadowVisible: true }),
            $(go.Panel, "Table",
              $(go.Shape, "Triangle", { row: 0, width: 20, height: 20, strokeWidth: 0 }),
              $(go.TextBlock, "2 jam 13 mnt",
                { row: 0, column: 1, alignment: go.Spot.Left, stroke: "green", font: "bold 12pt sans-serif" },
                new go.Binding("text", "...")),
              $(go.TextBlock,  "118 mil",
                { row: 1, column: 0, columnSpan: 2, alignment: go.Spot.Left },
                new go.Binding("text", "..."))
            )
          )
        )
    },
    . . .)

Note that I have not bothered to get the Shape geometry or Picture image that you want – I just substituted a “Triangle”.

And of course you’ll need to provide for each data Binding a binding data source property and possibly a data conversion function so that it will display the right information.

The result:
image

5

Sorry, I mean it’s not only show static tooltip, but I want really measure the distance of 2 cities as label of line, in meters or kilometers. for every line/connector.

ex : from London to Bristol = 189 km
London to Leeds = 316 km
Liverpool to Birmingham = 159 km

image

6

Sure, but that’s not something GoJS can answer – it cannot know about all of the possible paths, whether or not some roads are closed or slow due to traffic, etc. You have to ask your maps API for that information.

But if you have that information, it’s easy to show it. Just use a data binding on the TextBlock.text property. There are lots of examples of this throughout the Introduction and the Samples, including this sample itself.

7

OK, understand.

I have found some function to calculate distance between 2 coordinates.
But how to get both coordinates to embed on link as label, not as tooltip ?

Thank You

8

Here’s a much more fancy than needed example packaged up as an extension: Using Dimensioning Links

But here’s a basic example that shows the direct distance in document coordinates:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      layout: $(go.ForceDirectedLayout),
      "undoManager.isEnabled": true
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.linkTemplate =
  $(go.Link,
    $(go.Shape),
    $(go.Shape, { toArrow: "OpenTriangle" }),
    $(go.TextBlock,
      { background: "lightyellow" },
      new go.Binding("text", "", link => {
        const f = link.fromNode.location;
        const t = link.toNode.location;
        return Math.sqrt((t.x-f.x) * (t.x-f.x) + (t.y-f.y) * (t.y-f.y)).toFixed(2);
      }).ofObject())
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);
  </script>
</body>
</html>