Leaflet Routing Machine: How to add my own data between starting and end point in a route

[antonioOrtiz]

Sorry to ask this as it's a question.

In the docs under IRoute (describes a route through a number of waypoints), there is a property called coordinates

array of L.LatLngs that can be used to visualize the route; the level of detail should be high, since Leaflet will simplify the line appropriately when it is displayed

I have a starting and end point:

  const instance = L.Routing.control({
    waypoints: [
      L.latLng(
        startingPoints[0]?.highestEl?.latlng?.lat,
        startingPoints[0]?.highestEl?.latlng?.lng),
      L.latLng(
        startingPoints[0]?.lowestEl?.latlng?.lat,
        startingPoints[0]?.lowestEl?.latlng?.lng
      ),
    ],
  });

What I would like to do is:

coordinates	: [start, L.latLng(), L.latLng(), L.latLng(), L.latLng(), L.latLng(), L.latLng(), end]

So how do I add custom Latitude and Longitude between the starting and end waypoints?

Is that indeed what coordinates is for? If so how do you access it?

Thank you in advance!

[curtisy1]

Sorry to ask this as it's a question.

No worries! We have a question tag specifically for this. I still need to integrate checking StackOverflow for lrm tags regularly into my routine, so for now it's actually better to ask here for visibility.

You could change the coordinates directly, however, it's probably best to interact directly on the waypoints, since this would also update the instructions. You can do that by either using spliceWaypoints as shown in the example here or using setWaypoints directly

const start = L.latLng(
        startingPoints[0]?.highestEl?.latlng?.lat,
        startingPoints[0]?.highestEl?.latlng?.lng);
const end =  L.latLng(
        startingPoints[0]?.lowestEl?.latlng?.lat,
        startingPoints[0]?.lowestEl?.latlng?.lng
      );
const middle =  L.latLng(
        startingPoints[0]?.middleEl?.latlng?.lat,
        startingPoints[0]?.middleEl?.latlng?.lng
      );
const instance = L.Routing.control({
    waypoints: [
     start,
      end,
    ],
  });

instance.setWaypoints([start, middle, end]);