Leaflet-routing-machine: Is there a way to load waypoints if they have been saved in some kind of data store?

Question

I followed this great tutorial, add because of it was able to add it to my routing machine; However, I'd like to save the waypoints in local-storage and load them when needed.

I tried this when creating my Routing Machine:

 if (map && !this.control) {
      this.control = L.Routing.control({
        collapsible: true,
        show: false,
        position: 'bottomleft',
        lineOptions: {
          styles: [{ color: 'chartreuse', opacity: 1, weight: 5 }]
        },
        waypoints: [null], //<--- I set the waypoints to null
        createMarker: function(i, wp, nWps) {
          if (i === 0) {
            return L.marker(wp.latLng, {
              icon: startIcon,
              draggable: true
            });
          }
          if (i === nWps - 1) {
            return L.marker(wp.latLng, {
              icon: endIcon,
              draggable: true
            });
          }
        }
      })
        .on('routingstart', this.handleLoader.bind(this))
        .on('routeselected', function(e) {
          var route = e.route;
        })
        .on('routesfound routingerror', this.handleLoader.bind(this));

And then in the initial listeners for the click events for the start and destination events:

  map.on(
        'click',
        function(e) {
          var container = L.DomUtil.create('div'),
            startBtn = createButton('Start from this location', container),
            destBtn = createButton('Go to this location', container);

          function createMarkerHelper(marker) {
            setUserMarkers(marker);
          }

          L.popup()
            .setContent(container)
            .setLatLng(e.latlng)
            .openOn(map);

          L.DomEvent.on(
            startBtn,
            'click',
            function() {
              var wayPointStart = this.control.getWaypoints()[0].latLng;
              if (wayPointStart != null && userMarkers[0] !== undefined) {
                this.control.spliceWaypoints(0, 1, userMarkers[0]);
              } else {
                this.control.spliceWaypoints(0, 1, e.latlng);
                createMarkerHelper(e.latlng);
              }
              map.closePopup();
            }.bind(this)
          );

          L.DomEvent.on(
            destBtn,
            'click',
            function() {
              var wapPointDestination = this.control.getWaypoints()[1].latLng;

              if (wapPointDestination != null && userMarkers[1] !== undefined) {
                this.control.spliceWaypoints(
                  this.control.getWaypoints().length - 1,
                  1,
                  userMarkers[1]
                );
              } else {
                this.control.spliceWaypoints(
                  this.control.getWaypoints().length - 1,
                  1,
                  e.latlng
                );
                createMarkerHelper(e.latlng);
              }

              map.closePopup();
            }.bind(this)
          );
        }.bind(this)
      );

So this is what I tried for when one starting click event:

      function() {
              var wayPointStart = this.control.getWaypoints()[0].latLng;
              if (wayPointStart != null && userMarkers[0] !== undefined) {
                this.control.spliceWaypoints(0, 1, userMarkers[0]);
              } else {
                this.control.spliceWaypoints(0, 1, e.latlng);
                createMarkerHelper(e.latlng);
              }
              map.closePopup();
            }.bind(this)

So essentially I am using the getWaypoints method to check if the waypoint is null, (it would be during a fresh start) and checking if any Markers are in local storage if that conditional is true it would naturally load the markers. If not true it would just set it like normal.

Then later Leaflet has a update function, which you can use to see if props change:

  updateLeafletElement(fromProps, toProps) {

    var start =
        toProps.userMarkers[0] !== undefined &&
        this.control.getWaypoints()[1].latLng != null
          ? toProps.userMarkers[0]
          : null,
      destination =
        toProps.userMarkers[1] !== undefined &&
        this.control.getWaypoints()[1].latLng != null
          ? toProps.userMarkers[1]
          : null;

    this.control.spliceWaypoints(0, 1, start);
    this.control.spliceWaypoints(this.control.getWaypoints().length - 1, 1, destination);

    if (toProps.removeRoutingMachine !== false) {
      this.control.setWaypoints([]);
    }
  }

My thinking is this would always ensure the markers are always being updated. But it hasn't worked.

Any ideas? Thanks in advance!

question from:https://stackoverflow.com/questions/65599673/leaflet-routing-machine-is-there-a-way-to-load-waypoints-if-they-have-been-save

Answer 1

Waitting for answers