React leaflet display simple route

Question

I want to display a route between 2 or more coordinates. I don't want any fancy direction instructions or start and end markers. So basically something like a <Polyline /> that goes along roads. I know there is a leaflet-routing-machine, but I wasn't able to make it work using React and Typescript.

What is the best way to do that?

---

Edit: I have tried this but I don't know how to edit the L.Routing.Itinerary properties which I need to edit to disable the directions instructions and the Marker style.

Answer 1

You need to add two things to achieve that behavior:

1.According to the maintainer add this to make routing panel dissapear on styles.css.

.leaflet-control-container .leaflet-routing-container-hide {
     display: none;
}

2.Add this to make markers dissapear when you create the routing control instance

createMarker: function () {
      return null;
}

Demo

Answer 2

to disable the directions just set show = false in the control options.

Answer 3

I was able to implement this one in react typescript (show:false to disable table, and for marker : createMarker: function () { return null; } ),

the issue im facing is the number of waypoints, it works for a certain number of points, after which the route disappears. and also the map freezes on large number of waypoints