moved button out of the form as this leads to double fire problems; made flags moveable

Author: Peter

web/src/main/webapp/index.html

@@ -107,13 +107,13 @@ <h1><a class="no_link" href="http://graphhopper.com">
                 <img alt="GraphHopper" src="http://graphhopper.com/img/header.png"/> 
                 <span style="font-size: small; color: gray">Web Demo</span></a></h1>
         <div id="input">
-            <form id="locationform" action="javascript:return false;">
-                <div id="options">
-                    <span id="vehicles">
-                        
-                    </span>
-                    <input id="hiddenButton" type="submit" value="Search">
-                </div>
+            <div id="options">
+                <span id="vehicles">
+
+                </span>
+                <input id="hiddenButton" type="submit" value="Search">
+            </div>
+            <form id="locationform" action="javascript:return false;">                
                 <div id="fromDiv">
                     <img id="fromIndicator" class="hidden" src="img/indicator.gif"/>
                     <img id="fromFlag" src="img/marker-from.png"/>

web/src/main/webapp/js/main.js

@@ -197,16 +197,17 @@ function initMap() {
 
     routingLayer = L.geoJson().addTo(map);    
     clickToRoute = true;
-    function onMapClick(e) {        
+    function onMapClick(e) {       
+        var latlng = e.latlng;
         if(clickToRoute) {
             // set start point
             routingLayer.clearLayers();
             clickToRoute = false;
-            ghRequest.from.setCoord(e.latlng.lat, e.latlng.lng);
+            ghRequest.from.setCoord(latlng.lat, latlng.lng);
             resolveFrom();            
         } else {
             // set end point
-            ghRequest.to.setCoord(e.latlng.lat, e.latlng.lng);
+            ghRequest.to.setCoord(latlng.lat, latlng.lng);
             resolveTo();            
             // do not wait for resolving
             routeLatLng(ghRequest);
@@ -218,9 +219,24 @@ function initMap() {
 
 function setFlag(latlng, isFrom) {
     if(latlng.lat) {
-        L.marker([latlng.lat, latlng.lng], {
-            icon: (isFrom? iconFrom : iconTo)
+        var marker = L.marker([latlng.lat, latlng.lng], {
+            icon: (isFrom? iconFrom : iconTo),
+            draggable: true            
         }).addTo(routingLayer).bindPopup(isFrom? "Start" : "End");                  
+        marker.on('dragend', function(e) {
+            routingLayer.clearLayers();
+            // inconsistent leaflet API: event.target.getLatLng vs. mouseEvent.latlng?
+            var latlng = e.target.getLatLng();
+            if(isFrom) {
+                ghRequest.from.setCoord(latlng.lat, latlng.lng);
+                resolveFrom();                                
+            } else {
+                ghRequest.to.setCoord(latlng.lat, latlng.lng);
+                resolveTo();
+            }
+            // do not wait for resolving
+            routeLatLng(ghRequest);
+        });
     } 
 }