0

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

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Specht
  • 50
  • 10

3 Answers3

2

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

kboul
  • 13,836
  • 5
  • 42
  • 53
1

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

Carlos Corgozinho
  • 11
  • 1
  • Your answer could be improved with the help of supporting information, such as citations or documentation – Harrison Jul 04 '23 at 12:03
  • I'm sorry, here's a page with some alternatives: https://github.com/perliedman/leaflet-routing-machine/issues/608 Specific answer from the creator: https://github.com/perliedman/leaflet-routing-machine/issues/20#issuecomment-51523806 As a said before, defining " show = false " worked for me. – Carlos Corgozinho Aug 02 '23 at 23:38
0

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

memedemon
  • 1