leaflet 0.4 compliant markers and icons

WebContent/base/leaflet/L.LabelMarker.js

@@ -0,0 +1,54 @@
+/*
+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: LabelMarker
+// [marker class that allows for changing icons while dragging]
+
+
+// extended marker class
+L.LabelMarker = L.Marker.extend({
+	// change marker icon
+	changeIcon: function( icon ) {
+		this.options.icon = icon;
+
+		if (this._map) {
+			this._changeIcon();
+		}
+	},
+
+	// add/change marker label
+	setLabel: function( label ) {
+		if(this._icon) {
+			this._icon.lastChild.innerHTML=label;
+			this._icon.lastChild.style.display = "block";
+		}
+	},
+	
+	// actual icon changing routine
+	_changeIcon: function () {
+		var options = this.options,
+	    	map = this._map,
+	    	animation = (map.options.zoomAnimation && map.options.markerZoomAnimation),
+	    	classToAdd = animation ? 'leaflet-zoom-animated' : 'leaflet-zoom-hide';
+
+		if (this._icon) {
+			this._icon = options.icon.changeIcon( this._icon );
+			L.DomUtil.addClass(this._icon, classToAdd);
+			L.DomUtil.addClass(this._icon, 'leaflet-clickable');
+		}
+	}
+});

WebContent/base/leaflet/L.LabelMarkerIcon.js

@@ -0,0 +1,77 @@
+/*
+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: LabelMarkerIcon
+// [icon class with extra label and simple icon changing]
+
+
+// extended icon class 
+L.LabelMarkerIcon = L.Icon.extend({
+	// altered icon creation (with label)
+	_createImg: function (src) {
+		var el;
+		if (!L.Browser.ie6) {
+			el = document.createElement('div');
+			
+			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 + '")';
+		}
+		return el;
+	},
+
+	// non-destructive icon changing
+	changeIcon: function (el) {
+		return this._changeIcon('icon', el);
+	},
+
+	changeShadow: function (el) {
+		return this.options.shadowUrl ? this._changeIcon('shadow', el) : null;
+	},
+	
+	_changeIcon: function (name, el) {
+		var src = this._getIconUrl(name);
+		if (!src) {
+			if (name === 'icon') {
+				throw new Error("iconUrl not set in Icon options (see the docs).");
+			}
+			return null;
+		}		
+		
+		var img = this._changeImg(src, el);
+		this._setIconStyles(img, name);
+		
+		return img;
+	},	
+	
+	_changeImg: function (src, el) {
+		if (!L.Browser.ie6) {
+			el.firstChild.src = src;
+		} else {
+			el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")';
+		}
+		return el;
+	}
+});

WebContent/base/leaflet/L.MouseMarker.js

@@ -16,24 +16,25 @@ or see http://www.gnu.org/licenses/agpl.txt.
 */
 
 // Leaflet extension: MouseMarker
