0

I am adding route to the map and I want to hide instruction (turn left, turn right etc.) but I want to show them later. As I can see there is parameter show for that. If I set show: false I see white squares instead of istructions which is ok, the problem is that I can't show instructions then by clicking on that squares, no interaction with them at all.

L.Routing.control({
  waypoints: [
    L.latLng(54.736985, 55.980878),
    L.latLng(54.732798, 55.969934),
  ],
  show: false,
}).addTo(map)

There is nothing wrong here I guess. What can it be then?

  • could you create a minimal working example with your code so we can help you in a better way? – Riccardo May 27 at 19:02
0

Leaflet Routing Machine plugin has no built in method to toggle itinerary display.

One very elementary solution would be to add transparent div element with absolute postion on the top of L.Routing.control container and attach onclick event function to it. This function then toggles itinerary display:

<style>
  .legendClickArea {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 27px;
    width: 100%;
    z-index: 1000;
  }
</style>

<script>
  var map = L.map('map');

  L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
  }).addTo(map);

  var wayPoint1 = L.latLng(57.74, 11.94);
  var wayPoint2 = L.latLng(57.6792, 11.949);

  var bounds = L.latLngBounds(wayPoint1, wayPoint2); 

  var myRouting = L.Routing.control({
      waypoints: [wayPoint1, wayPoint2],
      routeWhileDragging: true,
      show: false
  });

  myRouting.addTo(map);

  var itineraryShown = false;

  var controlContainer = myRouting.getContainer();
  var legendClickArea = document.createElement("DIV");

  legendClickArea.classList.add('legendClickArea');
  controlContainer.appendChild(legendClickArea);

  legendClickArea.onclick = function() {
    if (itineraryShown)
      myRouting.hide();
    else {
      myRouting.show();
    }
    itineraryShown = !itineraryShown;
  };      
</script>

This div element can then be embellished with various bells and whistless.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.