Refactor

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 66e0e064237ff4d00c5a45b92a4552612646ee8a..3d063189fb0db6e6e3b0706a8a79cb9ee1b5d982 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -281,6 +281,7 @@ $(document).ready(function () {
     return page;
   };
 
     return page;
   };
 

+  var directions = OSM.Directions(map);

   var history = OSM.History(map);
 
   OSM.router = OSM.Router(map, {
   var history = OSM.History(map);
 
   OSM.router = OSM.Router(map, {


@@ -326,7 +327,7 @@ $(document).ready(function () {
     e.preventDefault();
     if ($(".query_wrapper.routing").is(":visible")) {
       // Directions
     e.preventDefault();
     if ($(".query_wrapper.routing").is(":visible")) {
       // Directions

-      OSM.directions.requestRoute(true, true);
+      directions.requestRoute(true, true);

     } else {
       // Search
       $("header").addClass("closed");
     } else {
       // Search
       $("header").addClass("closed");


@@ -346,37 +347,4 @@ $(document).ready(function () {
       map.getCenter().lat.toFixed(precision) + "," +
       map.getCenter().lng.toFixed(precision)));
   });
       map.getCenter().lat.toFixed(precision) + "," +
       map.getCenter().lng.toFixed(precision)));
   });

-
-  OSM.directions = OSM.Directions(map, 'OSM.directions', $('.query_wrapper.routing'));
-  OSM.directions.chooseEngine('javascripts.directions.engines.osrm_car');
-
-  $(".get_directions").on("click",function(e) {
-    e.preventDefault();
-    $(".search").hide();
-    $(".routing").show();
-    $(".search_form input[type='submit']").addClass("routing_submit");
-    $(".query_wrapper.routing [name=route_from]").focus();
-    $("#map").on('dragend dragover',function(e) { e.preventDefault(); });
-    $("#map").on('drop',function(e) { OSM.directions.handleDrop(e); e.preventDefault(); });
-    $(".routing_marker").on('dragstart',function(e) {
-      e.originalEvent.dataTransfer.effectAllowed = 'move';
-      e.originalEvent.dataTransfer.setData('id', this.id);
-      var xo=e.originalEvent.clientX - $(e.target).offset().left;
-      var yo=e.originalEvent.clientY - $(e.target).offset().top;
-      e.originalEvent.dataTransfer.setData('offsetX', e.originalEvent.target.width/2 - xo);
-      e.originalEvent.dataTransfer.setData('offsetY', e.originalEvent.target.height  - yo);
-    });
-  });
-
-  $(".close_directions").on("click",function(e) {
-    e.preventDefault();
-    $(".search").show();
-    $(".routing").hide();
-    $(".search_form input[type='submit']").removeClass("routing_submit");
-    OSM.directions.close();
-    $("#map").off('dragend drop dragover');
-    $(".routing_marker").off('dragstart');
-    $(".query_wrapper.search [name=query]").focus();
-  });
-

 });
 });

diff --git a/app/assets/javascripts/index/directions.js.erb b/app/assets/javascripts/index/directions.js.erb
index 254bfa2b83f424a38a72fc24129c1bbc9abc8f63..9c9df6515aadfff22e1c8db66c32cdc4c9d1efb1 100644 (file)
--- a/app/assets/javascripts/index/directions.js.erb
+++ b/app/assets/javascripts/index/directions.js.erb
@@ -1,368 +1,296 @@
 //= require_self
 //= require_tree ./directions_engines
 
 //= require_self
 //= require_tree ./directions_engines
 

