added icons that can change their image,

added image change while dragging markers,
increased (invisible) size of drag marker,
fixed issues with drag marker and highlight marker overlapping

WebContent/L.MouseMarker.js

@@ -16,8 +16,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
 */
 
 // Leaflet extension: MouseMarker
-// [marker class that propagates modifier and button presses]
-// [currently deactivated: propagation mousemove events]
+// [marker class that propagates modifier and button presses in mouse click events and allows for changing icons]
 
 
 // extended marker class
@@ -25,21 +24,33 @@ L.MouseMarker = L.Marker.extend({
 	initialize: function (latlng, options) {
 		L.Marker.prototype.initialize.apply(this, arguments);
 	},
-
-//	_initInteraction: function (){
-//		L.Marker.prototype._initInteraction.apply(this, arguments);
-// 		if (this.options.clickable)
-//			L.DomEvent.addListener(this._icon, 'mousemove', this._fireMouseEvent, this);
-//	},
-
-//	_fireMouseEvent: function (e) {
-//		this.fire(e.type, {
-//			latlng: this._map.mouseEventToLatLng(e),
-//			layerPoint: this._map.mouseEventToLayerPoint(e)
-//		});		
-//		L.DomEvent.stopPropagation(e);
-//	},
 	
+	switchIcon: function( icon ) {
+		this.options.icon = icon;
+
+		if (this._map) {
+			this._changeIcon();
+			this._reset();
+		}
+	},
+	
+	_changeIcon: function () {
+		var options = this.options;
+
+		if (this._icon) {
+			this._icon = options.icon.switchIcon( this._icon );
+			this._icon.title = options.title;
+		}
+		
+		var panes = this._map._panes;
+		
+		if (this._shadow)
+			panes.shadowPane.removeChild(this._shadow);
+		this._shadow = options.icon.createShadow();
+		if (this._shadow)
+			panes.shadowPane.appendChild(this._shadow);
+	},	
+
 	_onMouseClick: function (e) {
 		L.DomEvent.stopPropagation(e);
 		if (this.dragging && this.dragging.moved()) { return; }

WebContent/L.SwitchableIcon.js

@@ -0,0 +1,115 @@
+/*
+This program is free software; you can redistribute it and/or modify
+it under the terms of the GNU AFFERO General Public License as published by
+the Free Software Foundation; either version 3 of the License, or
+any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program; if not, write to the Free Software
+Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
+or see http://www.gnu.org/licenses/agpl.txt.
+*/
+
+// Leaflet extension: SwitchableIcon
+// [will be an extension of L.Icon in Leaflet 0.4, for now it is a copy with added functionality]
+
+
+// icon class with functions to simply switch the icon images
+L.SwitchableIcon = L.Class.extend({
+	options: {
+		/*
+		iconUrl: (String) (required)
+		iconSize: (Point) (can be set through CSS)
+		iconAnchor: (Point) (centered by default if size is specified, can be set in CSS with negative margins)
+		popupAnchor: (Point) (if not specified, popup opens in the anchor point)
+		shadowUrl: (Point) (no shadow by default)
+		shadowSize: (Point)
+		*/
+		className: ''
+	},
+
+	initialize: function (options) {
+		L.Util.setOptions(this, options);
+	},
+
+	createIcon: function () {
+		return this._createIcon('icon');
+	},
+
+	createShadow: function () {
+		return this.options.shadowUrl ? this._createIcon('shadow') : null;
+	},
+
+	_createIcon: function (name) {
+		var img = this._createImg(this.options[name + 'Url']);
+		this._setIconStyles(img, name);
+		return img;
+	},
+
+	_setIconStyles: function (img, name) {
+		var options = this.options,
+			size = options[name + 'Size'],
+			anchor = options.iconAnchor;
+
+		if (!anchor && size) {
+			anchor = size.divideBy(2, true);
+		}
+
+		if (name === 'shadow' && anchor && options.shadowOffset) {
+			anchor._add(options.shadowOffset);
+		}
+
+		img.className = 'leaflet-marker-' + name + ' ' + options.className;
+
+		if (anchor) {
+			img.style.marginLeft = (-anchor.x) + 'px';
+			img.style.marginTop  = (-anchor.y) + 'px';
+		}
+
+		if (size) {
+			img.style.width  = size.x + 'px';
+			img.style.height = size.y + 'px';
+		}
+	},
+
+	_createImg: function (src) {
+		var el;
+		if (!L.Browser.ie6) {
+			el = document.createElement('img');
+			el.src = src;
+		} else {
+			el = document.createElement('div');
+			el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")';
+		}
+		return el;
+	},
+
+	// new functions start here
+	switchIcon: function (el) {
+		return this._switchIcon('icon', el);
+	},
+
+	switchShadow: function (el) {
+		return this.options.shadowUrl ? this._switchIcon('shadow', el) : null;
+	},
+
+	_switchIcon: function (name, el) {
+		var img = this._switchImg(this.options[name + 'Url'], el);
+		this._setIconStyles(img, name);
+		return img;
+	},	
+	
+	_switchImg: function (src, el) {
+		if (!L.Browser.ie6) {
+			el.src = src;
+		} else {
+			el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")';
+		}
+		return el;
+	}	
+});

WebContent/OSRM.Markers.js

@@ -69,6 +69,7 @@ toString: function() {
 
 // route marker class (draggable, invokes route drawing routines) 
 OSRM.RouteMarker = function ( label, style, position ) {
+	style.baseicon = style.icon;
 	OSRM.RouteMarker.prototype.base.constructor.apply( this, arguments );
 	this.label = label ? label : "route_marker";
 
@@ -98,6 +99,7 @@ onDrag: function(e) {
 },
 onDragStart: function(e) {
 	OSRM.G.dragging = true;
+	this.switchIcon(this.options.dragicon);
 	
 	// store id of dragged marker
 	for( var i=0; i<OSRM.G.markers.route.length; i++)
@@ -113,6 +115,8 @@ onDragStart: function(e) {
 },
 onDragEnd: function(e) {
 	OSRM.G.dragging = false;
+	this.switchIcon(this.options.baseicon);
+	
 	this.parent.setPosition( e.target.getLatLng() );	
 	OSRM.Routing.getRoute();
 	if (OSRM.G.route.isShown()) {
@@ -146,7 +150,7 @@ onDragStart: function(e) {
 	OSRM.RouteMarker.prototype.onDragStart.call(this,e);
 },
 onDragEnd: function(e) {
-	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] = new OSRM.RouteMarker(OSRM.C.VIA_LABEL, {draggable:true,icon:OSRM.G.icons['marker-via'],dragicon:OSRM.G.icons['marker-via-drag']}, e.target.getLatLng() );
 	OSRM.G.markers.route[OSRM.G.dragid].show();
 	
 	OSRM.RouteMarker.prototype.onDragEnd.call(this,e);
@@ -162,8 +166,8 @@ toString: function() {
 // [this holds the vital information of the route]
 OSRM.Markers = function() {
 	this.route = new Array();
-	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']});;
+	this.highlight = new OSRM.DragMarker("highlight", {draggable:true,icon:OSRM.G.icons['marker-highlight'],dragicon:OSRM.G.icons['marker-highlight-drag']});;
+	this.dragger = new OSRM.DragMarker("drag", {draggable:true,icon:OSRM.G.icons['marker-drag'],dragicon:OSRM.G.icons['marker-drag']});;
 };
 OSRM.extend( OSRM.Markers,{
 removeAll: function() {
@@ -182,7 +186,7 @@ setSource: function(position) {
 	if( this.route[0] && this.route[0].label == OSRM.C.SOURCE_LABEL )
 		this.route[0].setPosition(position);
 	else
-		this.route.splice(0,0, new OSRM.RouteMarker(OSRM.C.SOURCE_LABEL, {draggable:true,icon:OSRM.G.icons['marker-source']}, position));
+		this.route.splice(0,0, new OSRM.RouteMarker(OSRM.C.SOURCE_LABEL, {draggable:true,icon:OSRM.G.icons['marker-source'],dragicon:OSRM.G.icons['marker-source-drag']}, position));
 	return 0;	
 },
 setTarget: function(position) {
@@ -190,7 +194,7 @@ setTarget: function(position) {
 	if( this.route[this.route.length-1] && this.route[ this.route.length-1 ].label == OSRM.C.TARGET_LABEL )
 		this.route[this.route.length-1].setPosition(position);
 	else
-		this.route.splice( this.route.length,0, new OSRM.RouteMarker(OSRM.C.TARGET_LABEL, {draggable:true,icon:OSRM.G.icons['marker-target']}, position));
+		this.route.splice( this.route.length,0, new OSRM.RouteMarker(OSRM.C.TARGET_LABEL, {draggable:true,icon:OSRM.G.icons['marker-target'],dragicon:OSRM.G.icons['marker-target-drag']}, position));
 	return this.route.length-1;
 },
 setVia: function(id, position) {
@@ -198,7 +202,7 @@ setVia: function(id, position) {
 	if( this.route.length<2 || id > this.route.length-2 )
 		return -1;
 	
-	this.route.splice(id+1,0, new OSRM.RouteMarker(OSRM.C.VIA_LABEL, {draggable:true,icon:OSRM.G.icons['marker-via']}, position));
+	this.route.splice(id+1,0, new OSRM.RouteMarker(OSRM.C.VIA_LABEL, {draggable:true,icon:OSRM.G.icons['marker-via'],dragicon:OSRM.G.icons['marker-via-drag']}, position));
 	return id+1;
 },
 removeMarker: function(id) {

WebContent/OSRM.Via.js

@@ -91,7 +91,7 @@ drawDragMarker: function(event) {
 		var dist = OSRM.G.map.project(mouse).distanceTo(OSRM.G.map.project(position));
 		if( dist < 20 )
 			min_dist = 1000;
-	}	
+	}
 	
 	// check whether mouse is over another marker
 	var pos = OSRM.G.map.layerPointToContainerPoint(event.layerPoint);
@@ -103,6 +103,14 @@ drawDragMarker: function(event) {
 			min_dist = 1000;
 	}
 	
+	// special care for highlight marker
+	if( OSRM.G.markers.highlight.isShown() ) {
+		if( OSRM.G.map.project(mouse).distanceTo(OSRM.G.map.project( OSRM.G.markers.highlight.getPosition() ) ) < 20 )
+			min_dist = 1000;
+		else if( obj == OSRM.G.markers.highlight.marker._icon)
+			min_dist = 1000;
+	}
+	
 	if( min_dist < 400) {
 		OSRM.G.markers.dragger.setPosition( OSRM.G.map.layerPointToLatLng(minpoint) );
 		OSRM.G.markers.dragger.show();

WebContent/main.html

@@ -42,6 +42,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <script src="L.Bugfixes.js" type="text/javascript"></script>
 <script src="L.DashedPolyline.js" type="text/javascript"></script>
 <script src="L.MouseMarker.js" type="text/javascript"></script>
+<script src="L.SwitchableIcon.js" type="text/javascript"></script>
 
 <script src="OSRM.base.js" type="text/javascript"></script>
 <script src="OSRM.config.js" type="text/javascript"></script>

WebContent/main.js

@@ -43,6 +43,11 @@ OSRM.prefetchImages = function() {
 	              	'images/marker-target.png',
 	              	'images/marker-via.png',
 	              	'images/marker-highlight.png',
+	              	'images/marker-source-drag.png',
+	              	'images/marker-target-drag.png',
+	              	'images/marker-via-drag.png',
+	              	'images/marker-highlight-drag.png',
+	              	'images/marker-drag.png',
 	              	'images/cancel.png',
 	              	'images/cancel_active.png',
 	              	'images/cancel_hover.png',
@@ -65,17 +70,24 @@ OSRM.prefetchIcons = function() {
 	              	'marker-target',
 	              	'marker-via',
 	              	'marker-highlight',
+	              	'marker-source-drag',
+	              	'marker-target-drag',
+	              	'marker-via-drag',
+	              	'marker-highlight-drag',
 	              	'marker-drag'
 	              ];
 
-	for(var i=0; i<images.length; i++)
-		OSRM.G.icons[images[i]] = new L.Icon('images/'+images[i]+'.png');
+	for(var i=0; i<images.length; i++) {
+		var icon = {
+				iconUrl: 'images/'+images[i]+'.png', iconSize: new L.Point(25, 41), iconAnchor: new L.Point(13, 41),
+				shadowUrl: L.ROOT_URL + 'images/marker-shadow.png',	shadowSize: new L.Point(41, 41),
+				popupAnchor: new L.Point(0, -33)
+			};
+		OSRM.G.icons[images[i]] = new L.SwitchableIcon(icon);
+	}
 	
-	// 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);
+	// special values for drag marker
+	OSRM.G.icons['marker-drag'] = new L.SwitchableIcon( {iconUrl: 'images/marker-drag.png', iconSize: new L.Point(18, 18) } );	
 };