Search code examples
javascriptangularmapsweb-frontendmapquest

How to add multiple routes using mapquest api, L.mapquest.directions().route()?

I have a requirement to plot multiple routes with different routeRibbon colors and one of the routes contains waypoints. I currently have this code, which is working fine, but every time a route is plotted, the map is refreshed and is flickering the UI. What's the best way to handle this scenario. Thanks in advance

for (let i = 1; i < shipment.length; i++) {
    const directions = L.mapquest.directions();
    this.setRouteLayer(directions, routeColor);
    directions.route({
      start: [shipment[i - 1].latitude, shipment[i - 1].longitude],
      end: [shipment[i].latitude, shipment[i].longitude],
      waypoints: waypointsArr,
    });
  }
Solution

  • Sorry for the delay, take a look at this example I made for you, I think it can help you,

    <html>
  <head>
    <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
    <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>

    <script type="text/javascript">
      window.onload = function() {
        L.mapquest.key = 'lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24';
        var coords = [
          [40.768469, -73.965561],
          [40.776224, -73.962194],
          [40.783750, -73.977886] 
        ];
        var getStyle = function (tA, cA, tB, cB) {
          return {
            startMarker: {
              icon: 'circle',
              iconOptions: {
                size: 'sm',
                primaryColor: cA,
                secondaryColor: cA,
                symbol: tA
              },
              title: 'Drag to change location'
            },
            endMarker: {
              icon: 'circle',
              iconOptions: {
                size: 'sm',
                primaryColor: cB,
                secondaryColor: cB,
                symbol: tB
              },
              title: 'Drag to change location'
            },
            routeRibbon: {
              color: "#2aa6ce",
              opacity: 1.0,
              showTraffic: false
            }
          };
        }
        var styles = [
          getStyle('A', '#aa0000', 'B', '#0000aa'),
          getStyle('B', '#0000aa', 'C', '#00aa00')
        ];
        var layers = [];
        const directions = L.mapquest.directions();
        for (let i = 1; i < coords.length; i++) {
          directions.route({
            start: coords[i-1],
            end: coords[i]
          }, createMap);
        }
        // create map
        function createMap(err, response) {
          if (!response) {
            return;
          }
          const l = L.mapquest.directionsLayer({
            ...styles[layers.length],
            directionsResponse: response
          });
          layers.push(l);
          if (layers.length === coords.length - 1) {
            var map = L.mapquest.map('map', {
              center: [40.776224, -73.962194],
              layers: L.mapquest.tileLayer('map'),
              zoom: 12
            });
            for(let i = 0; i < layers.length; i++) {
              map.addLayer(layers[i]);
            }
          }
        }
      }
    </script>
  </head>

  <body style="border: 0; margin: 0;">
    <div id="map" style="width: 100%; height: 530px;"></div>
  </body>
</html>