-var TURN_INSTRUCTIONS = [];
-
-var ROUTING_POLYLINE = {
-  color: '#03f',
-  opacity: 0.3,
-  weight: 10
-};
-
-var ROUTING_POLYLINE_HIGHLIGHT = {
-  color: '#ff0',
-  opacity: 0.5,
-  weight: 12
-};
-
-OSM.DirectionsEngines = {
-  list: [],
-  add: function (supportsHTTPS, engine) {
-    if (document.location.protocol == "http:" || supportsHTTPS) this.list.push(engine);
-  }
-};
-
-OSM.Directions = function (map, name, jqSearch) {
-  var r = {};
-
-  TURN_INSTRUCTIONS = [
-    "",
-    I18n.t('javascripts.directions.instructions.continue_on'),      // 1
-    I18n.t('javascripts.directions.instructions.slight_right'),     // 2
-    I18n.t('javascripts.directions.instructions.turn_right'),       // 3
-    I18n.t('javascripts.directions.instructions.sharp_right'),      // 4
-    I18n.t('javascripts.directions.instructions.uturn'),            // 5
-    I18n.t('javascripts.directions.instructions.sharp_left'),       // 6
-    I18n.t('javascripts.directions.instructions.turn_left'),        // 7
-    I18n.t('javascripts.directions.instructions.slight_left'),      // 8
-    I18n.t('javascripts.directions.instructions.via_point'),        // 9
-    I18n.t('javascripts.directions.instructions.follow'),           // 10
-    I18n.t('javascripts.directions.instructions.roundabout'),       // 11
-    I18n.t('javascripts.directions.instructions.leave_roundabout'), // 12
-    I18n.t('javascripts.directions.instructions.stay_roundabout'),  // 13
-    I18n.t('javascripts.directions.instructions.start'),            // 14
-    I18n.t('javascripts.directions.instructions.destination'),      // 15
-    I18n.t('javascripts.directions.instructions.against_oneway'),   // 16
-    I18n.t('javascripts.directions.instructions.end_oneway')        // 17
-  ];
-
-  r.map = map;              // Leaflet map
-  r.name = name;            // global variable name of this instance (needed for JSONP)
-  r.jqSearch = jqSearch;    // JQuery object for search panel
-
-  r.route_from = null;      // null=unset, false=awaiting response, [lat,lon]=geocoded
-  r.route_to = null;        //  |
-  r.awaitingGeocode = false;// true if the user has requested a route, but we're waiting on a geocode result
-  r.awaitingRoute = false;  // true if we've asked the engine for a route and are waiting to hear back
-  r.dragging = false;       // true if the user is dragging a start/end point
-  r.viaPoints = [];         // not yet used
-
-  r.polyline = null;        // Leaflet polyline object
-  r.popup = null;           // Leaflet popup object
-  r.marker_from = null;     // Leaflet from marker
-  r.marker_to = null;       // Leaflet to marker
-
-  r.chosenEngine = null;    // currently selected routing engine
-
-  var icon_from = L.icon({
-    iconUrl: <%= asset_path('marker-green.png').to_json %>,
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-    popupAnchor: [1, -34],
-    shadowUrl: <%= asset_path('images/marker-shadow.png').to_json %>,
-    shadowSize: [41, 41]
+OSM.Directions = function (map) {
+  var awaitingGeocode; // true if the user has requested a route, but we're waiting on a geocode result
+  var awaitingRoute;   // true if we've asked the engine for a route and are waiting to hear back
+  var dragging;        // true if the user is dragging a start/end point
+  var chosenEngine;
+
+  var popup = L.popup();
+
+  var polyline = L.polyline([], {
+    color: '#03f',
+    opacity: 0.3,
+    weight: 10

   });
 
   });
 

-  var icon_to = L.icon({
-    iconUrl: <%= asset_path('marker-red.png').to_json %>,
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-    popupAnchor: [1, -34],
-    shadowUrl: <%= asset_path('images/marker-shadow.png').to_json %>,
-    shadowSize: [41, 41]
+  var highlight = L.polyline([], {
+    color: '#ff0',
+    opacity: 0.5,
+    weight: 12

   });
 
   });
 

-  // Geocoding
-
-  r.geocode = function (id, event) {
-    var _this = this;
-    var field = event.target;
-    var v = event.target.value;
-    var querystring = '<%= NOMINATIM_URL %>search?q=' + encodeURIComponent(v) + '&format=json';
-    // *** &accept-language=<%#= request.user_preferred_languages.join(',') %>
-    r[field.id] = false;
-    $.getJSON(querystring, function (json) {
-      _this._gotGeocode(json, field);
-    });
-  };
-
-  r._gotGeocode = function (json, field) {
-    if (json.length == 0) {
-      alert(I18n.t('javascripts.directions.errors.no_place'));
-      r[field.id] = null;
-      return;
-    }
-    field.value = json[0].display_name;
-    var lat = Number(json[0].lat), lon = Number(json[0].lon);
-    r[field.id] = [lat, lon];
-    r.updateMarker(field.id);
-    if (r.awaitingGeocode) {
-      r.awaitingGeocode = false;
-      r.requestRoute(true, true);
-    }
-  };
-
-  // Drag and drop markers
-
-  r.handleDrop = function (e) {
-    var oe = e.originalEvent;
-    var id = oe.dataTransfer.getData('id');
-    var pt = L.DomEvent.getMousePosition(oe, map.getContainer());  // co-ordinates of the mouse pointer at present
-    pt.x += Number(oe.dataTransfer.getData('offsetX'));
-    pt.y += Number(oe.dataTransfer.getData('offsetY'));
-    var ll = map.containerPointToLatLng(pt);
-    r.createMarker(ll, id);
-    r.setNumericInput(ll, id);
-    r.requestRoute(true, false);
-    // update to/from field
-  };
-
-  r.createMarker = function (latlng, id) {
-    if (r[id]) r.map.removeLayer(r[id]);
-    r[id] = L.marker(latlng, {
-      icon: id == 'marker_from' ? icon_from : icon_to,
-      draggable: true,
-      name: id
-    }).addTo(r.map);
-    r[id].on('drag', r.markerDragged);
-    r[id].on('dragend', r.markerDragged);
-  };
+  var endpoints = [
+    Endpoint($("input[name='route_from']"), <%= asset_path('marker-green.png').to_json %>),
+    Endpoint($("input[name='route_to']"),   <%= asset_path('marker-red.png').to_json %>)
+  ];

 
 

-  // Update marker from geocoded route input
-  r.updateMarker = function (id) {
-    var m = id.replace('route', 'marker');
-    if (!r[m]) {
-      r.createMarker(r[id], m);
-      return;
-    }
-    var ll = r[m].getLatLng();
-    if (ll.lat != r[id][0] || ll.lng != r[id][1]) {
-      r.createMarker(r[id], m);
-    }
-  };
+  function Endpoint(input, iconUrl) {
+    var endpoint = {};
+
+    endpoint.marker = L.marker([0, 0], {
+      icon: L.icon({
+        iconUrl: iconUrl,
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
+        popupAnchor: [1, -34],
+        shadowUrl: <%= asset_path('images/marker-shadow.png').to_json %>,
+        shadowSize: [41, 41]
+      }),
+      draggable: true
+    });

 
 

-  // Marker has been dragged
-  r.markerDragged = function (e) {
-    r.dragging = (e.type == 'drag');    // true for drag, false for dragend
-    if (r.dragging && !r.chosenEngine.draggable) return;
-    if (r.dragging && r.awaitingRoute) return;
-    r.setNumericInput(e.target.getLatLng(), e.target.options.name);
-    r.requestRoute(!r.dragging, false);
-  };
+    endpoint.marker.on('drag dragend', function (e) {
+      dragging = (e.type == 'drag');
+      if (dragging && !chosenEngine.draggable) return;
+      if (dragging && awaitingRoute) return;
+      endpoint.setLatLng(e.target.getLatLng());
+      r.requestRoute(!dragging, false);
+    });

 
 

-  // Set a route input field to a numeric value
-  r.setNumericInput = function (ll, id) {
-    var routeid = id.replace('marker', 'route');
-    r[routeid] = [ll.lat, ll.lng];
-    $("[name=" + routeid + "]:visible").val(Math.round(ll.lat * 10000) / 10000 + " " + Math.round(ll.lng * 10000) / 10000);
-  };
+    input.on("change", function (e) {
+      endpoint.awaitingGeocode = true;

 
 

-  // Route-fetching UI
+      $.getJSON('<%= NOMINATIM_URL %>search?q=' + encodeURIComponent(e.target.value) + '&format=json', function (json) {
+        endpoint.awaitingGeocode = false;

 
 

-  r.requestRoute = function (isFinal, updateZoom) {
-    if (r.route_from && r.route_to) {
-      $(".query_wrapper.routing .spinner").show();
-      r.awaitingRoute = true;
-      r.chosenEngine.getRoute(isFinal, [r.route_from, r.route_to]);
-      if (updateZoom) {
-        r.map.fitBounds(L.latLngBounds([r.route_from, r.route_to]).pad(0.05));
-      }
-      // then, when the route has been fetched, it'll call the engine's gotRoute function
-    } else if (r.route_from == false || r.route_to == false) {
-      // we're waiting for a Nominatim response before we can request a route
-      r.awaitingGeocode = true;
-    }
-  };
+        if (json.length == 0) {
+          alert(I18n.t('javascripts.directions.errors.no_place'));
+          return;
+        }

 
 

-  // Take an array of Leaflet LatLngs and draw it as a polyline
-  r.setPolyline = function (line) {
-    if (r.polyline) map.removeLayer(r.polyline);
-    r.polyline = L.polyline(line, ROUTING_POLYLINE).addTo(r.map);
-  };
+        input.val(json[0].display_name);

 
 

-  // Take directions and write them out
-  // 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
-    $("#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>' + I18n.t('javascripts.directions.directions') +
-      '</h2><p id="routing_summary">' +
-      I18n.t('javascripts.directions.distance') + ': ' + r.formatDistance(data.distance) + '. ' +
-      I18n.t('javascripts.directions.time') + ': ' + r.formatTime(data.time) + '.</p>' +
-      '<table id="turnbyturn" />').replace(/~/g, "'");
-    $('#sidebar_content').html(html);
-    // Add each row
-    var cumulative = 0;
-    for (var i = 0; i < data.steps.length; i++) {
-      var step = data.steps[i];
-      // Distance
-      var dist = step[3];
-      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" + step[1] + "'> ");
-      row.append("<td class='instruction'>" + step[2]);
-      row.append("<td class='distance'>" + dist);
-      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">' + I18n.t('javascripts.directions.instructions.courtesy', {link: r.chosenEngine.creditline}) + '</p>');
-  };
+        endpoint.latlng = L.latLng(json[0]);
+        endpoint.marker
+          .setLatLng(endpoint.latlng)
+          .addTo(map);

 
 

-  r.clickTurn = function (instruction, latlng) {
-    r.popup = L.popup().setLatLng(latlng).setContent("<p>" + instruction + "</p>").openOn(r.map);
-  };
+        if (awaitingGeocode) {
+          awaitingGeocode = false;
+          r.requestRoute(true, true);
+        }
+      });
+    });

 
 

-  r.highlightSegment = function (lineseg) {
-    if (r.highlighted) map.removeLayer(r.highlighted);
-    r.highlighted = L.polyline(lineseg, ROUTING_POLYLINE_HIGHLIGHT).addTo(r.map);
-  };
+    endpoint.setLatLng = function (ll) {
+      input.val(Math.round(ll.lat * 10000) / 10000 + " " + Math.round(ll.lng * 10000) / 10000);
+      endpoint.latlng = ll;
+      endpoint.marker
+        .setLatLng(ll)
+        .addTo(map);
+    };

 
 

-  r.unhighlightSegment = function () {
-    if (r.highlighted) map.removeLayer(r.highlighted);
-  };
+    return endpoint;
+  }

 
 

-  r.formatDistance = function (m) {
+  function formatDistance(m) {

     if (m < 1000) {
       return Math.round(m) + "m";
     if (m < 1000) {
       return Math.round(m) + "m";

-    }
-    else if (m < 10000) {
+    } else if (m < 10000) {

       return (m / 1000.0).toFixed(1) + "km";
       return (m / 1000.0).toFixed(1) + "km";

-    }
-    else {
+    } else {

       return Math.round(m / 1000) + "km";
     }
       return Math.round(m / 1000) + "km";
     }

-  };
+  }

 
 

-  r.formatTime = function (s) {
+  function formatTime(s) {

     var m = Math.round(s / 60);
     var h = Math.floor(m / 60);
     m -= h * 60;
     return h + ":" + (m < 10 ? '0' : '') + m;
     var m = Math.round(s / 60);
     var h = Math.floor(m / 60);
     m -= h * 60;
     return h + ":" + (m < 10 ? '0' : '') + m;

-  };
+  }

 
 

-  // Close all routing UI
+  var engines = OSM.Directions.engines;

 
 

-  r.close = function () {
+  engines.sort(function (a, b) {
+    return I18n.t(a.name) > I18n.t(b.name);
+  });
+
+  var select = $('select.routing_engines');
+
+  for (var i = 0; i < engines.length; i++) {
+    var engine = engines[i];
+
+    select.append("<option value='" + i + "'>" + I18n.t(engine.name) + "</option>");
+
+    if (engine.name == 'javascripts.directions.engines.osrm_car') {
+      chosenEngine = engine;
+      select.val(i);
+    }
+  }
+
+  select.on("change", function (e) {
+    chosenEngine = engines[e.target.selectedIndex];
+    if (map.hasLayer(polyline)) { // and if a route is currently showing, must also refresh, else confusion
+      r.requestRoute(true, false);
+    }
+  });
+
+  $(".get_directions").on("click", function (e) {
+    e.preventDefault();
+    $(".search").hide();
+    $(".routing").show();
+    $(".search_form input[type='submit']").addClass("routing_submit");
+    $(".query_wrapper.routing [name=route_from]").focus();
+
+    $("#map").on('dragend dragover', function (e) {
+      e.preventDefault();
+    });
+
+    $("#map").on('drop', function (e) {
+      e.preventDefault();
+      var oe = e.originalEvent;
+      var id = oe.dataTransfer.getData('id');
+      var pt = L.DomEvent.getMousePosition(oe, map.getContainer());  // co-ordinates of the mouse pointer at present
+      pt.x += Number(oe.dataTransfer.getData('offsetX'));
+      pt.y += Number(oe.dataTransfer.getData('offsetY'));
+      var ll = map.containerPointToLatLng(pt);
+      endpoints[id === 'marker_from' ? 0 : 1].setLatLng(ll);
+      r.requestRoute(true, false);
+    });
+
+    $(".routing_marker").on('dragstart', function (e) {
+      e.originalEvent.dataTransfer.effectAllowed = 'move';
+      e.originalEvent.dataTransfer.setData('id', this.id);
+      var xo = e.originalEvent.clientX - $(e.target).offset().left;
+      var yo = e.originalEvent.clientY - $(e.target).offset().top;
+      e.originalEvent.dataTransfer.setData('offsetX', e.originalEvent.target.width / 2 - xo);
+      e.originalEvent.dataTransfer.setData('offsetY', e.originalEvent.target.height - yo);
+    });
+  });
+
+  $(".close_directions").on("click", function (e) {
+    e.preventDefault();
+    $(".search").show();
+    $(".routing").hide();
+    $(".search_form input[type='submit']").removeClass("routing_submit");

     $("#content").addClass("overlay-sidebar");
     $("#content").addClass("overlay-sidebar");

-    r.route_from = r.route_to = null;

     $(".query_wrapper.routing input").val("");
     $(".query_wrapper.routing input").val("");

-    var remove = ['polyline', 'popup', 'marker_from', 'marker_to'];
-    for (var i = 0; i < remove.length; i++) {
-      if (r[remove[i]]) {
-        map.removeLayer(r[remove[i]]);
-        r[remove[i]] = null;
-      }
+    map
+      .removeLayer(popup)
+      .removeLayer(polyline)
+      .removeLayer(endpoints[0].marker)
+      .removeLayer(endpoints[1].marker);
+    endpoints[0].latlng = endpoints[1].latlng = null;
+    $("#map").off('dragend drop dragover');
+    $(".routing_marker").off('dragstart');
+    $(".query_wrapper.search [name=query]").focus();
+  });
+
+  var r = {};
+
+  r.requestRoute = function (isFinal, updateZoom) {
+    if (endpoints[0].awaitingGeocode || endpoints[1].awaitingGeocode) {
+      awaitingGeocode = true;
+      return;

     }
     }

-  };

 
 

-  // Routing engine handling
+    var origin = endpoints[0].latlng,
+      destination = endpoints[1].latlng;

 
 

-  // Add all engines
-  var list = OSM.DirectionsEngines.list;
-  list.sort(function (a, b) {
-    return I18n.t(a.name) > I18n.t(b.name);
-  });
-  var select = r.jqSearch.find('select.routing_engines');
-  for (var i = 0; i < list.length; i++) {
-    // Set up JSONP callback
-    with ({num: i}) {
-      list[num].requestJSONP = function (url) {
-        var script = document.createElement('script');
-        script.src = url + r.name + ".gotRoute" + num;
-        document.body.appendChild(script);
-      };
-      list[num].requestCORS = function (url) {
-        $.ajax({ url: url, method: "GET", data: {}, dataType: 'json', success: r['gotRoute' + num] });
-      };
-      r['gotRoute' + num] = function (data) {
-        r.awaitingRoute = false;
-        $(".query_wrapper.routing .spinner").hide();
-        if (!list[num].gotRoute(r, data)) {
-          // No route found
-          if (r.polyline) {
-            map.removeLayer(r.polyline);
-            r.polyline = null;
-          }
-          if (!r.dragging) {
-            alert(I18n.t('javascripts.directions.errors.no_route'));
-          }
-        }
-      };
+    if (!origin || !destination) {
+      return;

     }
     }

-    select.append("<option value='" + i + "'>" + I18n.t(list[i].name) + "</option>");
-  }

 
 

-  r.engines = list;
-  r.chosenEngine = list[0]; // default to first engine
+    $(".query_wrapper.routing .spinner").show();
+    awaitingRoute = true;

 
 

-  // Choose an engine on dropdown change
-  r.selectEngine = function (e) {
-    r.chosenEngine = r.engines[e.target.selectedIndex];
-    if (r.polyline) { // and if a route is currently showing, must also refresh, else confusion
-      r.requestRoute(true, false);
+    if (updateZoom) {
+      map.fitBounds(L.latLngBounds(origin, destination).pad(0.05));

     }
     }

-  };

 
 

-  // Choose an engine by name
-  r.chooseEngine = function (name) {
-    for (var i = 0; i < r.engines.length; i++) {
-      if (r.engines[i].name == name) {
-        r.chosenEngine = r.engines[i];
-        r.jqSearch.find('select.routing_engines').val(i);
+    chosenEngine.getRoute(isFinal, [origin, destination], function (err, route) {
+      awaitingRoute = false;
+
+      $(".query_wrapper.routing .spinner").hide();
+
+      if (err) {
+        map.removeLayer(polyline);
+
+        if (!dragging) {
+          alert(I18n.t('javascripts.directions.errors.no_route'));
+        }
+
+        return;

       }
       }

-    }
-  };

 
 

-  $("input[name='route_from']").on("change", function (e) {
-    r.geocode('route_from', e);
-  });
+      polyline
+        .setLatLngs(route.line)
+        .addTo(map);
+
+      $("#content").removeClass("overlay-sidebar");
+
+      var html = ('<h2><a class="geolink" href="#" onclick="$(~.close_directions~).click();return false;">' +
+        '<span class="icon close"></span></a>' + I18n.t('javascripts.directions.directions') +
+        '</h2><p id="routing_summary">' +
+        I18n.t('javascripts.directions.distance') + ': ' + formatDistance(route.distance) + '. ' +
+        I18n.t('javascripts.directions.time') + ': ' + formatTime(route.time) + '.</p>' +
+        '<table id="turnbyturn" />').replace(/~/g, "'");
+
+      $('#sidebar_content')
+        .html(html);
+
+      // Add each row
+      var cumulative = 0;
+      route.steps.forEach(function (step) {
+        var ll        = step[0],
+          direction   = step[1],
+          instruction = step[2],
+          dist        = step[3],
+          lineseg     = step[4];
+
+        cumulative += dist;
+
+        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";
+        }

 
 

-  $("input[name='route_to']").on("change", function (e) {
-    r.geocode('route_to', e);
-  });
+        var row = $("<tr class='turn'/>");
+        row.append("<td class='direction i" + direction + "'> ");
+        row.append("<td class='instruction'>" + instruction);
+        row.append("<td class='distance'>" + dist);

 
 

-  $("select[name='routing_engines']").on("change", function (e) {
-    r.selectEngine(e);
-  });
+        row.on('click', function () {
+          popup
+            .setLatLng(ll)
+            .setContent("<p>" + instruction + "</p>")
+            .openOn(map);
+        });
+
+        row.hover(function () {
+          highlight
+            .setLatLngs(lineseg)
+            .addTo(map);
+        }, function () {
+          map.removeLayer(highlight);
+        });
+
+        $('#turnbyturn').append(row);
+      });
+
+      $('#sidebar_content').append('<p id="routing_credit">' +
+        I18n.t('javascripts.directions.instructions.courtesy', {link: chosenEngine.creditline}) +
+        '</p>');
+    });
+  };

 
   return r;
 };
 
   return r;
 };

