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

2
  • 1
    Could you include your code so far? Commented Mar 5, 2022 at 15:27
  • I only have the basic <MapContainer> and i only display a map without any routes or markers. Commented Mar 7, 2022 at 8:54

3 Answers 3

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

Sign up to request clarification or add additional context in comments.

1 Comment

I had to use .leaflet-control-container { display: none; }
1

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

2 Comments

Your answer could be improved with the help of supporting information, such as citations or documentation
I'm sorry, here's a page with some alternatives: github.com/perliedman/leaflet-routing-machine/issues/608 Specific answer from the creator: github.com/perliedman/leaflet-routing-machine/issues/… As a said before, defining " show = false " worked for me.
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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.