Set up custom instructions

[GeorgeCodeHub]

Hi there,

I want to set up the instructions of the route to only have the markers inside and some of the directions. I tried using createStep but it seems to not affect the list at all.

In addition, I want to add custom icons for each instruction. Is that possible?

I tried the following set ups:

const instance = L.Routing.control({
		waypoints: [L.latLng(38.07836562996712, 23.69164002388398), L.latLng(38.074311140919, 23.72343893801726), L.latLng(38.054311140919, 23.752343893801726)],
		lineOptions: {
			styles: [
				{
					color: "blue",
					opacity: 0.6,
					weight: 4
				}
			]
		},
		routeWhileDragging: false,
		draggableWaypoints: false,
		addWaypoints: false,
		collapsible: true,
                createStep: () => <tr>Test</tr>
	});

Another approach:

instance._itineraryBuilder.options = {
		createStep: <tr>Test</tr>
	};

Sadly both had no effect. Am I doing something wrong?

[curtisy1]

First off, your portfolio is amazing!

createStep is definitely the correct way to go about this. The only error in your approach is that it's not an option but a standalone function on an ItineraryBuilder instance. As such

instance._itineraryBuilder.creatStep = () => {
		// your code here
	};

Should work. Here's a small fiddle you can use. It basically uses a stripped down version of the refactored code from the typescript branch. Adding custom icons would also be possible in that way