+
+OSM.Directions.engines = [];
+
+OSM.Directions.addEngine = function (engine, supportsHTTPS) {
+  if (document.location.protocol == "http:" || supportsHTTPS) {
+    OSM.Directions.engines.push(engine);
+  }
+};

diff --git a/app/assets/javascripts/index/directions_engines/graphhopper.js b/app/assets/javascripts/index/directions_engines/graphhopper.js
index 9f9c549b5ff17934c4d3c4367faa4355fe3bd574..d6e52070c742ac7b1e6c4f2f0e8454a0f984bed3 100644 (file)
--- a/app/assets/javascripts/index/directions_engines/graphhopper.js
+++ b/app/assets/javascripts/index/directions_engines/graphhopper.js
@@ -1,81 +1,76 @@
-GraphHopperEngine = function (vehicleName, vehicleParam, locale) {
-  this.vehicleName = vehicleName;
-  this.vehicleParam = vehicleParam;
-  //At this point the local system isn't correctly initialised yet, so we don't have accurate information about current locale
-  this.locale = locale;
-  if (!locale)
-    this.locale = "en";
-};
+function GraphHopperEngine(vehicleName, vehicleParam) {
+  var GH_INSTR_MAP = {
+    "-3": 6, // sharp left
+    "-2": 7, // left
+    "-1": 8, // slight left
+    0: 0, // straight
+    1: 1, // slight right
+    2: 2, // right
+    3: 3, // sharp right
+    4: -1, // finish reached
+    5: -1 // via reached
+  };

 
 

-GraphHopperEngine.prototype.createConfig = function () {
-  var that = this;

   return {
   return {

-    name: "javascripts.directions.engines.graphhopper_" + this.vehicleName.toLowerCase(),
+    name: "javascripts.directions.engines.graphhopper_" + vehicleName.toLowerCase(),

     creditline: '<a href="http://graphhopper.com/" target="_blank">Graphhopper</a>',
     draggable: false,
     creditline: '<a href="http://graphhopper.com/" target="_blank">Graphhopper</a>',
     draggable: false,

-    _hints: {},

 
 

-    getRoute: function (isFinal, points) {
+    getRoute: function (isFinal, points, callback) {

       // documentation
       // https://github.com/graphhopper/graphhopper/blob/master/docs/web/api-doc.md
       var url = "http://graphhopper.com/api/1/route?"
       // documentation
       // https://github.com/graphhopper/graphhopper/blob/master/docs/web/api-doc.md
       var url = "http://graphhopper.com/api/1/route?"

-        + that.vehicleParam
+        + vehicleParam

         + "&locale=" + I18n.currentLocale()
         + "&locale=" + I18n.currentLocale()

-        + "&key=LijBPDQGfu7Iiq80w3HzwB4RUDJbMbhs6BU0dEnn";
+        + "&key=LijBPDQGfu7Iiq80w3HzwB4RUDJbMbhs6BU0dEnn"
+        + "&type=jsonp";

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

-        var pair = points[i].join(',');
-        url += "&point=" + pair;
+        url += "&point=" + points[i].lat + ',' + points[i].lng;

       }
       }

+

       if (isFinal)
         url += "&instructions=true";
       if (isFinal)
         url += "&instructions=true";

-      // GraphHopper supports json too
-      this.requestJSONP(url + "&type=jsonp&callback=");
-    },

 
 

-    gotRoute: function (router, data) {
-      if (!data.paths || data.paths.length == 0)
-        return false;
+      $.ajax({
+        url: url,
+        dataType: 'jsonp',
+        success: function (data) {
+          if (!data.paths || data.paths.length == 0)
+            return callback(true);

 
 

-      // Draw polyline
-      var path = data.paths[0];
-      var line = L.PolylineUtil.decode(path.points);
-      router.setPolyline(line);
-      // Assemble instructions
-      var steps = [];
-      var len = path.instructions.length;
-      for (i = 0; i < len; i++) {
-        var instr = path.instructions[i];
-        var instrCode = (i === len - 1) ? 15 : this.GH_INSTR_MAP[instr.sign];
-        var instrText = "<b>" + (i + 1) + ".</b> ";
-        instrText += instr.text;
-        var latLng = line[instr.interval[0]];
-        var distInMeter = instr.distance;
-        steps.push([
-          {lat: latLng.lat, lng: latLng.lng},
-          instrCode,
-          instrText,
-          distInMeter,
-          []
-        ]); // TODO does graphhopper map instructions onto line indices?
-      }
-      router.setItinerary({ steps: steps, distance: path.distance, time: path.time / 1000 });
-      return true;
-    },
+          var path = data.paths[0];
+          var line = L.PolylineUtil.decode(path.points);
+
+          var steps = [];
+          var len = path.instructions.length;
+          for (var i = 0; i < len; i++) {
+            var instr = path.instructions[i];
+            var instrCode = (i === len - 1) ? 15 : GH_INSTR_MAP[instr.sign];
+            var instrText = "<b>" + (i + 1) + ".</b> ";
+            instrText += instr.text;
+            var latLng = line[instr.interval[0]];
+            var distInMeter = instr.distance;
+            steps.push([
+              {lat: latLng.lat, lng: latLng.lng},
+              instrCode,
+              instrText,
+              distInMeter,
+              []
+            ]); // TODO does graphhopper map instructions onto line indices?
+          }

 
 

-    GH_INSTR_MAP: {
-      "-3": 6, // sharp left
-      "-2": 7, // left
-      "-1": 8, // slight left
-      0: 0, // straight
-      1: 1, // slight right
-      2: 2, // right
-      3: 3, // sharp right
-      4: -1, // finish reached
-      5: -1 // via reached
+          callback(null, {
+            line: line,
+            steps: steps,
+            distance: path.distance,
+            time: path.time / 1000
+          });
+        }
+      });

     }
   };
     }
   };

