I want to do routing from a point to another the points are listed in legend control .the data retrieved from listbox does not work with routine machine may be because of type compatibility.
var mymap=L.map('map',{attributionControl: false,center : [33.37,6.84],zoom: 12,minZoom:7,maxZoom: 17,zoomControl:false});
var GRaster = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{subdomains:['mt0','mt1','mt2','mt3']}).addTo(mymap);
function Itineraire(){
var x = document.getElementById("Origin").selectedIndex;
var y = document.getElementById("Origin").options;
var x1 = document.getElementById("Destination").selectedIndex;
var y1 = document.getElementById("Destination").options;
//clear route
Routing.getPlan().setWaypoints([]);
//retrieve data
var point1=y[x].value;
var point2=y1[x1].value;
alert('Routing :'+"pt1: "+y[x].value+" pt2: "+y1[x1].value);
Routing.getPlan().setWaypoints([
L.latLng(point1),
L.latLng(point2)
]);
}
var Routing =L.Routing.control({
waypoints: [
L.latLng(33.357464,6.864267),
L.latLng(33.374304,6.871693)
],
routeWhileDragging: true
});
Routing.addTo(mymap);
Routing.getPlan().setWaypoints([]);
var legendbox = L.control({
position: 'topleft'
});
legendbox.onAdd = function (e) {
var div = L.DomUtil.create('div', 'info legend');
div.innerHTML = '<select id=Origin><option value=33.374304,6.871693>Zone1</option><option value=33.367979,6.837744>Zone2</option><option value=33.372684,6.839808>Zone3</option></select><select id=Destination><option value=33.374304,6.871693>Zone1</option><option value= 33.367979,6.837744>Zone2</option></select>';
div.innerHTML += '</br><button type = button onclick = Itineraire()> Find route </button>';
div.firstChild.onmousedown = div.firstChild.ondblclick = L.DomEvent.stopPropagation;
return div;
};
legendbox.addTo(mymap);
Best Answer
my problem was on retrieving javascript data from forms after the correction I got everything like I expected my code working. here