Route on a map. Navigate. JavaScript

To set a route through the Map component, we can use the Navigate control.

You can see a great tutorial by @Steve with the Navigate control here:

More examples:

Now we are going to set a route using only JavaScript code.

We establish a point of Origin, intermediate and Destination.

  • We can establish more intermediate points.
  • It only works for cars, I tried to put a profile:foot but it didn't work.
  • You can drag the marks.

pNavigate_Html.aia (2.6 KB)

You can try it here:

1 Like
<!DOCTYPE html>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="" />
    #map {
      width: 100%;
      height: 100%;

    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
  <div id="map"></div>

  <script src=""></script>
  <script src=""></script>
    // Inicializa el mapa en el contenedor 'map'
    var map ='map').setView([40.414753, -3.692792], 13);

    // Agrega una capa de mapa (por ejemplo, OpenStreetMap)
    L.tileLayer('https://{s}{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors',
      maxZoom: 18,

    // Agrega las coordenadas de origen, destino y puntos intermedios en una lista
    var coordenadas = [
      [40.414753, -3.692792],
      [40.413580, -3.707534],
      [40.417478, -3.714306]

    // Agrega el origen y el destino al array de waypoints
    var waypoints = [
      L.latLng(coordenadas[0][0], coordenadas[0][1]), // origen
      L.latLng(coordenadas[coordenadas.length - 1][0], coordenadas[coordenadas.length - 1][1]) // destino

    // Agrega los puntos intermedios al array de waypoints
    for (var i = 1; i < coordenadas.length - 1; i++) {
      waypoints.splice(i, 0, L.latLng(coordenadas[i][0], coordenadas[i][1]));

    // Agrega la capa de ruta con origen, destino y puntos intermedios
    var routeControl = L.Routing.control({
      waypoints: waypoints,
      routeWhileDragging: true,
     //  profile: 'foot',

    // Ocultar el panel de direcciones y longitud después de cargar la capa de ruta
    routeControl.on('routesfound', function(e) {
      setTimeout(function() {
        document.querySelector('.leaflet-routing-container').style.display = 'none';
      }, 6000); // Time show panel directions, change to 100

This is very strange, this morning it was working in all countries, now it only works in North-Central America, South America, and Australia, it doesn't work in Europe or most of Asia. Drag the markers to North America.

In any case, the recommended routes are not recommended :upside_down_face:

Now it works, it seems that sometimes it doesn't work because of server problems.

Try: (only route with car)

1 Like

How can I make it so that after having defined the route, the total km can be sent to another component that calculates the cost of km :C?

You would need to modify the javascript. The existing code does not capture distance between waypoints on your route.

You can do something similar using the Navigate component
HOW TO: Use the Navigate control :wink: where you can calculate total route distance by adapting the code. You could alternatively use the Google Distance Matrix api .

Also Navigate control. Examples. DecoJson extension

1 Like

Thank you :grinning: