0

I want to make a visual filter for the user. I already managed to hide the markers. The markers I hid through CSS. Now I need to hide the lines that connect the markers.

As I saw this autoRoute parameter, I thought of using it to achieve this goal

Through an on click function, I'm trying to change the autoRoute parameter of my L.Routing. control. Is it feasible to do that?

I need to change the autoRoute parameter on clicking a button for my route to disappear.

var mycontrol = L.Routing.control({
show: true,
geocoder: L.Control.Geocoder.nominatim(),
autoRoute: true,
waypoints: way_volta,
routeWhileDragging: true,
collapsible: true,
lineOptions: {
  styles: [{ color: "red", opacity: 1 }],
},
createMarker: function (i, wp, nWps) {
  return L.marker(wp.latLng, { draggable: true, icon: criandoNumeracao(i, way_volta)})
    .on("click", (event) => markerClicked(event))
    .on("dragend", (event) => markerDragEnd(event));
}}).addTo(map);

so I run this:

var stateFilterIda = L.easyButton({
states: [{
      title: 'Filtrar rota ida',
      icon:      'fa-long-arrow-right',               // and define its properties
      onClick: function() {       // and its callback
        mycontrol.getRouter().options.autoRoute = false;
        mycontrol.route();  
      }
  }]});
stateFilterIda.addTo(map);
4
  • You described what you want to do but not what you want to achieve. What exactly do you want to achieve with that? Please edit your question and describe desired app behavior.
    – TomazicM
    Commented Dec 6, 2022 at 10:01
  • @TomazicM Thank you for the tips. Was it better that way?
    – Douglas F
    Commented Dec 6, 2022 at 16:42
  • So you just want to hide/show route path, but itinerary stays displayed?
    – TomazicM
    Commented Dec 6, 2022 at 17:06
  • Yes, I need just that.
    – Douglas F
    Commented Dec 7, 2022 at 2:07

1 Answer 1

1

You can hide routing line by changing it's style to transparent and zero width, and you can hide markers by creating them on dedicated map pane and then hiding the whole pane.

Code could then look something like this:

var routingMarkersPane = map.createPane('routingMarkers');
routingMarkersPane.style.zIndex = 600;
var routingMarkersShadowPane = map.createPane('routingMarkersShadow');
routingMarkersShadowPane.style.zIndex = 500;

var defaultLineOptions = {
  styles: [{color: "red", opacity: 1}],
};

function routeHide(hideIt) {
  var markersDisplay, lineOptions;
  
  if (hideIt) {
    markersDisplay = 'none';
    lineOptions = {styles: [{color: "black", opacity: 0, weight: 0}]};
    }
  else {
    markersDisplay = '';
    lineOptions = defaultLineOptions;
  }
  myRouting.options.lineOptions = lineOptions;
  myRouting.route();
  routingMarkersPane.style.display = markersDisplay;
  routingMarkersShadowPane.style.display = markersDisplay;
}

var myRouting = L.Routing.control({
  show: true,
  geocoder: L.Control.Geocoder.nominatim(),
  autoRoute: true,
  waypoints: way_volta,
  routeWhileDragging: true,
  collapsible: true,
  lineOptions: defaultLineOptions,
  createMarker: function (i, wp, nWps) {
    var marker = L.marker(wp.latLng, {
      pane: 'routingMarkers',
      shadowPane: 'routingMarkersShadow'
      draggable: true,
      icon: criandoNumeracao(i, way_volta)
    });
    marker.on("click", (event) => markerClicked(event))
    marker.on("dragend", (event) => markerDragEnd(event));
    return marker;
  }
}).addTo(map);

var stateFilterIda = L.easyButton({
  states: [{
    title: 'Filtrar rota ida',
    icon: 'fa-long-arrow-right',
    onClick: function() {
      routeHide(true);  
    }
  }]
});
stateFilterIda.addTo(map);
1
  • Thank you very much. Worked perfectly. I don't even know how to thank you. It will help me a lot.
    – Douglas F
    Commented Dec 7, 2022 at 15:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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