]> git.openstreetmap.org Git - rails.git/blobdiff - app/assets/javascripts/routing.js.erb
Start work on drag-and-drop start/end markers
[rails.git] / app / assets / javascripts / routing.js.erb
index afa15ba4fb36bd3f871b478c7aaea6f0681a34c3..45ae08d81cd7dbe8accf86f0d90397ff386252e0 100644 (file)
@@ -11,9 +11,8 @@
        *** export GPX
        *** URL history (or do we consciously not want to support that?)
 
-       *** add MapQuest engine
        *** add YOURS engine
-       *** finish CloudMade engine
+       *** add GraphHopper engine
 */
 
 var TURN_INSTRUCTIONS=["",
@@ -49,15 +48,17 @@ OSM.RoutingEngines={
 
 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;
+       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.viaPoints=[];                 // not yet used
+       r.polyline=null;                // Leaflet polyline object
+       r.chosenEngine=null;    // currently selected routing engine
 
        // Geocoding
 
@@ -68,6 +69,7 @@ OSM.Routing=function(map,name,jqSearch) {
                var querystring = '<%= NOMINATIM_URL %>search?q=' + encodeURIComponent(v) + '&format=json';
                // *** &accept-language=<%#= request.user_preferred_languages.join(',') %>
                // *** prefer current viewport
+               r[field.id]=false;
                $.getJSON(querystring, function(json) { _this._gotGeocode(json,field); });
        };
        
@@ -81,6 +83,16 @@ OSM.Routing=function(map,name,jqSearch) {
                var lat=Number(json[0].lat), lon=Number(json[0].lon);
                r[field.id]=[lat,lon];
                // ** update markers
+               if (r.awaitingGeocode) {
+                       r.awaitingGeocode=false;
+                       r.requestRoute();
+               }
+       };
+
+       // Drag and drop markers
+       
+       r.handleDrop=function(e) {
+               console.log(r.map.mouseEventToLatLng(e.originalEvent))
        };
        
        // Route-fetching UI
@@ -89,6 +101,9 @@ OSM.Routing=function(map,name,jqSearch) {
                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
+               } 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;
                }
        };
 
@@ -99,10 +114,11 @@ OSM.Routing=function(map,name,jqSearch) {
                r.map.fitBounds(r.polyline.getBounds());
        };
 
-       // Take an array of directions and write it out
-       // (we use OSRM's route_instructions format)
+       // Take directions and write them out
+       // data = { steps: array of [latlng, sprite number, instruction text, distance in metres] }
+       // sprite numbers equate to OSRM's route_instructions turn values
        // *** translations?
-       r.setItinerary=function(steps) {
+       r.setItinerary=function(data) {
                // Create base table
                $("#content").removeClass("overlay-sidebar");
                $('#sidebar_content').empty();
@@ -111,16 +127,10 @@ OSM.Routing=function(map,name,jqSearch) {
                $('#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('-');
-                       // 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)"; }
+               for (var i=0; i<data.steps.length; i++) {
+                       var step=data.steps[i];
                        // Distance
-                       var dist=step[2];
+                       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"; }
@@ -128,16 +138,14 @@ OSM.Routing=function(map,name,jqSearch) {
                        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='direction i"+step[1]+"'> ");
+                       row.append("<td class='instruction'>"+step[2]);
                        row.append("<td class='distance'>"+dist);
-                       with ({num: i, dist: step[3]}) {
-                               row.on('click',function(e) { 
-                                       r.clickTurn(num, r.polyline.getLatLngs()[dist]);
-                               });
+                       with ({ num: i, ll: step[0] }) {
+                               row.on('click',function(e) { r.clickTurn(num, ll); });
                        };
                        $('#turnbyturn').append(row);
-                       cumulative+=step[2];
+                       cumulative+=step[3];
                }
        };
        r.clickTurn=function(num,latlng) {
@@ -155,23 +163,24 @@ OSM.Routing=function(map,name,jqSearch) {
        // Routing engine handling
 
        // Add all engines
-       r.addEngines=function(list) {
-               list.sort(function(a,b) { return a.name>b.name; });
-               r.engines=list;
-               var select=r.jqSearch.find('select.routing_engines');
-               for (var i=0; i<list.length; i++) {
-                       // Set up JSONP callback
-                       var engine=r.engines[i];
-                       engine.requestJSONP=function(url) {
+       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<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"+this.subscript;
+                               script.src = url+r.name+".gotRoute"+num;
                                document.body.appendChild(script); 
                        };
-                       r['gotRoute'+i]=function(data) { engine.gotRoute(r,data); };
-                       select.append("<option value='"+i+"'>"+engine.name+"</option>");
+                       r['gotRoute'+num]=function(data) { list[num].gotRoute(r,data); };
                }
-               r.chosenEngine=r.engines[0];
-       };
+               select.append("<option value='"+i+"'>"+list[i].name+"</option>");
+       }
+       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];
@@ -180,7 +189,7 @@ OSM.Routing=function(map,name,jqSearch) {
        r.chooseEngine=function(name) {
                for (var i=0; i<r.engines.length; i++) {
                        if (r.engines[i].name==name) {
-                               r.chosenEngine[i]=r.engines[i];
+                               r.chosenEngine=r.engines[i];
                                r.jqSearch.find('select.routing_engines').val(i);
                        }
                }