Start to make turn-by-turn instructions clickable

[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 30846479d28c0f094cde40785ae01e5df6bdb4c1..f496262d2aac30aab377ecdcf8a5d8e0b8085f15 100644 (file)
--- a/app/assets/javascripts/routing.js.erb
+++ b/app/assets/javascripts/routing.js.erb
@@ -7,7 +7,10 @@
        https://github.com/apmon/openstreetmap-website/blob/9755c3ae0a8d0684d43760f91dc864ff42d8477a/app/views/routing/start.js.erb
 
        *** draggable start/end markers
        https://github.com/apmon/openstreetmap-website/blob/9755c3ae0a8d0684d43760f91dc864ff42d8477a/app/views/routing/start.js.erb
 
        *** draggable start/end markers

-       
+       *** 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=["",
 */
 
 var TURN_INSTRUCTIONS=["",


@@ -85,26 +88,57 @@ OSM.Routing=function(map,name,jqSearch) {
        r.setPolyline=function(line) {
                if (r.polyline) map.removeLayer(r.polyline);
                r.polyline=L.polyline(line, ROUTING_POLYLINE).addTo(r.map);
        r.setPolyline=function(line) {
                if (r.polyline) map.removeLayer(r.polyline);
                r.polyline=L.polyline(line, ROUTING_POLYLINE).addTo(r.map);

-               // *** zoom to fit
+               r.map.fitBounds(r.polyline.getBounds());

        };
 
        // Take an array of directions and write it out
        // (we use OSRM's route_instructions format)
        };
 
        // Take an array of directions and write it out
        // (we use OSRM's route_instructions format)

+       // *** translations?

        r.setItinerary=function(steps) {
        r.setItinerary=function(steps) {

+               // Create base table

                $("#content").removeClass("overlay-sidebar");
                $('#sidebar_content').empty();
                $("#content").removeClass("overlay-sidebar");
                $('#sidebar_content').empty();

-               var html="";
+               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

                for (var i=0; i<steps.length; i++) {
                for (var i=0; i<steps.length; i++) {

-                       var s=steps[i];
-                       html+="<div class='route_step'>";
-                       html+=TURN_INSTRUCTIONS[s[0]] || s[0];
-                       html+=s[1];
-                       html+="</div>";
+                       var step=steps[i];
+                       var instCodes=step[0].split('-');
+                       // Assemble instruction text
+                       var instText="<b>"+(i+1)+".</b> ";
+                       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
+                       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 ({n: i}) { row.on('click',function(e) { r.clickTurn(n); });
+                       }
+                       $('#turnbyturn').append(row);

                }
                }

-        $('#sidebar_content').html(html);
+       };
+       r.clickTurn=function(num) {
+               console.log("clicked turn",num);

        };
 
 
        };
 
 

+       // Close all routing UI
+       
+       r.close=function() {
+               $("#content").addClass("overlay-sidebar");
+               if (r.polyline) map.removeLayer(r.polyline);
+       };
+

        // Add engines
        
        r.engines=[];
        // Add engines
        
        r.engines=[];


@@ -147,7 +181,11 @@ OSM.Routing=function(map,name,jqSearch) {
                        this.requestJSONP(url);
                },
                gotRoute: function(data) {
                        this.requestJSONP(url);
                },
                gotRoute: function(data) {

-                       // *** save hints
+                       if (data.status==207) {
+                               alert("Couldn't find route between those two places");
+                               return false;
+                       }
+                       // *** store hints

                        var line=L.PolylineUtil.decode(data.route_geometry);
                        for (i=0; i<line.length; i++) { line[i].lat/=10; line[i].lng/=10; }
                        r.setPolyline(line);
                        var line=L.PolylineUtil.decode(data.route_geometry);
                        for (i=0; i<line.length; i++) { line[i].lat/=10; line[i].lng/=10; }
                        r.setPolyline(line);