Multiple routes with XML data

[MartinLauritsen]

Hi i have this problem, i am trying to create multiple routes base on node(Trip) in my xml file, i can get the Map to show my route, but it is not splittin it up in two rutes.

It takes All my coordinates, and create one long Rute.

My Jquery Code

function parseXml(xml) {

        var map = L.map('map');

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var waypoints = [];

            $(xml).find("Trip").each(function () {
                $(xml).find("point").each(function () {

                    var lat = $(this).find("lat").text();
                    var lng = $(this).find("long").text();

                    waypoints.push(L.latLng(lat, lng));

                    L.Routing.control({
                        plan: L.Routing.plan(waypoints, {

                            geocoder: L.Control.Geocoder.nominatim(),
                            draggableWaypoints: false
                        }),
                        addWaypoints: false,
                        useZoomParameter: false,
                        lineOptions: {
                            styles: [{ color: "lightgreen", opacity: 1, weight: 5 }]
                        }
                    }).addTo(map)
                });

            });

        }

 L.Routing.errorControl(control).addTo(map);

[perliedman]

You create the control inside the loop (the call to each), which actually creates multiple routing controls on the same map, each with different sets of waypoints. That's most likely the issue.

Move it outside the actual XML parsing:

            $(xml).find("Trip").each(function () {
                $(xml).find("point").each(function () {

                    var lat = $(this).find("lat").text();
                    var lng = $(this).find("long").text();

                    waypoints.push(L.latLng(lat, lng));

                });

            });
            L.Routing.control({
                plan: L.Routing.plan(waypoints, {
                    geocoder: L.Control.Geocoder.nominatim(),
                    draggableWaypoints: false
                }),
                addWaypoints: false,
                useZoomParameter: false,
                lineOptions: {
                    styles: [{ color: "lightgreen", opacity: 1, weight: 5 }]
                }
            }).addTo(map)

[martinl86]

Nope it stille creates one long route instead of splitting it up into two routes, that i has in my xml file.

function parseXml(xml) {

        var map = L.map('map');

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var waypoints = [];

            $(xml).find("point").each(function () {

                var lat = $(this).find("lat").text();
                var lng = $(this).find("long").text();

                waypoints.push(L.latLng(lat, lng));
            });

        L.Routing.control({
            plan: L.Routing.plan(waypoints, {
                geocoder: L.Control.Geocoder.nominatim(),
                draggableWaypoints: false
            }),
            addWaypoints: false,
            useZoomParameter: false,
            lineOptions: {
                styles: [{ color: "lightgreen", opacity: 1, weight: 5 }]
            }
        }).addTo(map)
    }

    L.Routing.errorControl(control).addTo(map);

[perliedman]

Ok, misread your issue. Yes, that is how it works. If you pass multiple waypoints, it will create one long route, visiting all the waypoints in the specified order.

[martinl86]

Okay thx, but is there anyway i can split it up?, so it creates multiple routes instead of one route ?

[perliedman]

No support built into the control, but you can do this with a bit of work if you use the components in Leaflet Routing Machine.

You can use the class L.Routing.OSRMv1 to get the route data from an array of waypoints. Call its route method to make it calculate a route. You can then display the route on the map using the class L.Routing.Line - it works like any Leaflet layer.

This way you calculate and visualize any number of routes on the map, but you will not get the interactive parts where you can edit a route's waypoints, etc.

[martinl86]

Ok thx ;)