GoJS over Leaflet -- route points disappear

GoJS
1

I’m having a strange issue with GoJS over Leaflet in Angular 2+. I am following much of the Leaflet sample and my nodes (representing lat/long positions on a Leaflet map) are being projected correctly, and behave correctly when the map is panned or zoomed. The problem happens when I also want to bring in points on a route (think a path I want the user to take from node to node, there may be many lat/long “turns”). I use the same methodology to bind the converted latlongs into “points” as was done for the nodes, but when I pan or zoom the map, almost always the points on the route appear to be discarded and I get perfectly straight lines from node to node. If I move the map again, after many attempts, sometimes the routes appear to be considered.

I’ve set up my diagram as:

this.theDiagram = $(go.Diagram, 'diagramOverlayDiv',
  {
    "dragSelectingTool.isEnabled": false,
    "animationManager.isEnabled": false,
    scrollMode: go.Diagram.InfiniteScroll,
    allowZoom: false,
    allowHorizontalScroll: false,
    allowVerticalScroll: false,
    hasHorizontalScrollbar: false,
    hasVerticalScrollbar: false,
    isReadOnly: true,
    initialPosition: new go.Point(0, 0),
    padding: 0,
    "toolManager.hoverDelay": 100  // how quickly tooltips are shown
  });

I’ve set up my map’s move handler:

.on(“move”, (t) => {
this.amUpdatingDiagram = true;
this.theDiagram.updateAllTargetBindings(); //<-- can’t specifiy latlong or points because .ts is parameterless only
//this.theDiagram.redraw() //<-- redraw is not a member of go.Diagram
this.amUpdatingDiagram = false;
})
.on(“moveend”, (t) => this.storeCurrentMapCenter(t))
.on(“overlayadd”, (t) => this.onOverlayAdd(t));

My link template:

this.theDiagram.linkTemplate =
$(go.Link,
{
layerName: “Background”,
curve: go.Link.Bezier,
curviness: 2,
toolTip: $(go.Adornment, “Auto”,
$(go.Shape, {
figure: “RoundedRectangle”,
parameter1: 3, //rounded rect radius
fill: ‘rgba(54, 76, 98, 0.6)’,
strokeWidth: 1,
stroke: ‘white’
}),

      ),
    },
    new go.Binding("points", "", (data) => {
      let ret = [];

      let points = data.points;

      points.forEach((latlong) =>
      {
        var point = this.theMap.latLngToContainerPoint(latlong);
         ret.push.apply(ret, [point.x, point.y]);
      });

      return ret;

    }).makeTwoWay((pt, data) => {
      if (this.amUpdatingDiagram) {
        return data.latlong; // no-op
      } else {
        var ll = (this.theMap.containerPointToLatLng([pt.x, pt.y]));
        return [ll.lat, ll.lng];
      }
    }),
    $(go.Shape, {
      strokeWidth: 3, stroke: "rgba(255,161,0,.7)"
    })

  );

for each Link, “points” is an array of lat, long arrays like: [38.84502669900006, -90.08835366600002].

Again, when I refresh the page the routes look great. When I move the map or zoom, the links go straight from node to node and disregard the points.

Any ideas on why this might be happening?

Thanks,

K

2

The re-evaluation of the “latlong” bindings causes the Nodes to be moved. That automatically invalidates the routes of the connected Links. So by default they get their natural straight routes. You can avoid that by setting Link.adjusting to go.Link.Stretch.

Are you expecting the user to be modifiying the routes of the links? In other words are you expecting LinkReshapingTool or some other code to be modifying the link routes? If not, there should not be a TwoWay Binding on the Link.points.

I’ve updated the link template from the Leaflet sample to be slightly more efficient while still including your binding conversion function to use the saved routes:

  myDiagram.linkTemplate =
    $(go.Link,
      {
        layerName: "Background",
        curve: go.Link.Bezier,
        adjusting: go.Link.Stretch,
        curviness: 2
      },
      new go.Binding("points", "", data => {
        var arr = [];
        if (!data.points) return arr;
        data.points.forEach(latlong => {
          var p = myLeafletMap.latLngToContainerPoint(latlong);
          arr.push(p.x);
          arr.push(p.y);
        });
        return arr;
      }),
      $(go.Shape, { strokeWidth: 3, stroke: "rgba(100,100,255,.7)" })
    );
3

Thanks Walter, I’ll give go.Link.Stretch a go and let you know the results.

Update: just saw your pasted code, will give that a go and let you know!

No, there is no current use case allowing the user to change any routes, so I will remove the two way binding as well.

Thanks again,

Kris

4

I’ve just tested with your updated code block and it works perfectly for pan and zoom. Thanks again.