Hide itinerary instructions

[shroux]

Hi,

I'm currently trying to put a route map on my website. I want to display the road, but not the text instructions without modifying the CSS (like display; none on .leaflet-routing-alt).

Is there a solution for doing that ? I've searched but I didn't manage to find a solution.

Thanks !

[perliedman]

Unfortunatly, the answer is no at the moment, no such function. However, there's already issue #19 that addresses this.

I hope to get around to fixing it in the not too far future. Any help is of course appreciated.

Closing this as duplicate of #19.

[perliedman]

Hi, in case you still need this, I added the functionality now with the methods hide() and show(), also settable from the option show, which defaults to true: b80136d

[shroux]

Great ! Thanks man, keep up this amazing work !

[DiegoJohan]

Hello, I need quit the text instructions, but, when I use hide(), it only minimize in a little square, I think this function should be called minimize(), and hide() function should quit (not be visible) the text instructions.
Excuse my English please.

[perliedman]

Hi @DiegoJohan, I think you're right. I'll consider renaming in a future version.

In the meantime, you can work around this by adding this CSS rule:

.leaflet-control-container .leaflet-routing-container-hide {
    display: none;
}

[DiegoJohan]

Hi, thanks for response, that's exactly what I did. greetings

DIEGO JOHAN DELGADO HUERTAS
Ingeniero de Sistemas

2015-08-21 1:26 GMT-05:00 Per Liedman notifications@github.com:

Hi @DiegoJohan https://github.com/DiegoJohan, I think you're right.
I'll consider renaming in a future version.

In the meantime, you can work around this by adding this CSS rule:

.leaflet-control-container .leaflet-routing-container-hide {
display: none
}

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[yantakus]

@perliedman could you please show an example of how to use hide() and show() functions? I can't get it working like this: L.Routing.Itinerary.hide().

[perliedman]

@web2style hi!

The hide and show methods are so called instance methods, meaning you will need an instance of the L.Routing.Itinerary class to call it. You can't call it directly on L.Routing.Itinerary, since there might be more than one instance.

Typically, you have an instance of L.Routing.Control, that extends the itinerary class, and call hide and show on it:

var control = L.Routing.control(...);

control.hide();
control.show();

Hope this helps!

[yantakus]

@perliedman Yes, it did. Thanks a lot!

[yantakus]

@perliedman it doesn't throw an error, but it doesn't take any effect either. For example control.spliceWaypoints(0, 2) removes waypoints, but control.hide() does nothing. What could it be? I need remove waypoints and itinerary when a user closes routing and should see plain leaflet map.

[perliedman]

Check this example to see how it's supposed to work: http://playground-leaflet.rhcloud.com/guh/edit?html,output

As mentioned in another issue you posted in, you can also use the Leaflet map's removeControl method if you need to remove the control from the map altogether.

[yantakus]

@perliedman Thanks for this. Could you please show an example of how to use removeControl? Leaflet documentation has no examples at all.

[perliedman]

@web2style sure, just call:

map.removeControl(routingControl);

http://playground-leaflet.rhcloud.com/zuj/edit?html,output

[yantakus]

@perliedman Thank you!

[yuchenglin]

Hi @perliedman Will the feature about distinguishing minimize() and hide() be planned to add? This is useful for my project, too. Thanks!

[perliedman]

@yuchenglin I've added it to the 4.0 wish list, but since I'm not actively working on LRM for the moment, the release date might be pretty far into the future.

[yuchenglin]

@perliedman Thank you! Look forward to the release.

[sylvainar]

Hey!

Is it possible to set a title for the button when the cart is hidden? Thanks!

[perliedman]

@sylvainar I guess this is possible by overriding the css for .leaflet-routing-icon in a suitable fashion, but it's not something I've tried myself.

[JiyingWen]