-};
+}

 
 

-OSM.DirectionsEngines.add(false, new GraphHopperEngine("Bicycle", "vehicle=bike").createConfig());
-OSM.DirectionsEngines.add(false, new GraphHopperEngine("Foot", "vehicle=foot").createConfig());
+OSM.Directions.addEngine(GraphHopperEngine("Bicycle", "vehicle=bike"), false);
+OSM.Directions.addEngine(GraphHopperEngine("Foot", "vehicle=foot"), false);

diff --git a/app/assets/javascripts/index/directions_engines/mapquest.js b/app/assets/javascripts/index/directions_engines/mapquest.js
index f24d8fab6604337e6973997ca3091808407338fe..3266795bc354fa2d5700b4a11eac0f2e355e3c11 100644 (file)
--- a/app/assets/javascripts/index/directions_engines/mapquest.js
+++ b/app/assets/javascripts/index/directions_engines/mapquest.js
@@ -3,96 +3,92 @@
 // http://open.mapquestapi.com/directions/
 // https://github.com/apmon/openstreetmap-website/blob/21edc353a4558006f0ce23f5ec3930be6a7d4c8b/app/controllers/routing_controller.rb#L153
 
 // http://open.mapquestapi.com/directions/
 // https://github.com/apmon/openstreetmap-website/blob/21edc353a4558006f0ce23f5ec3930be6a7d4c8b/app/controllers/routing_controller.rb#L153
 

