use three different colors to show the routes

[littlTom]

I want to use three different colors to show the routes. I want to set three buttons and when I click each button it would show different colors .

[littlTom]

However, an error occurred.

[curtisy1]

Hi there, from the screenshots I can't really tell what the problem is or where you're trying to initialize LRM. If possible, could you provide a test case or a code sample I can use to get a better understanding of what you're trying to do?

From a quick glance, it might be possible that you need to pass a line object to your extended LayerControl. After all, the LayerControl needs a layer it can work on

[littlTom]

Thanks for replying me. I've made some changes in the official leaflet routing machine.js. I commented out the codes that displayed the color, and then put the codes in the button's callback function. I wanted to select "module.exports" by clicking the button, but the above problem occurred.

[curtisy1]

Okay, I think we're slowly getting there. So basically, you took the line.js and copied all of it into the click callback, correct?

If so, this doesn't work because the Line is at least required by the routeLine option on the Control.

So, for this to work in the minimum possible way, you either need to tell the routeLine function to not call Line.initialize (which is what the constructor does in Leaflet) or modify the code you commented out in a way that the module.exports and the initialize function still exist. These are the two you'll probably need for a start

[clpacheco90]

Hi, maybe you want to do something like that:

      let routingConfig = {
        waypoints: [
          L.latLng(coord.lat, coord.lng),
          L.latLng(-30.041458, -51.228905)
        ],
        addWaypoints: false,
        language: 'pt-BR',
        routeWhileDragging: true,
        reverseWaypoints: true,
        showAlternatives: true,
        altLineOptions: {
          styles: [
            { color: '#fff', opacity: 0.8, weight: 6 },
            { color: '#000', opacity: 1, weight: 2 }
          ]
        },
        lineOptions: {
          styles:
            [
              { color: '#fff', opacity: 0.8, weight: 8 },
              { color: '#0085f9', opacity: 1, weight: 4 }
            ]
        },
        createMarker: function(i, wp) {
          return null;
          let htmlIcon = [
            '<div>',
            '<i class="fas fa-map-marker fa-4x"></i>',
            '<div class="marker-conteiner-count">',
            '<i class="fas fa-route"></i>',
            '</div>',
            '</div>',
          ].join('');

          var myIcon = {
            iconSize: [36, 48],
            iconAnchor: [18, 48],
            html: htmlIcon,
            className: 'marker-default leaflet-interactive'
          };
          return new L.Marker(wp.latLng, { icon: new L.DivIcon(myIcon) }); //This was tough!
        },
        formatter: new L.Routing.Formatter({
          units: 'metric',
          unitNames: null,
          language: 'pt-BR',
          roundingSensitivity: 1,
          distanceTemplate: '{value} {unit}'
        }),
        routeLine: (route) => {
          let options = {
            addWaypoints: false
          }

          if (route.routesIndex == 0) {
            options.styles = [
              { color: '#fff', opacity: 0.8, weight: 8 },
              { color: '#0085f9', opacity: 1, weight: 4 }
            ]
          }
          if (route.routesIndex == 1) {
            options.styles = [
              { color: '#fff', opacity: 0.8, weight: 6 },
              { color: '#000', opacity: 1, weight: 2 }
            ]
          }

          var line = L.Routing.line(route, options);
          line.on('linetouched', (e) => {
            console.log(e);
          });
          return line;
        },
        // itineraryBuilder,
      }

      route.control = L.Routing.control(routingConfig).addTo(map);

[littlTom]

Thanks a lot!