added via marker numbering

WebContent/base/OSRM.Markers.js

@@ -131,5 +131,11 @@ hasTarget: function() {
 	if( this.route[this.route.length-1] && this.route[this.route.length-1].label == OSRM.C.TARGET_LABEL )
 		return true;
 	return false;
+},
+
+//relabel all via markers
+relabelViaMarkers: function() {
+	for(var i=1, size=this.route.length-1; i<size; i++)
+		this.route[i].marker.setLabel(i);
 }
-});
+});

WebContent/base/leaflet/L.MouseMarker.js

@@ -34,6 +34,13 @@ L.MouseMarker = L.Marker.extend({
 		}
 	},
 	
+	setLabel: function( label ) {
+		if(this._icon) {
+			this._icon.lastChild.innerHTML=label;
+			this._icon.lastChild.style.display = "block";
+		}
+	},
+	
 	_changeIcon: function () {
 		var options = this.options;
 

WebContent/base/leaflet/L.SwitchableIcon.js

@@ -80,8 +80,16 @@ L.SwitchableIcon = L.Class.extend({
 	_createImg: function (src) {
 		var el;
 		if (!L.Browser.ie6) {
-			el = document.createElement('img');
+			el = document.createElement('div');
-			el.src = src;
+			
+			var img = document.createElement('img');
+			var num = document.createElement('div');
+			img.src = src;
+			num.className = 'via-counter';
+			num.innerHTML = "";
+			
+			el.appendChild(img);
+			el.appendChild(num);
 		} else {
 			el = document.createElement('div');
 			el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")';
@@ -106,7 +114,7 @@ L.SwitchableIcon = L.Class.extend({
 	
 	_switchImg: function (src, el) {
 		if (!L.Browser.ie6) {
-			el.src = src;
+			el.firstChild.src = src;
 		} else {
 			el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")';
 		}

WebContent/main.css

@@ -33,6 +33,25 @@ html, body {
 
 /* ------------------------------------------------------------------------ */
 
+/* changes/additions to leaflet styles */
+.via-counter
+{
+	position:absolute;
+	top:-3px;
+	right:-6px;
+	width:16px;
+	border-radius:5px;
+	-moz-border-radius:5px;
+	-webkit-border-radius:5px;
+	background-color:#FFFFFF;
+	text-align:center;
+	vertical-align:middle;	
+	font-size:9px;
+	display:none;
+}
+
+/* ------------------------------------------------------------------------ */
+
 /* general styles for gui boxes */
 .box-wrapper
 {

WebContent/printing/printing.css

@@ -17,12 +17,34 @@ or see http://www.gnu.org/licenses/agpl.txt.
 
 /* OSRM CSS styles for printing*/
 
+/* ------------------------------------------------------------------------ */
+
 /* page setup */
 body
 {
 	margin: 8px;
 }
 
+/* ------------------------------------------------------------------------ */
+
+/* changes/additions to leaflet styles */
+.via-counter
+{
+	position:absolute;
+	top:-3px;
+	right:-6px;
+	width:16px;
+	border-radius:5px;
+	-moz-border-radius:5px;
+	-webkit-border-radius:5px;
+	background-color:#FFFFFF;
+	text-align:center;
+	vertical-align:middle;	
+	font-size:9px;
+	display:none;
+}
+
+/* ------------------------------------------------------------------------ */
 
 /* header area */
 #printing-header
@@ -57,6 +79,7 @@ div.label
 	margin:5px;
 }
 
+/* ------------------------------------------------------------------------ */
 
 /* description content */
 .description
@@ -125,6 +148,24 @@ div.label
 }
 }
 
+/* ------------------------------------------------------------------------ */
+
+/* iconic buttons */
+.iconic-button
+{
+	cursor:pointer;
+	width:16px;
+	height:16px;
+	background-repeat:no-repeat;
+	background-position:center;
+}
+
+#gui-printer-inactive
+{
+	cursor:default;
+}
+
+/* ------------------------------------------------------------------------ */
 
 /* utility styles */
 .quad
@@ -151,6 +192,42 @@ div.label
 }
 }
 
+/* ------------------------------------------------------------------------ */
+
+/* table */
+.full
+{
+	display:table;
+	width:100%;
+}
+.row
+{
+	display:table-row;
+}
+.left
+{
+	display:table-cell;
+	text-align:left;
+	vertical-align:top;
+}
+.right
+{
+	display:table-cell;
+	text-align:right;
+	vertical-align:top;
+}
+.center
+{
+	display:table-cell;
+	text-align:center;
+	vertical-align:top;
+}
+.stretch
+{
+	width:100%;	
+}
+
+/* ------------------------------------------------------------------------ */
 
 /* fonts */
 @media print {
@@ -197,54 +274,4 @@ div.label
 	font-size: 9px;
 	font-weight: normal;	
 }	
-}
-
-
-/* iconic buttons */
-.iconic-button
-{
-	cursor:pointer;
-	width:16px;
-	height:16px;
-	background-repeat:no-repeat;
-	background-position:center;
-}
-
-#gui-printer-inactive
-{
-	cursor:default;
-}
-
-
-/* table */
-.full
-{
-	display:table;
-	width:100%;
-}
-.row
-{
-	display:table-row;
-}
-.left
-{
-	display:table-cell;
-	text-align:left;
-	vertical-align:top;
-}
-.right
-{
-	display:table-cell;
-	text-align:right;
-	vertical-align:top;
-}
-.center
-{
-	display:table-cell;
-	text-align:center;
-	vertical-align:top;
-}
-.stretch
-{
-	width:100%;	
 }

WebContent/printing/printing.js

@@ -78,8 +78,11 @@ OSRM.drawMap = function(tile_server, bounds) {
 // manage makers
 OSRM.drawMarkers = function( markers ) {
 	OSRM.G.map.addLayer( new L.MouseMarker( markers[0].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-source']} ) );
-	for(var i=1, size=markers.length-1; i<size; i++)
+	for(var i=1, size=markers.length-1; i<size; i++) {
-		OSRM.G.map.addLayer( new L.MouseMarker( markers[i].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-via']} ) );
+		var via_marker = new L.MouseMarker( markers[i].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-via']} );
+		OSRM.G.map.addLayer( via_marker );
+		via_marker.setLabel(i);
+	}
 	OSRM.G.map.addLayer( new L.MouseMarker( markers[markers.length-1].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-target']} ) );
 };
 

WebContent/routing/OSRM.Routing.js

@@ -182,6 +182,8 @@ _snapRoute: function() {
 
  	OSRM.Geocoder.updateAddress(OSRM.C.SOURCE_LABEL);
  	OSRM.Geocoder.updateAddress(OSRM.C.TARGET_LABEL);
+
+	OSRM.G.markers.relabelViaMarkers();
 }
 
 };