-MapQuestEngine = function (vehicleName, vehicleParam, locale) {
-  this.vehicleName = vehicleName;
-  this.vehicleParam = vehicleParam;
-  this.locale = locale;
-  if (!locale)
-    this.locale = "en";
-};
+function MapQuestEngine(vehicleName, vehicleParam) {
+  var MQ_SPRITE_MAP = {
+    0: 1, // straight
+    1: 2, // slight right
+    2: 3, // right
+    3: 4, // sharp right
+    4: 5, // reverse
+    5: 6, // sharp left
+    6: 7, // left
+    7: 8, // slight left
+    8: 5, // right U-turn
+    9: 5, // left U-turn
+    10: 2, // right merge
+    11: 8, // left merge
+    12: 2, // right on-ramp
+    13: 8, // left on-ramp
+    14: 2, // right off-ramp
+    15: 8, // left off-ramp
+    16: 2, // right fork
+    17: 8, // left fork
+    18: 1  // straight fork
+  };

 
 

-MapQuestEngine.prototype.createConfig = function () {
-  var that = this;

   return {
   return {

-    name: "javascripts.directions.engines.mapquest_" + this.vehicleName.toLowerCase(),
+    name: "javascripts.directions.engines.mapquest_" + vehicleName.toLowerCase(),

     creditline: '<a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">',
     draggable: false,
     creditline: '<a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">',
     draggable: false,

-    _hints: {},
-
-    MQ_SPRITE_MAP: {
-      0: 1, // straight
-      1: 2, // slight right
-      2: 3, // right
-      3: 4, // sharp right
-      4: 5, // reverse
-      5: 6, // sharp left
-      6: 7, // left
-      7: 8, // slight left
-      8: 5, // right U-turn
-      9: 5, // left U-turn
-      10: 2, // right merge
-      11: 8, // left merge
-      12: 2, // right on-ramp
-      13: 8, // left on-ramp
-      14: 2, // right off-ramp
-      15: 8, // left off-ramp
-      16: 2, // right fork
-      17: 8, // left fork
-      18: 1  // straight fork
-    },

 
 

-    getRoute: function (isFinal, points) {
+    getRoute: function (isFinal, points, callback) {

       var url = document.location.protocol + "//open.mapquestapi.com/directions/v2/route?key=Fmjtd%7Cluur290anu%2Crl%3Do5-908a0y";
       var from = points[0];
       var to = points[points.length - 1];
       var url = document.location.protocol + "//open.mapquestapi.com/directions/v2/route?key=Fmjtd%7Cluur290anu%2Crl%3Do5-908a0y";
       var from = points[0];
       var to = points[points.length - 1];

-      url += "&from=" + from.join(',');
-      url += "&to=" + to.join(',');
-      url += "&" + that.vehicleParam;
+      url += "&from=" + from.lat + ',' + from.lng;
+      url += "&to=" + to.lat + ',' + to.lng;
+      url += "&" + vehicleParam;

       //url+="&locale=" + I18n.currentLocale(); //Doesn't actually work. MapQuest requires full locale e.g. "de_DE", but I18n may only provides language, e.g. "de"
       url += "&manMaps=false";
       url += "&shapeFormat=raw&generalize=0&unit=k";
       //url+="&locale=" + I18n.currentLocale(); //Doesn't actually work. MapQuest requires full locale e.g. "de_DE", but I18n may only provides language, e.g. "de"
       url += "&manMaps=false";
       url += "&shapeFormat=raw&generalize=0&unit=k";

-      this.requestCORS(url);
-    },

 
 

-    gotRoute: function (router, data) {
-      if (data.info.statuscode != 0) return false;
+      $.ajax({
+        url: url,
+        success: function (data) {
+          if (data.info.statuscode != 0)
+            return callback(true);

 
 

-      var poly = [];
-      var shape = data.route.shape.shapePoints;
-      for (var i = 0; i < shape.length; i += 2) {
-        poly.push(L.latLng(shape[i], shape[i + 1]));
-      }
-      router.setPolyline(poly);
+          var line = [];
+          var shape = data.route.shape.shapePoints;
+          for (var i = 0; i < shape.length; i += 2) {
+            line.push(L.latLng(shape[i], shape[i + 1]));
+          }

 
 

-      // data.route.shape.maneuverIndexes links turns to polyline positions
-      // data.route.legs[0].maneuvers is list of turns
-      var steps = [];
-      var mq = data.route.legs[0].maneuvers;
-      for (var i = 0; i < mq.length; i++) {
-        var s = mq[i];
-        var d;
-        var linesegstart, linesegend, lineseg;
-        linesegstart = data.route.shape.maneuverIndexes[i];
-        if (i == mq.length - 1) {
-          d = 15;
-          linesegend = linesegstart + 1;
-        } else {
-          d = this.MQ_SPRITE_MAP[s.turnType];
-          linesegend = data.route.shape.maneuverIndexes[i + 1] + 1;
-        }
-        lineseg = [];
-        for (var j = linesegstart; j < linesegend; j++) {
-          lineseg.push(L.latLng(data.route.shape.shapePoints[j * 2], data.route.shape.shapePoints[j * 2 + 1]));
+          // data.route.shape.maneuverIndexes links turns to polyline positions
+          // data.route.legs[0].maneuvers is list of turns
+          var steps = [];
+          var mq = data.route.legs[0].maneuvers;
+          for (var i = 0; i < mq.length; i++) {
+            var s = mq[i];
+            var d;
+            var linesegstart, linesegend, lineseg;
+            linesegstart = data.route.shape.maneuverIndexes[i];
+            if (i == mq.length - 1) {
+              d = 15;
+              linesegend = linesegstart + 1;
+            } else {
+              d = MQ_SPRITE_MAP[s.turnType];
+              linesegend = data.route.shape.maneuverIndexes[i + 1] + 1;
+            }
+            lineseg = [];
+            for (var j = linesegstart; j < linesegend; j++) {
+              lineseg.push(L.latLng(data.route.shape.shapePoints[j * 2], data.route.shape.shapePoints[j * 2 + 1]));
+            }
+            steps.push([L.latLng(s.startPoint.lat, s.startPoint.lng), d, s.narrative, s.distance * 1000, lineseg]);
+          }
+
+          callback(null, {
+            line: line,
+            steps: steps,
+            distance: data.route.distance * 1000,
+            time: data.route['time']
+          });

         }
         }

-        steps.push([L.latLng(s.startPoint.lat, s.startPoint.lng), d, s.narrative, s.distance * 1000, lineseg]);
-      }
-      router.setItinerary({ steps: steps, distance: data.route.distance * 1000, time: data.route['time'] });
-      return true;
+      });

     }
   };
     }
   };

-};
+}

 
 

