Getting Leaflet routing control result outside map in a div or table [closed]

Question

All of the examples of Leaflet routing control display the result (iterenary) inside the map area.

I want to display it outside in a div or table element. There is ItineraryBuilder in the API but no example on how to use it.

My code

routing = L.Routing.control({
        waypoints: [
            L.latLng(37.56569, 22.8),
            L.latLng(37.56569, 22.7)
        ],
        routeWhileDragging: true,
        itineraryFormatter: "test"
    }).addTo(map);

I want the iterenary to be displayed in textarea below Path Data

<div class="form-group">
    <label for="path-results">Path data</label>
    <textarea class="form-control form-control-sm test" readonly id="path-results" rows="8"></textarea>
</div>

Answer 1

There is no straightforward 'official' method to achieve this, but it can be done with a little bit of hacking.

L.Routing.control is extension of standard Leaflet L.control, which has .getContainer() method to retrieve HTML element containing control. With the help of DOM standard methods .removeChild() and .appendChild(), this control element can be then moved inside desired HTML element.

Code could then look something like this:

var routing = L.Routing.control({
  waypoints: [
    L.latLng(37.56569, 22.8),
    L.latLng(37.56569, 22.7)
  ],
  routeWhileDragging: true,
  itineraryFormatter: "test"
}).addTo(map);

var routingControlContainer = routing.getContainer();
var controlContainerParent = routingControlContainer.parentNode;
controlContainerParent.removeChild(routingControlContainer);
var itineraryDiv = document.getElementById('path-results');
itineraryDiv.appendChild(routingControlContainer);