leaflet-routing-machine | Control for routing in Leaflet | User Interface library

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.

The options are only used when initializing the routing control. Changing them afterwards does nothing, since the control uses its own waypoints internally.

You should be able to use the setWaypoints function like this

this doesn't have a summary. You will need to refer to e.routes, like e.routes[0].summary.totalDistance.

createMarker does not exist on RoutingControlOptions. Remove it from the object.

There is, however, a plan: Plan member, of which can be passed a PlanOptions to the constructor that does contain createMarker.

LineOptions must define extendToWaypoints and missingRouteTolerance. If you "don't want" them, set them to values that make sense - something like false for extendToWaypoints and 0 for missingRouteTolerance.

The JavaScript implementation likely ignores unknown and has sane defaults for undefined key-values in the options objects that you pass. However, the TypeScript definitions are more strict. There is also the chance that it is not definitely correctly typed.

You will notice that in the docs, createcontrolcomponent lists only one argument, which is a function to create the instance. You are expecting it to behave like createlayercomponent, which takes two arguments. In createlayercomponent, the second argument is a function to update the layer component when the props change. However, createcontrolcomponent offers no such functionality. react-leaflet is assuming, much like vanilla leaflet, that once your control is added to the map, you won't need to alter it directly.

This gets a bit confusing in terms of leaflet-routing-machine, because you don't need to change the instance of the control, but rather you need to call a method on it which affects the map presentation.

IMO, the best way to go is to use a state variable to keep track of whether or not your waypoints have changed, and use a ref to access the underlying leaflet instance of the routing machine, and call setWayPoints on that:

You're using createLayerComponent, but the routing machine is actually a control. Use createControlComponent.

I also recommend making this as a separate custom component, as described in the docs, rather than putting it in a useEffect. The docs are hard. Feel free to read How to extend TileLayer component in react-leaflet v3? to see if that helps in understanding how to make custom components with react-leaflet v3.

Here's how you'd do it:

I actually wound up solving it myself!

Think the head scratcher was while react-leaflet has its lifeCycle methods, i.e. createLeaflet, updateLeafletElement you should not forget the regular React life methods!

Not sure if they overlap, but I found adding componentDidMount:

Generally speaking, you need some way of integrating with your web app's build process if you want to get a list of hashed URLs for use within your service worker.

Given that you're using Next.js, a plugin like next-offline can help by doing two things:

• Integrating with your build process to get a list of your hashed URLs.
• Generating the entirety of your service worker for you, using workbox-precaching under the hood to ensure that your URLs are properly cached and kept up to date.

You can implement something similar yourself if you'd prefer not to use next-offline, but you'd need to use something like next-assets-manifest to obtain the list of hashed URLs, write your own service worker, and figure out how to inject those URLs into the service worker.

Answerd in the comments:

The Problem was that the listener was added multiple times, fixed with .once() instead of on().