reactjsroutesleafletreact-leafletleaflet-routing-machine

React leaflet display simple route

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. Like this

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. Like this

Solution

  • 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