Using GraphHopper new API

[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 d62e94f0cb18a9f15109453563dc061407faea12..5ff0656c81c99f1767c700888391a0b133a5e1e9 100644 (file)
--- a/app/assets/javascripts/routing.js.erb
+++ b/app/assets/javascripts/routing.js.erb
@@ -10,9 +10,18 @@ var ROUTING_POLYLINE={
     weight: 10
 };
 
+var ROUTING_POLYLINE_HIGHLIGHT={
+    color: '#ff0',
+    opacity: 0.5,
+    weight: 12
+};
+
 
 OSM.RoutingEngines={
-    list: []
+    list: [],
+    add: function(supportsHTTPS,engine) {
+        if (document.location.protocol=="http:" || supportsHTTPS) this.list.push(engine);
+    }
 };
 
 OSM.Routing=function(map,name,jqSearch) {
@@ -171,7 +180,7 @@ OSM.Routing=function(map,name,jqSearch) {
     };
 
     // Take directions and write them out
-    // data = { steps: array of [latlng, sprite number, instruction text, distance in metres] }
+    // data = { steps: array of [latlng, sprite number, instruction text, distance in metres, highlightPolyline] }
     // sprite numbers equate to OSRM's route_instructions turn values
     r.setItinerary=function(data) {
         // Create base table
@@ -200,25 +209,35 @@ OSM.Routing=function(map,name,jqSearch) {
             row.append("<td class='direction i"+step[1]+"'> ");
             row.append("<td class='instruction'>"+step[2]);
             row.append("<td class='distance'>"+dist);
-            with ({ num: i, ll: step[0] }) {
-                row.on('click',function(e) { r.clickTurn(num, ll); });
+            with ({ instruction: step[2], ll: step[0], lineseg: step[4] }) {
+                row.on('click',function(e) { r.clickTurn(instruction, ll); });
+                row.hover(function(e){r.highlightSegment(lineseg);}, function(e){r.unhighlightSegment();});
             };
             $('#turnbyturn').append(row);
             cumulative+=step[3];
         }
-        $('#sidebar_content').append('<p id="routing_credit">' + r.chosenEngine.creditline + '</p>');
+        $('#sidebar_content').append('<p id="routing_credit">' + I18n.t('javascripts.directions.instructions.courtesy',{link: r.chosenEngine.creditline}) + '</p>');
 
     };
-    r.clickTurn=function(num,latlng) {
-        r.popup=L.popup().setLatLng(latlng).setContent("<p>"+(num+1)+"</p>").openOn(r.map);
+    r.clickTurn=function(instruction,latlng) {
+        r.popup=L.popup().setLatLng(latlng).setContent("<p>"+instruction+"</p>").openOn(r.map);
     };
+    r.highlightSegment=function(lineseg){
+        if (r.highlighted) map.removeLayer(r.highlighted);
+        r.highlighted=L.polyline(lineseg, ROUTING_POLYLINE_HIGHLIGHT).addTo(r.map);
+    }
+    r.unhighlightSegment=function(){
+        if (r.highlighted) map.removeLayer(r.highlighted);
+    }
     r.formatDistance=function(m) {
         if      (m < 1000 ) { return Math.round(m) + "m"; }
         else if (m < 10000) { return (m/1000.0).toFixed(1) + "km"; }
         else                { return Math.round(m / 1000)  + "km"; }
     };
     r.formatTime=function(s) {
-        var d=new Date(s*1000); var h=d.getHours(); var m=d.getMinutes();
+        var m=Math.round(s/60);
+        var h=Math.floor(m/60);
+        m -= h*60;
         return h+":"+(m<10 ? '0' : '')+m;
     };