0

I have a list of address that get geocoded. I want to then take those new lat/lon values and set them as waypoints in Leaflet routing machine so that an long route is generated. I have tried a loop which works, but it only does 2 points and then adds them to the map. The result is a lot of little routes on one map and not connected at all. I cannot see a way to add dynamically add all waypoints in and then add the route to the map. Is this even possible with Routing Machine?? Here is what I have tried:

HazardPoints is an array of lat/long values that I have cleaned up. I increment the loop by 6 each iteration (index 0 = first latitude value, index 1 = first longitude value, index 2 = hazard present[not used for this]) and then (index 3 = second latitude value, index 4 = second longitude value).. then loop jumps to the next set.

            function buildRoute(){
                var hazardPoints = finalPoints.toString().replace(/\n/g, ",").split(",");
                for(var i = 0; i < hazardPoints.length; i+=6){
                        L.Routing.control({waypoints: [L.latLng(hazardPoints[i], hazardPoints[i + 1]),L.latLng(hazardPoints[i+3], hazardPoints[i+4])],
                        routeWhileDragging: true}).addTo(map);
                }
                closeSideBar();
                    }
1

For anyone looking for a solution, I have come up with this hacky way. It works, but it's not ideal. var extractedPoints is just pulling latitude longitude form my hazardPoints variable. If you have a list already of just latitude and longitude coordinates, you can ignore the entire first loop.

Get latitude Longitude:

            function buildRoute(){
                var extractedPoints = [];
                var hazardPoints = finalPoints.toString().replace(/\n/g, ",").split(",");
                for(var i=0;i<hazardPoints.length; i+=3){
                    extractedPoints.push(parseFloat(hazardPoints[i]));
                    extractedPoints.push(parseFloat(hazardPoints[i+1]));
                    console.log(extractedPoints); 
                }

Set the first point of the next coordinate pair as the last point of the first. You are basically chaining them together over each loop iteration. It's hacky, but it allows you to put in and route an entire list of coordinates at once.

                for(var j = 1; j < extractedPoints.length; j+=2){
                    L.Routing.control({
                    waypoints: [L.latLng(extractedPoints[j-1], extractedPoints[j]),L.latLng(extractedPoints[j+1], extractedPoints[j+2])],show: false, createMarker: function() { return null; }}).addTo(map);  
                    console.log(extractedPoints[j-1], extractedPoints[j]),L.latLng(extractedPoints[j+1], extractedPoints[j+2]);
                }
                map.setZoom(14);
                    }

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.