Rendering Routes from JSON Data without OSRMv1

[beMimg]

Hello everyone, I hope you're having a great day!

I’m working with Leaflet Routing Machine and the OSRMv1 route, with the goal of optimizing HTTP requests to the OSRM server. To achieve this, I plan to embed OSRM data within the route data from the API, ensuring the frontend has all the necessary data and does not require a connection to the OSRM server. This approach will minimize duplicate requests and enable route rendering on the client side without further server interaction.

However, I’m facing challenges in transforming the OSRM response data into a format compatible with Leaflet Routing Machine. Here’s the current setup:

In the backend:

 routingControl.on('routeselected', function (e) {
      osrmDataToBeSent = JSON.stringify(e.route); // data sent to the client
    });

According to this issue: #195
I understand that the JSON data received in the frontend, specifically the coordinates and waypoints properties, aren’t deserialized into an array of LatLng objects which will require a data transformation. The setAlternatives method expects setAlternatives(<IRoute[]> alternatives). As you can see here.

Frontend

I retrieve the data from localStorage which was fetched before, parse it, and transform it into an IRoute format:

 let osrmDataRecieved = localStorage.getItem('osrmDataSaved');
    let osrmDataTransformed: L.Routing.IRoute[] = [];
    if (osrmDataRecieved) {
      const data = JSON.parse(osrmDataRecieved);

      osrmDataTransformed = [
        {
          name: data.name,
          summary: data.summary,
          coordinates: data.coordinates.map((coord: any) =>
            L.latLng(coord.lat, coord.lng)
          ),
          waypoints: data.inputWaypoints.map(
            (wp: any) => (wp.latLng = L.latLng([wp.latLng.lat, wp.latLng.lng]))
          ),
          instructions: data.instructions,
        },
      ];
    }

The resulting osrmDataTransformed looks like this (tried to make it smaller):

[
  {
    coordinates: [LatLng, LatLng, LatLng, ...],
    instructions: [{…}, {…}, {…}, ...],
    name: "Some name",
    summary: { totalDistance: 1305, totalTime: 942.4 },
    waypoints: [LatLng, LatLng, LatLng, ...]
  }
]

I want to create the routing using the data provided by my API, avoiding additional requests to the OSRM server. Here’s the routing control setup:

    this.routingControl = L.Routing.control({
      router: L.Routing.osrmv1({
        serviceUrl: 'http://54.74.147.254:5000/route/v1',
        profile: 'foot',
        language: 'es',
      }),
      waypoints: waypoints,
      addWaypoints: false,
      routeWhileDragging: false,
      lineOptions: {
        styles: [{ color: 'blue', weight: 5, opacity: 0.9 }],
      },
      summaryTemplate: customSummaryTemplate,
    } as any).addTo(this.map);

    this.routingControl.setAlternatives(osrmDataTransformed);
  }

Issues and Questions:

1. Is setAlternatives the correct method? If not, what should I use to display pre-calculated routes?

2. Error with setAlternatives: Despite transforming data as required, I encounter errors. How can I resolve this?
   

3. Using Offline Data: Even if setAlternatives works, removing the router option from L.Routing.control defaults to the OSRM demo server, requiring an internet connection. How can I use offline data that has already been processed by an OSRM server?

Any help would be greatly appreciated. Thank you in advance!

[curtisy1]

Hey @beMimg,
Apologies for the late reply, for some reason I didn't receive a notification for this issue. I'll have a look later and get back to you asap.

[curtisy1]

1. Yes, setAlternatives is still the way to go. It should be able to display the cached routes on a map without any requests
2. I think you're missing the waypointIndices or the inputWaypoints in your sample. One of those is needed to construct a PolyLine. If you cache those too (preferably the waypointIndices as they are smaller), it should work
3. Unfortunately, the only option I can see is implementing your custom router that has a cache in the middle between backend/OSRM and frontend. You can do this by extending the base OSRM implementation