X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/69437cf0ad12550ebfaadea56d074ac9996b8ca0..40ad8c7def36c7f5658e9987075578f491f77f0b:/app/assets/javascripts/routing.js.erb

diff --git a/app/assets/javascripts/routing.js.erb b/app/assets/javascripts/routing.js.erb
index 1f50fa480..4eb91fc7a 100644
--- a/app/assets/javascripts/routing.js.erb
+++ b/app/assets/javascripts/routing.js.erb
@@ -10,6 +10,7 @@
 	*** click each part
 	*** translation (including all alerts and presentation)
 	*** export GPX
+	*** URL history (or do we consciously not want to support that?)
 */
 
 var TURN_INSTRUCTIONS=["",
@@ -48,6 +49,7 @@ OSM.Routing=function(map,name,jqSearch) {
 	r.route_to=null;
 	r.viaPoints=[];
 	r.polyline=null;
+	r.chosenEngine=null;
 
 	// Geocoding
 
@@ -75,10 +77,12 @@ OSM.Routing=function(map,name,jqSearch) {
 	
 	// Route-fetching UI
 
+	r.selectEngine=function(e) {
+		r.chosenEngine=r.engines[e.target.selectedIndex];
+	};
 	r.requestRoute=function() {
 		if (r.route_from && r.route_to) {
-			var chosen=jqSearch.find('select.routing_engines :selected').val();
-			r.engines[chosen].getRoute(true,[r.route_from,r.route_to]);
+			r.chosenEngine.getRoute(true,[r.route_from,r.route_to]);
 			// then, when the route has been fetched, it'll call the engine's gotRoute function
 		}
 	};
@@ -94,10 +98,14 @@ OSM.Routing=function(map,name,jqSearch) {
 	// (we use OSRM's route_instructions format)
 	// *** translations?
 	r.setItinerary=function(steps) {
+		// Create base table
 		$("#content").removeClass("overlay-sidebar");
 		$('#sidebar_content').empty();
-		var html='<h2><a class="geolink" href="#"><span class="icon close"></span></a>Directions</h2>';
-		html+="<table>";
+		var html='<h2><a class="geolink" href="#" onclick="$(~.close_directions~).click();return false;"><span class="icon close"></span></a>Directions</h2>'.replace(/~/g,"'");
+		html+="<table id='turnbyturn' />";
+		$('#sidebar_content').html(html);
+		// Add each row
+		var cumulative=0;
 		for (var i=0; i<steps.length; i++) {
 			var step=steps[i];
 			var instCodes=step[0].split('-');
@@ -106,16 +114,39 @@ OSM.Routing=function(map,name,jqSearch) {
 			instText+=TURN_INSTRUCTIONS[instCodes[0]];
 			if (instCodes[1]) { instText+="exit "+instCodes[1]+" "; }
 			if (instCodes[0]!=15) { instText+=step[1] ? "<b>"+step[1]+"</b>" : "(unnamed)"; }
+			// Distance
+			var dist=step[2];
+			if (dist<5) { dist=""; }
+			else if (dist<200) { dist=Math.round(dist/10)*10+"m"; }
+			else if (dist<1500) { dist=Math.round(dist/100)*100+"m"; }
+			else if (dist<5000) { dist=Math.round(dist/100)/10+"km"; }
+			else { dist=Math.round(dist/1000)+"km"; }
 			// Add to table
-			html+="<tr>";
-			html+="<td class='direction i"+instCodes[0]+"'> ";
-			html+="<td>"+instText;
+			var row=$("<tr class='turn'/>");
+			row.append("<td class='direction i"+instCodes[0]+"'> ");
+			row.append("<td class='instruction'>"+instText);
+			row.append("<td class='distance'>"+dist);
+			with ({num: i, dist: step[3]}) {
+				row.on('click',function(e) { 
+					r.clickTurn(num, r.polyline.getLatLngs()[dist]);
+				});
+			};
+			$('#turnbyturn').append(row);
+			cumulative+=step[2];
 		}
-		html+="</table>";
-        $('#sidebar_content').html(html);
+	};
+	r.clickTurn=function(num,latlng) {
+		L.popup().setLatLng(latlng).setContent("<p>"+(num+1)+"</p>").openOn(r.map);
 	};
 
 
+	// Close all routing UI
+	
+	r.close=function() {
+		$("#content").addClass("overlay-sidebar");
+		if (r.polyline) map.removeLayer(r.polyline);
+	};
+
 	// Add engines
 	
 	r.engines=[];
@@ -129,7 +160,7 @@ OSM.Routing=function(map,name,jqSearch) {
 		// Add generic JSONP function
 		engine.requestJSONP=function(url) {
 			var script = document.createElement('script');
-			script.src = url+"&jsonp="+r.name+".engine"+this.subscript+".gotRoute";
+			script.src = url+r.name+".engine"+this.subscript+".gotRoute";
  			// OSRM doesn't like non-alphanumeric, otherwise we could just do OSM.routing.engines["+engine.subscript+"].gotRoute
 			document.body.appendChild(script); 
 		};
@@ -155,7 +186,7 @@ OSM.Routing=function(map,name,jqSearch) {
 				if (this._hints[pair]) url+= "&hint="+this._hints[pair];
 			}
 			if (final) url+="&instructions=true";
-			this.requestJSONP(url);
+			this.requestJSONP(url+"&jsonp=");
 		},
 		gotRoute: function(data) {
 			if (data.status==207) {
@@ -170,5 +201,36 @@ OSM.Routing=function(map,name,jqSearch) {
 		}
 	});
 
+	// CloudMade foot engine
+	// *** again, this should be shared from a Cloudmade library somewhere
+	// *** this API key is taken from some example code, not for real live use!
+	
+	r.addEngine({
+		name: 'Foot (CloudMade)',
+		draggable: true,
+		getRoute: function(final,points) {
+			var url="http://routes.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/api/0.3/";
+			var p=[];
+			for (var i=0; i<points.length; i++) {
+				p.push(points[i][0]);
+				p.push(points[i][1]);
+			}
+			url+=p.join(',');
+			url+="/foot.js";
+			this.requestJSONP(url+"?callback=");
+		},
+		gotRoute: function(data) {
+			console.log(data);
+			// *** todo
+			// *** will require some degree of refactoring because instruction text is pre-assembled
+			// *** otherwise largely like OSRM (funny that)
+		}
+	});
+	
+	// *** add MapQuest
+	// *** add YOURS
+	// *** move into separate files
+	
+	r.chosenEngine=r.engines[0];
 	return r;
 };