Start work on second engine

[rails.git] / app / assets / javascripts / routing.js.erb

diff --git a/app/assets/javascripts/routing.js.erb b/app/assets/javascripts/routing.js.erb
index ed95512528c153873555ffae6bd7b18b1616c835..4eb91fc7aaeb826be74cc6df777d8c3a9ccbe2e2 100644 (file)
--- a/app/assets/javascripts/routing.js.erb
+++ b/app/assets/javascripts/routing.js.erb
@@ -49,6 +49,7 @@ OSM.Routing=function(map,name,jqSearch) {
        r.route_to=null;
        r.viaPoints=[];
        r.polyline=null;
+       r.chosenEngine=null;
 
        // Geocoding
 
@@ -76,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
                }
        };
@@ -95,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="#" onclick="$(~.close_directions~).click();return false;"><span class="icon close"></span></a>Directions</h2>'.replace(/~/g,"'");
-               html+="<table>";
+               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('-');
@@ -115,13 +122,21 @@ OSM.Routing=function(map,name,jqSearch) {
                        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 class='instruction'>"+instText;
-                       html+="<td class='distance'>"+dist;
+                       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);
        };
 
 
@@ -145,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); 
                };
@@ -171,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) {
@@ -186,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;
 };