-OSM.DirectionsEngines.add(true, new MapQuestEngine("Bicycle", "routeType=bicycle").createConfig());
-OSM.DirectionsEngines.add(true, new MapQuestEngine("Foot", "routeType=pedestrian").createConfig());
-OSM.DirectionsEngines.add(true, new MapQuestEngine("Car", "routeType=fastest").createConfig());
-// can be: routeType=fastest|shortest|pedestrian|multimodal|bicycle
+OSM.Directions.addEngine(MapQuestEngine("Bicycle", "routeType=bicycle"), true);
+OSM.Directions.addEngine(MapQuestEngine("Foot", "routeType=pedestrian"), true);
+OSM.Directions.addEngine(MapQuestEngine("Car", "routeType=fastest"), true);

diff --git a/app/assets/javascripts/index/directions_engines/osrm.js b/app/assets/javascripts/index/directions_engines/osrm.js
index ac78699f9c61caf9d950a5852962d2feb68a8d30..ebcbf1fb13eeb88697ae9ace538b4d54314ff032 100644 (file)
--- a/app/assets/javascripts/index/directions_engines/osrm.js
+++ b/app/assets/javascripts/index/directions_engines/osrm.js
@@ -1,69 +1,87 @@
 // OSRM car engine
 // Doesn't yet support hints
 
 // OSRM car engine
 // Doesn't yet support hints
 

