onClick to add Marker after all waypoints are removed fires only after second click

[antonioOrtiz]

I followed the recommendation from the Leaflet Routing Machine regarding interactions i.e. onClicks.

With my implementation, I'm saving the waypoints in local-storage—saving the latitude and longitude obj I get from the map click, to an array called markers

The event handler has a conditional which separates the click into two outcomes—an adding (to the markers array) or updating it.

Like I said in the title, initial interaction is fine, it's just when I remove any marker and try to add it again is the problem. Also I noticed the markers array is completely empty, and next event fired is an update when clearly it should be an addition:

Here is the relevant code in the Routing Machine:

  updateLeafletElement(fromProps, toProps) {
    const { map } = this.props.leaflet;

    var { markers } = this.props;

    function createButton(label, container) {
      var btn = L.DomUtil.create('button', '', container);
      btn.setAttribute('type', 'button');
      btn.innerHTML = label;
      return btn;
    }

    var { localDispatch } = this.state;

    var container = L.DomUtil.create('div'),
      startBtn = createButton('Start from this location', container),
      destBtn = createButton('Go to this location', container);

    map.on(
      'click',
      function(e) {
        L.popup()
          .setContent(container)
          .setLatLng(e.latlng)
          .openOn(map);

        L.DomEvent.on(startBtn, 'click', function() {

          if (e.latlng) {
            e.latlng.alt = 'current location';
            localDispatch({
              type: 'addMarker',
              payload: {
                marker: e.latlng
              }
            });
          }

          if (markers.length === 0) {
            e.latlng.alt = 'current location';

            localDispatch({
              type: 'updateMarkers',
              payload: {
                marker: e.latlng
              }
            });
          }

          self.control.spliceWaypoints(0, 1, e.latlng);
          map.closePopup();
        });

        L.DomEvent.on(
          destBtn,
          'click',
          function() {
            if (markers[1] === undefined) {
              e.latlng.alt = 'current destination';
              localDispatch({
                type: 'addMarker',
                payload: {
                  marker: e.latlng
                }
              });
            }
            if (toProps.markers[1] !== undefined) {
              e.latlng.alt = 'current destination';

              localDispatch({
                type: 'updateMarkers',
                payload: {
                  marker: e.latlng
                }
              });
            }

            this.control.spliceWaypoints(1, 1, e.latlng);

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

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

Thanks in advance!

[perliedman]

Hi, from the description, it's not clear to me exactly how this is an issue with Leaflet Routing Machine. It sounds more like an issue with the click handler you adde,d, but perhaps I'm misunderstanding the problem?

Also, that is a lot of code. If there is an issue, can you please make a smaller example, without using React etc., to illustrate the problem?

[antonioOrtiz]

Hi there! Sorry about that! I figured having all the information would be better, but you're right that was a novel!

Anyway I have updated the question to only include the updateLeafletElement function. Thanks for any input!