"Show: false" not hiding itinerary

[Jadamae77]

I have looked and looked through the other issues and tried multiple things and I cannot get the itinerary instructions hidden. I have tried setting show to false in the options, calling .hide() on the control (the leaflet-routing-container-hide class is added to the div but the styles don't change) and I have also tried adding CSS to hide the div, but my style properties don't even show up in the browser devtools. The itinerary is always displayed. Any help would be appreciated.

TS

  setRoute(coordinates: Coordinates[]) {
    const waypoints: L.LatLng[] = [];
    coordinates.forEach((coords) => {
      waypoints.push(L.latLng(coords.lat, coords.lng));
    });
    const route = L.Routing.control({
      waypoints,
      plan: L.Routing.plan(waypoints, {
        createMarker: (i, waypoint, n) => {
          return L.marker(waypoint.latLng, {
            icon: this.icon,
          });
        },
      }),
      routeWhileDragging: true,
      router: new L.Routing.OSRMv1({ serviceUrl: mapConfigs.osrmUrl }),
      show: false,
    });
    route.addTo(this.map);
    // route.hide();
  }

CSS tried

 div.leaflet-routing-alternatives-container {
  display: none !important;
} 

.leaflet-routing-container {
  display: none;
} 

[laurokirsch]

Hi, @Jadamae77! I have faced the same issue by trying to use show: false without success.

However, I managed to hide the itinerary using CSS:

.leaflet-control-container .leaflet-routing-container-hide {
  display: none;
}

Hope it helps!

[Jadamae77]

@laurokirsch thanks!

For anyone else having the same issue, this works as well.

div.leaflet-top.leaflet-right{ display: none !important; width: 0px !important; height: 0px !important; }

[tikky]

This works for me, however this is a js way not css:

First - you need a variable to store control, in my example: var control = L.Routing.control({ ... })

then you can hide panel using: control.hide();

or later show again: control.show();

or delete whole routing: map.removeControl(control);

assuming map is your map, and control is your control variable.

Please taka a look at my live example: https://jsfiddle.net/b81vu029/2/

Hope that helps / works for you.