-OSRMEngine = function (vehicleName, baseURL, locale) {
-  this.vehicleName = vehicleName;
-  this.baseURL = baseURL;
-  this.locale = locale;
-  if (!locale)
-    this.locale = "en";
-};
-
-OSRMEngine.prototype.createConfig = function () {
-  var that = this;
+function OSRMEngine() {

   return {
   return {

-    name: "javascripts.directions.engines.osrm_" + this.vehicleName.toLowerCase(),
+    name: "javascripts.directions.engines.osrm_car",

     creditline: '<a href="http://project-osrm.org/" target="_blank">OSRM</a>',
     draggable: true,
     creditline: '<a href="http://project-osrm.org/" target="_blank">OSRM</a>',
     draggable: true,

-    _hints: {},

 
 

-    getRoute: function (isFinal, points) {
-      var url = that.baseURL + "?z=14&output=json";
+    getRoute: function (isFinal, points, callback) {
+      var TURN_INSTRUCTIONS = [
+        "",
+        I18n.t('javascripts.directions.instructions.continue_on'),      // 1
+        I18n.t('javascripts.directions.instructions.slight_right'),     // 2
+        I18n.t('javascripts.directions.instructions.turn_right'),       // 3
+        I18n.t('javascripts.directions.instructions.sharp_right'),      // 4
+        I18n.t('javascripts.directions.instructions.uturn'),            // 5
+        I18n.t('javascripts.directions.instructions.sharp_left'),       // 6
+        I18n.t('javascripts.directions.instructions.turn_left'),        // 7
+        I18n.t('javascripts.directions.instructions.slight_left'),      // 8
+        I18n.t('javascripts.directions.instructions.via_point'),        // 9
+        I18n.t('javascripts.directions.instructions.follow'),           // 10
+        I18n.t('javascripts.directions.instructions.roundabout'),       // 11
+        I18n.t('javascripts.directions.instructions.leave_roundabout'), // 12
+        I18n.t('javascripts.directions.instructions.stay_roundabout'),  // 13
+        I18n.t('javascripts.directions.instructions.start'),            // 14
+        I18n.t('javascripts.directions.instructions.destination'),      // 15
+        I18n.t('javascripts.directions.instructions.against_oneway'),   // 16
+        I18n.t('javascripts.directions.instructions.end_oneway')        // 17
+      ];
+
+      var url = "http://router.project-osrm.org/viaroute?z=14&output=json";
+

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

-        var pair = points[i].join(',');
-        url += "&loc=" + pair;
-        if (this._hints[pair]) url += "&hint=" + this._hints[pair];
+        url += "&loc=" + points[i].lat + ',' + points[i].lng;

       }
       }

-      if (isFinal) url += "&instructions=true";
-      this.requestCORS(url);
-    },

 
 

-    gotRoute: function (router, data) {
-      if (data.status == 207) {
-        return false;
-      }
-      // Draw polyline
-      var line = L.PolylineUtil.decode(data.route_geometry);
-      for (i = 0; i < line.length; i++) {
-        line[i].lat /= 10;
-        line[i].lng /= 10;
-      }
-      router.setPolyline(line);
-      // Assemble instructions
-      var steps = [];
-      for (i = 0; i < data.route_instructions.length; i++) {
-        var s = data.route_instructions[i];
-        var linesegend;
-        var instCodes = s[0].split('-');
-        var instText = "<b>" + (i + 1) + ".</b> ";
-        instText += TURN_INSTRUCTIONS[instCodes[0]];
-        if (instCodes[1]) {
-          instText += "exit " + instCodes[1] + " ";
-        }
-        if (instCodes[0] != 15) {
-          instText += s[1] ? "<b>" + s[1] + "</b>" : I18n.t('javascripts.directions.instructions.unnamed');
-        }
-        if ((i + 1) < data.route_instructions.length) {
-          linesegend = data.route_instructions[i + 1][3] + 1;
-        } else {
-          linesegend = s[3] + 1;
+      if (isFinal)
+        url += "&instructions=true";
+
+      $.ajax({
+        url: url,
+        dataType: 'json',
+        success: function (data) {
+          if (data.status == 207)
+            return callback(true);
+
+          var line = L.PolylineUtil.decode(data.route_geometry);
+          for (var i = 0; i < line.length; i++) {
+            line[i].lat /= 10;
+            line[i].lng /= 10;
+          }
+
+          var steps = [];
+          for (i = 0; i < data.route_instructions.length; i++) {
+            var s = data.route_instructions[i];
+            var linesegend;
+            var instCodes = s[0].split('-');
+            var instText = "<b>" + (i + 1) + ".</b> ";
+            instText += TURN_INSTRUCTIONS[instCodes[0]];
+            if (instCodes[1]) {
+              instText += "exit " + instCodes[1] + " ";
+            }
+            if (instCodes[0] != 15) {
+              instText += s[1] ? "<b>" + s[1] + "</b>" : I18n.t('javascripts.directions.instructions.unnamed');
+            }
+            if ((i + 1) < data.route_instructions.length) {
+              linesegend = data.route_instructions[i + 1][3] + 1;
+            } else {
+              linesegend = s[3] + 1;
+            }
+            steps.push([line[s[3]], s[0].split('-')[0], instText, s[2], line.slice(s[3], linesegend)]);
+          }
+
+          callback(null, {
+            line: line,
+            steps: steps,
+            distance: data.route_summary.total_distance,
+            time: data.route_summary.total_time
+          });

         }
         }

-        steps.push([line[s[3]], s[0].split('-')[0], instText, s[2], line.slice(s[3], linesegend)]);
-      }
-      if (steps.length) router.setItinerary({ steps: steps, distance: data.route_summary.total_distance, time: data.route_summary.total_time });
-      return true;
+      });

     }
   };
     }
   };

-};
+}

 
 

-OSM.DirectionsEngines.add(false, new OSRMEngine("Car", "http://router.project-osrm.org/viaroute").createConfig());
+OSM.Directions.addEngine(OSRMEngine(), false);