X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/7834c628e9088081fac0236f3f0aa6d22ff98452..ed75d4710b0d4aec2c57f610083762d6fd63e9c9:/app/assets/javascripts/routing.js.erb diff --git a/app/assets/javascripts/routing.js.erb b/app/assets/javascripts/routing.js.erb index e9954bbcb..fc2bb8d30 100644 --- a/app/assets/javascripts/routing.js.erb +++ b/app/assets/javascripts/routing.js.erb @@ -1,191 +1,357 @@ /* - osm.org routing interface - - See also: - https://github.com/apmon/openstreetmap-website/tree/routing2 - https://github.com/apmon/openstreetmap-website/compare/routing2 - https://github.com/apmon/openstreetmap-website/blob/9755c3ae0a8d0684d43760f91dc864ff42d8477a/app/views/routing/start.js.erb - - *** draggable start/end markers - *** translation (including all alerts and presentation) - *** export GPX - *** URL history (or do we consciously not want to support that?) - - *** add MapQuest engine - *** add YOURS engine - *** finish CloudMade engine + osm.org routing interface */ -var TURN_INSTRUCTIONS=["", - "Continue on ", // 1 - "Slight right onto ", // 2 - "Turn right onto ", // 3 - "Sharp right onto ", // 4 - "U-turn along ", // 5 - "Sharp left onto ", // 6 - "Turn left onto ", // 7 - "Slight left onto ", // 8 - "(via point) ", // 9 - "Follow ", // 10 - "At roundabout take ", // 11 - "Leave roundabout - ", // 12 - "Stay on roundabout - ", // 13 - "Start at end of ", // 14 - "Reach destination", // 15 - "Go against one-way on ", // 16 - "End of one-way on "] // 17 - -var ROUTING_POLYLINE={ - color: '#03f', - opacity: 0.3, - weight: 10 +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.RoutingEngines={ - list: [] - // common functions and constants, e.g. OSRM parser, can go here +OSM.RoutingEngines = { + list: [], + add: function (supportsHTTPS, engine) { + if (document.location.protocol == "http:" || supportsHTTPS) this.list.push(engine); + } }; -OSM.Routing=function(map,name,jqSearch) { - var r={}; - 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; - r.route_to=null; - r.viaPoints=[]; - r.polyline=null; - r.chosenEngine=null; - - // Geocoding - - r.geocode=function(id,event) { var _this=this; - var field=event.target; - var v=event.target.value; - // *** do something if v=='' - var querystring = '<%= NOMINATIM_URL %>search?q=' + encodeURIComponent(v) + '&format=json'; - // *** &accept-language=<%#= request.user_preferred_languages.join(',') %> - // *** prefer current viewport - $.getJSON(querystring, function(json) { _this._gotGeocode(json,field); }); - }; - - r._gotGeocode=function(json,field) { - if (json.length==0) { - alert("Sorry, couldn't find that place."); // *** internationalise - 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]; - // ** update markers - }; - - // Route-fetching UI - - r.requestRoute=function() { - if (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 - } - }; - - // 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); - r.map.fitBounds(r.polyline.getBounds()); - }; - - // Take an array of directions and write it out - // (we use OSRM's route_instructions format) - // *** translations? - r.setItinerary=function(steps) { - // Create base table - $("#content").removeClass("overlay-sidebar"); - $('#sidebar_content').empty(); - var html='
"+(num+1)+"
").openOn(r.map); - }; - - - // Close all routing UI - - r.close=function() { - $("#content").addClass("overlay-sidebar"); - if (r.polyline) map.removeLayer(r.polyline); - }; - - // Routing engine handling - - // Add all engines - var list=OSM.RoutingEngines.list; - list.sort(function(a,b) { return a.name>b.name; }); - var select=r.jqSearch.find('select.routing_engines'); - for (var i=0; i' + + I18n.t('javascripts.directions.distance') + ': ' + r.formatDistance(data.distance) + '. ' + + I18n.t('javascripts.directions.time') + ': ' + r.formatTime(data.time) + '.
' + + '' + I18n.t('javascripts.directions.instructions.courtesy', {link: r.chosenEngine.creditline}) + '
'); + }; + + r.clickTurn = function (instruction, latlng) { + r.popup = L.popup().setLatLng(latlng).setContent("" + instruction + "
").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 m = Math.round(s / 60); + var h = Math.floor(m / 60); + m -= h * 60; + return h + ":" + (m < 10 ? '0' : '') + m; + }; + + // Close all routing UI + + r.close = function () { + $("#content").addClass("overlay-sidebar"); + r.route_from = r.route_to = null; + $(".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; + } + } + }; + + // Routing engine handling + + // Add all engines + var list = OSM.RoutingEngines.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')); + } + } + }; + } + select.append(""); + } + + r.engines = list; + r.chosenEngine = list[0]; // default to first engine + + // 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); + } + }; + + // 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); + } + } + }; + + return r; };