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