@perliedman I am trying to use the routing plugin in Shiny, and hide the itineray text but show the route. The control.hide() doesn't work in my case, and the removeControl works (but there's no route on the map). Could you show me how to hide the itineray but keep the route?

[perliedman]

@JiyingWen when you say "control.hide doesn't work in my case", could you specify in what way it doesn't work?

As mentioned in the discussion above, the method name hide is not perfect, it's more "minimize", since it will collapse the itinerary into a small button. If you want to hide the itinerary completely when hide is called, you can do this by adding a new CSS rule:

.leaflet-control-container .leaflet-routing-container-hide {
    display: none;
}

[JiyingWen]

Hi @perliedman, Thanks a lot for your reply! I'm trying to use leaflet-routing-machine plugin in Shiny, a few days it works and I was working on hiding(or remove) the itinerary text from the map. control.hide worked in Rstudio, but didn't work when wrapped into Shiny. Then I tried your suggestion by adding the new CSS rule, it worked perfect yesterday.

However, I ran the same code today, the route it not showing...but the waypoints are still there

Here's the my code

library(rCharts)
library(shiny) 
library(shinyjs)

runApp(list(
  ui = pageWithSidebar(
    headerPanel("Title"),
    sidebarPanel("MyApp" ),
    mainPanel(
      tabsetPanel(
        tabPanel("Interactive Map", 
                 chartOutput("baseMap", 'leaflet'),
                 tags$head(tags$style("http://www.liedman.net/leaflet-routing-machine/dist/leaflet-routing-machine.css")),
                 tags$head(tags$script(src="http://www.liedman.net/leaflet-routing-machine/dist/leaflet-routing-machine.min.js")),
                 uiOutput("routeMap"),
                 shinyjs::inlineCSS("
                                    .leaflet-control-container .leaflet-routing-container-hide {
                                    display: none;
                                    }
                                    "))
      )
    )
  ),

  server = function(input, output){

    output$baseMap <- renderMap({
      baseMap = Leaflet$new()
      baseMap$setView(c(50.5, 30.51), 13)
      baseMap$tileLayer(provider = 'Stamen.TonerLite')
      baseMap$set(width = 800, height = 800)
      baseMap
    })

    output$routeMap <- renderUI({

      #mywaypoints = list(c(40.74119, -73.9925), c(40.73573, -73.99302))
      tags$body(tags$script(HTML(sprintf(
        "var routingControl = new L.Routing.control({
      waypoints: [[50.48, 30.51], [50.52, 30.51]]
    }).addTo(map);
        "))))
  })
  }
      ))

[perliedman]

@JiyingWen hm, sorry, I'm not fluent in R / Shiny, so I have a hard time understanding exactly what's going on here.

My first thing to check is that you actually get a reply from the routing server. It looks like you're using OSRM's demo server (the default in Leaflet Routing Machine), and it has hiccups every now and then (it's free, so it comes without guarantees). Typically you would see some HTTP error in a debug console or similar.

Otherwise, as far as I can tell the JavaScript parts above look like they should work.

[JiyingWen]

@perliedman Thanks a lot for your help! Now I can confirm it should be the server problem, as it works again today! :)

[perliedman]

@JiyingWen good to hear. Depending on your use case, you might want to consider setting up your own OSRM server to get more reliability, or use a service provider. For example Mapbox's directions API uses OSRM, and is compatible with Leaflet Routing Machine.

[byrnedo]

Hi @perliedman,
I've tried setting show to false and tried calling hide() immediately after creating the control but can't figure out how to just show the route/waypoints but not the instructions?

Edit: and more specifically, is there a way to not even request the intructions from the osrm server?

[perliedman]

@byrnedo to hide completely, follow the suggestions with CSS rules posted above.

You can exclude instructions from OSRM, but there's no option to control this behavior from LRM's side at the moment.

[byrnedo]

Missed that the css part was necessary. Worked like a charm. Ok, good to know.

[elangabdulazis]

hi
I want to ask if there is a distance calculation using a leaflet?
because I need distance data from latitude 1,2,3 to finish
how to get all the distances from point 1 to point 2 to the destination

[CodingReaper1]

this is probably stupid but im coding in react and i dont know how to apply thos css rules to disable instructions or where to apply im confused

[curtisy1]

Please don't comment into issues that are already closed @CodingReaper1. Chances are people won't read them and you won't get a reply. This was already answered here. How you import your CSS depends on your bundler of choice. React mostly uses webpack as far as I know, so your best bet would be to add a loader for CSS like css-loader or style-loader

[SamNag]

iam using show: false, but it is still there, can some help. also custom css is not working.

<script>
import L from "leaflet";
import "leaflet-routing-machine";

export default {
  name: "MapComponent",
  emits: ["toggleMap"],
  props: {
    toggleMap: Function,
  },
  data() {
    return {
      map: null,
      routeControl: null,
      startPoint: [48.1482, 17.1067], // Bratislava
      endPoint: [48.7167, 21.2611], // Košice
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    closeMap() {
      if (typeof this.toggleMap === "function") {
        this.toggleMap();
      }
    },
    initMap() {
      this.map = L.map("map").setView(this.startPoint, 5);
      // Add a tile layer
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        maxZoom: 19,
      }).addTo(this.map);

      this.addRoutingMachine();
      this.addDivMarkers();
      this.routeControl.hide();
    },
    addRoutingMachine() {
      this.routeControl = L.Routing.control({
        waypoints: [L.latLng(this.startPoint), L.latLng(this.endPoint)],
        draggableWaypoints: false,
        routeWhileDragging: false,
        show: false,

        createMarker: () => null,
        lineOptions: {
          styles: [
            { color: "#6366f1", weight: 5, opacity: 0.8 },
            { color: "#FFFFFF", weight: 1, opacity: 0.5 },
          ],
        },
      }).addTo(this.map);
      // Listen for route calculation and add car marker
      this.routeControl.on("routesfound", this.addCarMarker);
    },
    addDivMarkers() {
      const startIcon = L.divIcon({
        className: "custom-div-marker",
        html: `<div class="w-3 h-3 bg-indigo-500 rounded-full"></div>`,
      });

      const endIcon = L.divIcon({
        className: "custom-div-marker",
        html: `<div class="w-3 h-3 bg-indigo-500 rounded-full animate-pulse"></div>`,
      });

      L.marker(this.startPoint, { icon: startIcon }).addTo(this.map);
      L.marker(this.endPoint, { icon: endIcon }).addTo(this.map);
    },
    addCarMarker(event) {
      const route = event.routes[0];
      const routeLatLngs = route.coordinates;

      // Select a random point along the route
      const randomIndex = Math.floor(Math.random() * routeLatLngs.length);
      const randomLatLng = routeLatLngs[randomIndex];

      // Create an animated car marker
      const carIcon = L.divIcon({
        className: "custom-div-marker",
        html: `
          <div>
            <div
              class="absolute w-4 h-4 bg-indigo-500 rounded-full animate-ping"
              title="Car Position (Pulsing)"
              style="top: -4px; left: -4px"
            ></div>
            <div class="w-2 h-2 bg-indigo-700 rounded-full" title="Car Position"></div>
          </div>
        `,
        iconSize: [50, 20],
        iconAnchor: [25, 10],
      });

      // Add the car marker to the map
      L.marker(randomLatLng, { icon: carIcon }).addTo(this.map);
    },
  },
};
</script>

[curtisy1]

Please don't comment into issues that are already closed @SamNag. Chances are people won't read them and you won't get a reply. This was already answered #20 (comment). If the solution laid out there doesn't work, we would need more details such as

1. What does your CSS to hide the itinerary look like?
2. What do you mean by custom CSS isn't working? Does this relate to the div icons or is it the same as 1.? From the screenshot and the code, it looks like the styles for the icons work fine