How to add Leaflet Routing Machine control outside

问题:

Leaflet routing machine container div is displayed on the map by default and I want to put this div below the map. Any clue to do this ?

回答1:

So, you need to add a leaflet control outside the map div. Here is a solution to it.

• Create a Div where you want to add your control and position it on page where ever you want

• Initiate your control and add it in a variable, like in this case I did

  var control = L.Routing.control({
    waypoints: [
      L.latLng(57.74, 11.94),
      L.latLng(57.6792, 11.949)
    ]
  });
  

• Add your control to map like below

  control._map = map;
  var controlDiv = control.onAdd(map);
  

• Finally add your control to initially defined html div

  document.getElementById('controls').appendChild(controlDiv);
  

Here is a working fiddle

回答2:

I modified muzaffar solution, now it working much better. Thank you muzaffar!

var control = L.Routing.control({
    waypoints: [
        L.latLng(32.78186, -96.76612),
        L.latLng(32.77602, -96.80766)
    ],
    geocoder: L.Control.Geocoder.nominatim(),
    routeWhileDragging: true,
    reverseWaypoints: true,
    fitSelectedRoutes: true
});

var routeBlock = control.onAdd(map);    
document.getElementById('controls').appendChild(routeBlock);

Here if a fiddle