added draggable routes,

changed findViaPosition to only return the index and not set the node,
IMPORTANT: changed leaflet-src.js for a bugfix!,

README.md

@@ -11,7 +11,7 @@ Setup
 -----
 The frontend should work directly as provided.
 Several settings - including the URL for the routing server and the geocoder server - can be specified in `OSRM.config.js`.
-Different tile servers can be specified in `OSRM.main.js`.
+Different tile servers can be specified in `OSRM.Map.js`.
 Note that the URL shortener used for generating route links only works with URLs pointing to the official Project-OSRM website.
 
 

WebContent/OSRM.Map.js

@@ -126,13 +126,13 @@ init: function() {
 	OSRM.G.map.on('zoomend', OSRM.Map.zoomed );
 	OSRM.G.map.on('click', OSRM.Map.click );
 	OSRM.G.map.on('contextmenu', OSRM.Map.contextmenu );
-	OSRM.G.map.on('click', OSRM.Map.mousemove );
+	OSRM.G.map.on('mousemove', OSRM.Map.mousemove );
 },
 
 // map event handlers
 zoomed: function(e) { OSRM.Routing.getRoute(); },
 contextmenu: function(e) {;},
-mousemove: function(e) {;},
+mousemove: function(e) { OSRM.Via.drawDragMarker(e); },
 click: function(e) {
 	if( !OSRM.G.markers.hasSource() ) {
 		var index = OSRM.G.markers.setSource( e.latlng );

WebContent/OSRM.Markers.js

@@ -94,6 +94,8 @@ OSRM.RouteMarker = function ( label, style, position ) {
  	this.marker.on( 'drag', this.onDrag );
  	this.marker.on( 'dragstart', this.onDragStart );
  	this.marker.on( 'dragend', this.onDragEnd );
+// 	this.marker.on( 'mouseover', this.onMouseOver );
+// 	this.marker.on( 'mouseout', this.onMouseOut );
 };
 OSRM.inheritFrom( OSRM.RouteMarker, OSRM.Marker );
 OSRM.extend( OSRM.RouteMarker, {
@@ -122,9 +124,9 @@ onDragStart: function(e) {
 		if( OSRM.G.markers.route[i].marker === this ) {
 			OSRM.G.dragid = i;
 			break;
-		}			
+		}
 	
-	OSRM.G.markers.highlight.hide();	
+	//OSRM.G.markers.highlight.hide();	
 	if (OSRM.G.route.isShown())
 		OSRM.G.route.showOldRoute();
 },
@@ -140,17 +142,53 @@ onDragEnd: function(e) {
 	if(OSRM.G.route.isShown()==false)
 		OSRM.Geocoder.updateAddress(this.parent.label);
 },
+onMouseOver: function(e) {
+	OSRM.G.onmouse = true;
+},
+onMouseOut: function(e) {
+	OSRM.G.onmouse = false;
+},
 toString: function() {
 	return "OSRM.RouteMarker: \""+this.label+"\", "+this.position+")";
 }
 });
 
 
+//drag marker class (draggable, invokes route drawing routines) 
+OSRM.DragMarker = function ( label, style, position ) {
+	OSRM.DragMarker.prototype.base.constructor.apply( this, arguments );
+	this.label = label ? label : "drag_marker";
+};
+OSRM.inheritFrom( OSRM.DragMarker, OSRM.RouteMarker );
+OSRM.extend( OSRM.DragMarker, {
+onClick: function(e) {
+	this.parent.hide();
+},
+onDragStart: function(e) {
+	var new_via_index = OSRM.Via.findViaIndex( e.target.getLatLng() );
+	OSRM.G.markers.route.splice(new_via_index+1,0, this.parent );
+
+	OSRM.RouteMarker.prototype.onDragStart.call(this,e);
+},
+onDragEnd: function(e) {
+	OSRM.G.markers.route[OSRM.G.dragid].hide();
+	OSRM.G.markers.route[OSRM.G.dragid] = new OSRM.RouteMarker(OSRM.C.VIA_LABEL, {draggable:true,icon:OSRM.G.icons['marker-via']}, e.target.getLatLng() );
+	OSRM.G.markers.route[OSRM.G.dragid].show();
+	
+	OSRM.RouteMarker.prototype.onDragEnd.call(this,e);	
+},
+toString: function() {
+	return "OSRM.DragMarker: \""+this.label+"\", "+this.position+")";
+}
+});
+
+
 // marker management class (all route markers should only be set and deleted with these routines!)
 // [this holds the vital information of the route]
 OSRM.Markers = function() {
 	this.route = new Array();
-	this.highlight = new OSRM.HighlightMarker("highlight", {draggable:false,icon:OSRM.G.icons['marker-highlight']});;
+	this.highlight = new OSRM.DragMarker("highlight", {draggable:true,icon:OSRM.G.icons['marker-highlight']});;
+	this.dragger = new OSRM.DragMarker("drag", {draggable:true,icon:OSRM.G.icons['marker-drag']});;
 };
 OSRM.extend( OSRM.Markers,{
 removeAll: function() {

WebContent/OSRM.Route.js

@@ -59,8 +59,12 @@ centerView: function() {
 	OSRM.g.map.fitBoundsUI( bounds );
 },
 onClick: function(e) {
-	if(OSRM.G.route.isRoute())
+	if(OSRM.G.route.isRoute()) {
-		OSRM.Via.findViaPosition( e.latlng );
+		var via_index = OSRM.Via.findViaIndex( e.latlng );
+		var marker_index = OSRM.G.markers.setVia(via_index, e.latlng);
+		OSRM.G.markers.route[marker_index].show();
+		OSRM.Routing.getRoute();
+	}
 },
 toString: function() {
 	return "OSRM.Route("+ this.label + ", " + this.route.getLatLngs().length + " points)";

WebContent/OSRM.Via.js

@@ -44,7 +44,7 @@ _findNearestRouteSegment: function( new_via ) {
 
 
 // find the correct index among all via nodes to insert the new via node, and insert it  
-findViaPosition: function( new_via_position ) {
+findViaIndex: function( new_via_position ) {
 	// find route segment that is closest to click position (marked by last index)
 	var nearest_index = OSRM.Via._findNearestRouteSegment( new_via_position );
 
@@ -60,12 +60,52 @@ findViaPosition: function( new_via_position ) {
 	}
 
 	// add via node
-	var index = OSRM.G.markers.setVia(new_via_index, new_via_position);
-	OSRM.G.markers.route[index].show();
-	
-	OSRM.Routing.getRoute();
-
 	return new_via_index;
+},
+
+
+//function that draws a drag marker
+dragTimer: new Date(),
+
+drawDragMarker: function(event) {
+	if( OSRM.G.route.isShown() == false )
+		return;
+	if( OSRM.G.dragging == true )
+		return;
+	if( (new Date() - OSRM.Via.dragTimer) < 25 )
+		return;
+	if( OSRM.G.onmouse ) {
+		OSRM.G.markers.dragger.hide();
+		return;	
+	}
+	OSRM.Via.dragTimer = new Date();
+	
+//	var mouse = event.latlng;
+//	for(var i=0, size=OSRM.G.markers.route.length; i<size; i++) {
+//		if(OSRM.G.markers.route[i].label=='drag')
+//			continue;
+//		var position = OSRM.G.markers.route[i].getPosition();
+//		var dist = OSRM.G.map.project(mouse).distanceTo(OSRM.G.map.project(position));
+//		if( dist < 10 )
+//			min_dist = 1000;
+//	}
+	var minpoint = OSRM.G.route._current_route.route.closestLayerPoint( event.layerPoint );
+	var min_dist = minpoint._sqDist;
+	
+	var pos = OSRM.G.map.layerPointToContainerPoint(event.layerPoint);
+	var obj = document.elementFromPoint(pos.x,pos.y);
+	for(var i=0, size=OSRM.G.markers.route.length; i<size; i++) {
+		if(OSRM.G.markers.route[i].label=='drag')
+			continue;
+		if( obj == OSRM.G.markers.route[i].marker._icon)
+			min_dist = 1000;
+	}
+	
+	if( min_dist < 400) {
+		OSRM.G.markers.dragger.setPosition( OSRM.G.map.layerPointToLatLng(minpoint) );
+		OSRM.G.markers.dragger.show();
+	} else
+		OSRM.G.markers.dragger.hide();
 }
 
 };

WebContent/leaflet/leaflet-src.js

@@ -3382,7 +3382,14 @@ L.LineUtil = {
 		dx = p.x - x;
 		dy = p.y - y;
 
-		return sqDist ? dx * dx + dy * dy : new L.Point(x, y);
+		//return sqDist ? dx * dx + dy * dy : new L.Point(x, y);		// DS_CHANGE
+		if(sqDist)
+			return dx*dx + dy*dy;
+		else {
+			var p = new L.Point(x,y);
+			p._sqDist = dx*dx + dy*dy;
+			return p;
+		}
 	}
 };
 

WebContent/main.js

@@ -65,10 +65,17 @@ OSRM.prefetchIcons = function() {
 	              	'marker-target',
 	              	'marker-via',
 	              	'marker-highlight',
+	              	'marker-drag'
 	              ];
 
 	for(var i=0; i<images.length; i++)
 		OSRM.G.icons[images[i]] = new L.Icon('images/'+images[i]+'.png');
+	
+	// changes for dragmarker
+	OSRM.G.icons['marker-drag'].iconSize = new L.Point(16,16);
+	OSRM.G.icons['marker-drag'].shadowSize = new L.Point(0,0);
+	OSRM.G.icons['marker-drag'].iconAnchor = new L.Point(7,7);
+	OSRM.G.icons['marker-drag'].popupAnchor = new L.Point(16,16);
 };
 
 

WebContent/routing/OSRM.RoutingDescription.js

@@ -36,7 +36,7 @@ onClickCreateShortcut: function(src){
 },
 showRouteLink: function(response){
 	document.getElementById('route-prelink').innerHTML = '[<a id="gpx-link" class = "text-selectable" href="' +response.ShortURL+ '">'+response.ShortURL+'</a>]';
-//	document.getElementById('route-prelink').innerHTML = '[<input class="text-selectable output-box" value="'+response.ShortURL+'" type="text" onfocus="this.select()" readonly="readonly"/>]';
+// 	document.getElementById('route-prelink').innerHTML = '[<input class="text-selectable output-box" style="border:none" value="'+response.ShortURL+'" type="text" onfocus="this.select()" readonly="readonly"/>]';
 },
 showRouteLink_TimeOut: function(){
 	document.getElementById('route-prelink').innerHTML = '['+OSRM.loc("LINK_TO_ROUTE_TIMEOUT")+']';