Hi i have problem with multible routes using xml data, i cannot get it to work when i am parsing XML file using Jquery parsing. It only reads the first node.
My Html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
<link href="css/leaflet-routing-machine.css" rel="stylesheet" />
<link href="examples/index.css" rel="stylesheet" />
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<div id="output"></div>
<h2>Map</h2>
</div>
<div class="panel-body">
<div id="map" class="map"></div>
<script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
<script src="dist/leaflet-routing-machine.js"></script>
<script src="examples/Control.Geocoder.js"></script>
<script src="examples/config.js"></script>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: "DrivingPoints.xml",
dataType: "xml",
success: parseXml
});
});
function parseXml(xml) {
$(xml).find("point").each(function () {
Lat = $(this).find("lat").text()
Long = $(this).find("long").text()
var control = L.Routing.control(L.extend(window.lrmConfig, {
waypoints: [
L.latLng(Lat, Long),
L.latLng(56.260965, 10.057878)
],
geocoder: L.Control.Geocoder.nominatim(),
routeWhileDragging: true,
reverseWaypoints: true,
showAlternatives: true,
altLineOptions: {
styles: [
{ color: 'black', opacity: 0.15, weight: 9 },
{ color: 'white', opacity: 0.8, weight: 6 },
{ color: 'blue', opacity: 0.5, weight: 2 }
]
}
})).addTo(map);
$("#output").append("Name: " + Name + ": Lat:" + Lat + " Long:" + Long + "<br />");
});
}
var map = L.map('map');
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.Routing.errorControl(control).addTo(map);
</script>
My XML
="1.0"="utf-8"
<destinations>
<Trip number="11">
<point lat="56.238313" long="10.089360" name="Trip 1 start">
<color>blue</color>
<lat>56.238313</lat>
<long>10.089360</long>
<type>Start</type>
</point>
<point lat="56.260965" long="10.057878" name="Trip 1 Destination">
<color>blue</color>
<lat>56.260965</lat>
<long>10.057878</long>
<type>Destination</type>
</point>
</Trip>
<Trip number="38">
<point lat="56.238313" long="10.089360" name="Trip 2 start">
<color>blue</color>
<lat>56.238313</lat>
<long>10.089360</long>
<type>Start</type>
</point>
<point lat="56.260965" long="10.057878" name="Trip 2 Destination">
<color>blue</color>
<lat>56.260965</lat>
<long>10.057878</long>
<type>Destination</type>
</point>
</Trip>
</destinations>
What I have tried:
i have tryede to put it in an array first, but i am no expert of jquery.