-// [marker class that propagates modifier and button presses in mouse click events and allows for changing icons]
+// [marker class that allows for changing icons while dragging]
 
 
 // extended marker class
 L.MouseMarker = L.Marker.extend({
-	initialize: function (latlng, options) {
+//	initialize: function (latlng, options) {
-		L.Marker.prototype.initialize.apply(this, arguments);
+//		L.Marker.prototype.initialize.apply(this, arguments);
-	},
+//	},
 	
-	switchIcon: function( icon ) {
+	// change marker icon
+	changeIcon: function( icon ) {
 		this.options.icon = icon;
 
 		if (this._map) {
 			this._changeIcon();
-			this._reset();
 		}
 	},
-	
+
+	// add/change marker label
 	setLabel: function( label ) {
 		if(this._icon) {
 			this._icon.lastChild.innerHTML=label;
@@ -41,32 +42,17 @@ L.MouseMarker = L.Marker.extend({
 		}
 	},
 	
+	// actual icon changing routine
 	_changeIcon: function () {
-		var options = this.options;
+		var options = this.options,
+	    	map = this._map,
+	    	animation = (map.options.zoomAnimation && map.options.markerZoomAnimation),
+	    	classToAdd = animation ? 'leaflet-zoom-animated' : 'leaflet-zoom-hide';
 
 		if (this._icon) {
-			this._icon = options.icon.switchIcon( this._icon );
+			this._icon = options.icon.changeIcon( this._icon );
-			if (this.options.clickable)									// TODO: only needed until Leaflet 0.4
+			L.DomUtil.addClass(this._icon, classToAdd);
-				this._icon.className += ' leaflet-clickable';
+			L.DomUtil.addClass(this._icon, 'leaflet-clickable');
 		}
-		
-		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; }
-		this.fire(e.type, {
-			altKey: e.altKey,
-			ctrlKey: e.ctrlKey,
-			shiftKey: e.shiftKey,
-			button: e.button
-		});
 	}
 });

WebContent/base/leaflet/L.SwitchableIcon.js

@@ -15,68 +15,13 @@ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
 or see http://www.gnu.org/licenses/agpl.txt.
 */
 
-// Leaflet extension: SwitchableIcon
+// Leaflet extension: MarkerIcon
-// [will be an extension of L.Icon in Leaflet 0.4, for now it is a copy with added functionality]
+// [icon class with extra label and simple icon changing]
 
 
-// icon class with functions to simply switch the icon images
+// extended icon class 
-L.SwitchableIcon = L.Class.extend({
+L.MarkerIcon = L.Icon.extend({
-	options: {
+	// altered icon creation (with label)
-		/*
-		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) {
@@ -97,27 +42,36 @@ L.SwitchableIcon = L.Class.extend({
 		return el;
 	},
 
-	// new functions start here
+	// non-destructive icon changing
-	switchIcon: function (el) {
+	changeIcon: function (el) {
-		return this._switchIcon('icon', el);
+		return this._changeIcon('icon', el);
 	},
 
-	switchShadow: function (el) {
+	changeShadow: function (el) {
-		return this.options.shadowUrl ? this._switchIcon('shadow', el) : null;
+		return this.options.shadowUrl ? this._changeIcon('shadow', el) : null;
 	},
-
+	
-	_switchIcon: function (name, el) {
+	_changeIcon: function (name, el) {
-		var img = this._switchImg(this.options[name + 'Url'], el);
+		var src = this._getIconUrl(name);
+		if (!src) {
+			if (name === 'icon') {
+				throw new Error("iconUrl not set in Icon options (see the docs).");
+			}
+			return null;
+		}		
+		
+		var img = this._changeImg(src, el);
 		this._setIconStyles(img, name);
+		
 		return img;
 	},	
 	
-	_switchImg: function (src, el) {
+	_changeImg: function (src, el) {
 		if (!L.Browser.ie6) {
 			el.firstChild.src = src;
 		} else {
 			el.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '")';
 		}
 		return el;
-	}	
+	}
 });

WebContent/base/osrm/OSRM.Marker.js

@@ -24,7 +24,7 @@ OSRM.Marker = function( label, style, position ) {
 	this.label = label ? label : "marker";
 	this.position = position ? position : new L.LatLng(0,0);
 
-	this.marker = new L.MouseMarker( this.position, style );
+	this.marker = new L.LabelMarker( this.position, style );
 	this.marker.parent = this;
 	
 	this.shown = false;
@@ -101,7 +101,7 @@ onDrag: function(e) {
 onDragStart: function(e) {
 	OSRM.GUI.deactivateTooltip( "DRAGGING" );	
 	OSRM.G.dragging = true;
-	this.switchIcon(this.options.dragicon);
+	this.changeIcon(this.options.dragicon);
 	
 	// store id of dragged marker
 	for( var i=0; i<OSRM.G.markers.route.length; i++)
@@ -119,7 +119,7 @@ onDragStart: function(e) {
 },
 onDragEnd: function(e) {
 	OSRM.G.dragging = false;
-	this.switchIcon(this.options.baseicon);
+	this.changeIcon(this.options.baseicon);
 	
 	this.parent.setPosition( e.target.getLatLng() );	
 	if (OSRM.G.route.isShown()) {

WebContent/main.html

@@ -38,8 +38,8 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <script src="leaflet/leaflet-src.js" type="text/javascript"></script>
 <script src="base/leaflet/L.Bugfixes.js" type="text/javascript"></script>
 <script src="base/leaflet/L.Control.QueryableLayers.js" type="text/javascript"></script>
-<script src="base/leaflet/L.MouseMarker.js" type="text/javascript"></script>
+<script src="base/leaflet/L.LabelMarker.js" type="text/javascript"></script>
-<script src="base/leaflet/L.SwitchableIcon.js" type="text/javascript"></script>
+<script src="base/leaflet/L.LabelMarkerIcon.js" type="text/javascript"></script>
 <script src="base/leaflet/L.BingLayer.js" type="text/javascript"></script>
 
 <script src="OSRM.base.js" type="text/javascript"></script>

WebContent/main.js

@@ -116,18 +116,22 @@ OSRM.prefetchIcons = function() {
 						{id:'marker-highlight-drag',			image_id:'marker-highlight-drag'}
 						//{id:'marker-drag',						image_id:'marker-drag'}				// special treatment because of size
 	              ];
-
+	
+	var LabelMarkerIcon = L.LabelMarkerIcon.extend({
+		options: {
+			shadowUrl: OSRM.G.images["marker-shadow"].getAttribute("src"),
+			iconSize:     [25, 41],
+			shadowSize:   [41, 41],
+			iconAnchor:   [13, 41],
+			shadowAnchor: [13, 41],
+			popupAnchor:  [0, -33]
+		} });
 	for(var i=0; i<icon_list.length; i++) {
-		var icon = {
+		OSRM.G.icons[icon_list[i].id] = new LabelMarkerIcon({iconUrl: OSRM.G.images[icon_list[i].image_id].getAttribute("src")});
-				iconUrl: OSRM.G.images[icon_list[i].image_id].getAttribute("src"), iconSize: new L.Point(25, 41), iconAnchor: new L.Point(13, 41),
-				shadowUrl: OSRM.G.images["marker-shadow"].getAttribute("src"), shadowSize: new L.Point(41, 41),
-				popupAnchor: new L.Point(0, -33)
-			};
-		OSRM.G.icons[icon_list[i].id] = new L.SwitchableIcon(icon);
 	}
 	
 	// special values for drag marker
-	OSRM.G.icons['marker-drag'] = new L.SwitchableIcon( {iconUrl: OSRM.G.images["marker-drag"].getAttribute("src"), iconSize: new L.Point(18, 18) } );
+	OSRM.G.icons['marker-drag'] = new L.LabelMarkerIcon( {iconUrl: OSRM.G.images["marker-drag"].getAttribute("src"), iconSize: new L.Point(18, 18) } );
 };
 
 

WebContent/printing/printing.html

@@ -38,8 +38,8 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <!-- scripts -->
 <script src="../leaflet/leaflet-src.js" type="text/javascript"></script>
 <script src="printing.js" type="text/javascript"></script>
-<script src="../base/leaflet/L.MouseMarker.js" type="text/javascript"></script>
+<script src="../base/leaflet/L.LabelMarker.js" type="text/javascript"></script>
-<script src="../base/leaflet/L.SwitchableIcon.js" type="text/javascript"></script>
+<script src="../base/leaflet/L.LabelMarkerIcon.js" type="text/javascript"></script>
 <script src="../base/leaflet/L.BingLayer.js" type="text/javascript"></script>
 <script src="../base/osrm/OSRM.MapView.js" type="text/javascript"></script>
 </head>

WebContent/printing/printing.js

@@ -38,16 +38,19 @@ OSRM.prefetchIcons = function(images_list) {
 						{id:'marker-via',						image_id:'marker-via'},
 						{id:'marker-highlight',					image_id:'marker-highlight'}
 		              ];
-
+	
+	var LabelMarkerIcon = L.LabelMarkerIcon.extend({
+		options: {
+			shadowUrl: OSRM.G.images["marker-shadow"].getAttribute("src"),
+			iconSize:     [25, 41],
+			shadowSize:   [41, 41],
+			iconAnchor:   [13, 41],
+			shadowAnchor: [13, 41],
+			popupAnchor:  [0, -33]
+		} });
 	for(var i=0; i<icon_list.length; i++) {
-		var icon = {
+		OSRM.G.icons[icon_list[i].id] = new LabelMarkerIcon({iconUrl: OSRM.G.images[icon_list[i].image_id].getAttribute("src")});
-				// absolute directories used for compatibility with legacy IE (quirks mode)
+	}	
-				iconUrl: images_list[icon_list[i].image_id].src, iconSize: new L.Point(25, 41), iconAnchor: new L.Point(13, 41),
-				shadowUrl: images_list["marker-shadow"].src, shadowSize: new L.Point(41, 41),
-				popupAnchor: new L.Point(0, -33)
-			};
-		OSRM.G.icons[icon_list[i].id] = new L.SwitchableIcon(icon);
-	}
 };
 
 
@@ -79,13 +82,13 @@ 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']} ) );
+	OSRM.G.map.addLayer( new L.LabelMarker( markers[0].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-source']} ) );
 	for(var i=1, size=markers.length-1; i<size; i++) {
-		var via_marker = new L.MouseMarker( markers[i].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-via']} );
+		var via_marker = new L.LabelMarker( 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']} ) );
+	OSRM.G.map.addLayer( new L.LabelMarker( markers[markers.length-1].getPosition(), {draggable:false,clickable:false,icon:OSRM.G.icons['marker-target']} ) );
 };