GoJS over Leaflet -- route points disappear

@av8orbynight wrote:

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

Posts: 4

Participants: 2

Read full topic