CODEWITHSUNDEEP
javascriptroutesleaflet
nico
nico

Reputation: 105

How to add Leaflet Routing Machine control outside the map div

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 ?

Upvotes: 3

Views: 2209

Answers (2)

Kuzvac
Kuzvac

Reputation: 1

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

Upvotes: 0

muzaffar
muzaffar

Reputation: 1736

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

Upvotes: 2

Related Questions