added new buttons for map zooming and requesting important locations

WebContent/base/OSRM.Map.js

@@ -52,20 +52,23 @@ init: function() {
 	    zoom: OSRM.DEFAULTS.ONLOAD_ZOOM_LEVEL,
 	    layers: [base_maps[tile_servers[0].display_name]],	    
 	    zoomAnimation: false,								// animations have to be inactive during initialization (leaflet issue #918)
-	    fadeAnimation: false
+	    fadeAnimation: false,
+	    zoomControl: false									// use OSRM zoom buttons
 	});
 
-//	// add locations control
+	// add locations control
-//	var locationsControl = new L.Control.Locations();
+	var locationsControl = new OSRM.Control.Locations();
-//	OSRM.G.map.addControl(locationsControl);
+	OSRM.G.map.addControl(locationsControl);
 	
 	// add layer control
 	var layerControl = new L.Control.QueryableLayers(base_maps, {});
 	OSRM.G.map.addLayerControl(layerControl);	
 
-    // move zoom markers
+	// add zoom control
-	OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.G.main_handle.boxWidth()+10)+"px";
+	var zoomControl = new OSRM.Control.Zoom();
-	OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px";
+	OSRM.G.map.addControl(zoomControl);
+	zoomControl.show();	
+
 	
 	// add scale control
 	OSRM.G.map.scaleControl = new L.Control.Scale();

WebContent/base/leaflet/L.Control.Locations.js

@@ -1,65 +0,0 @@
-/*
-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.
-*/
-
-// locations control
-// [buttons to important locations - zoom on route, zoom on user]
-L.Control.Locations = L.Control.extend({
-	options: {
-		position: 'topright'
-	},
-
-	onAdd: function (map) {
-		var className = 'leaflet-control-locations',
-		    container = L.DomUtil.create('div', className);
-
-		this._createButton('Goto Location', className + '-user', container, OSRM.GUI.zoomOnUser, map);
-		this._createButton('Goto Route', className + '-route', container, OSRM.GUI.zoomOnRoute, map);
-
-		return container;
-	},
-
-	_createButton: function (title, className, container, fn, context) {
-		var link = L.DomUtil.create('a', className, container);
-		link.id = className;
-		link.title = title;
-
-		L.DomEvent
-			.on(link, 'click', L.DomEvent.stopPropagation)
-			.on(link, 'click', L.DomEvent.preventDefault)
-			.on(link, 'click', fn, context)
-			.on(link, 'mousedown', function() { this.className = this.id + "-active"; } )
-			.on(link, 'mouseup', function() { this.className = this.id + ""; } )
-			.on(link, 'dblclick', L.DomEvent.stopPropagation);
-
-		return link;
-	}
-});
-
-L.Map.mergeOptions({
-	locationsControl: false
-});
-
-L.Map.addInitHook(function () {
-	if (this.options.locationsControl) {
-		this.locationsControl = new L.Control.Locations();
-		this.addControl(this.locationsControl);
-	}
-});
-
-L.control.locations = function (options) {
-	return new L.Control.Locations(options);
-};

WebContent/base/leaflet/L.Control.QueryableLayers.js

@@ -16,10 +16,10 @@ or see http://www.gnu.org/licenses/agpl.txt.
 */
 
 // queryable Layers control
-// [simply Control.Layers extended by query functions]
+// [extension of Layers.Control with OSRM styling and additional query methods]
 L.Control.QueryableLayers = L.Control.Layers.extend({
 	
-// new query functionality
+// query functionality
 getActiveLayerName: function () {
 	var i, input, obj,
 	inputs = this._form.getElementsByTagName('input'),
@@ -45,5 +45,15 @@ getActiveLayer: function () {
 			return obj.layer;
 		}
 	}
+},
+
+
+// overwrite Control.Layers methods to get OSRM styling 
+_expand: function () {
+	L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
+},
+_collapse: function () {
+	this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
 }
+
 });

WebContent/base/leaflet/L.Control.Zoom.js

@@ -1,63 +0,0 @@
-/*
-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.
-*/
-
-// zoom control
-// [control moves with sidebar and changes color when clicked]
-L.Control.Zoom = L.Control.extend({
-	options: {
-		position: 'topleft'
-	},
-
-	onAdd: function (map) {
-		var className = 'leaflet-control-zoom',
-		    container = L.DomUtil.create('div', className);
-
-		this._createButton('Zoom in', className + '-in', container, map.zoomIn, map);
-		this._createButton('Zoom out', className + '-out', container, map.zoomOut, map);
-
-		return container;
-	},
-
-	_createButton: function (title, className, container, fn, context) {
-		var link = L.DomUtil.create('a', className, container);
-		link.href = '#';
-		link.title = title;
-
-		L.DomEvent
-			.on(link, 'click', L.DomEvent.stopPropagation)
-			.on(link, 'click', L.DomEvent.preventDefault)
-			.on(link, 'click', fn, context)
-			.on(link, 'dblclick', L.DomEvent.stopPropagation);
-
-		return link;
-	}
-});
-
-L.Map.mergeOptions({
-	zoomControl: true
-});
-
-L.Map.addInitHook(function () {
-	if (this.options.zoomControl) {
-		this.zoomControl = new L.Control.Zoom();
-		this.addControl(this.zoomControl);
-	}
-});
-
-L.control.zoom = function (options) {
-	return new L.Control.Zoom(options);
-};

WebContent/base/osrm/OSRM.Control.Locations.js

@@ -0,0 +1,65 @@
+/*
+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.
+*/
+
+// locations control
+// [navigation buttons for important locations - zoom on route, zoom on user]
+OSRM.Control = OSRM.Control || {};
+OSRM.Control.Locations = L.Control.extend({
+	options: {
+		position: 'topright'
+	},
+	
+	onAdd: function (map) {
+		// unique control
+		if( document.getElementById('gui-control-locations') )
+			return document.getElementById('gui-control-locations');
+		
+		// create wrapper
+		var container = L.DomUtil.create('div', 'box-wrapper gui-control-wrapper');
+		container.id = 'gui-control-locations';
+		L.DomEvent.disableClickPropagation(container);
+		
+		// create buttons
+		this._createButton('gui-locations-user', container, OSRM.GUI.zoomOnUser, map, navigator.geolocation );
+		this._createButton('gui-locations-route', container, OSRM.GUI.zoomOnRoute, map, false);
+
+		return container;
+	},
+
+	_createButton: function (id, container, fn, context, isActive) {
+		var inactive = (isActive == false) ? "-inactive" : "";
+		var classNames = "box-content" + " " + "gui-control"+inactive + " " + id+inactive;
+		var link = L.DomUtil.create('a', classNames, container);
+		link.id = id;
+		link.title = id;
+
+		L.DomEvent
+			.on(link, 'click', L.DomEvent.stopPropagation)
+			.on(link, 'click', L.DomEvent.preventDefault)
+			.on(link, 'click', fn, context)
+			.on(link, 'dblclick', L.DomEvent.stopPropagation);
+
+		return link;
+	},
+	
+	activate: function (id) {
+		document.getElementById(id).className = "box-content gui-control " + id;		
+	},
+	deactivate: function (id) {
+		document.getElementById(id).className = "box-content gui-control-inactive " + id + "-inactive";		
+	}
+});

WebContent/base/osrm/OSRM.Control.Zoom.js

@@ -0,0 +1,73 @@
+/*
+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.
+*/
+
+// zoom control
+// [modified zoom control with ids, prevention of click propagation, show/hide with respect to main OSRM window]
+OSRM.Control = OSRM.Control || {};
+OSRM.Control.Zoom = L.Control.extend({
+	options: {
+		position: 'topleft'
+	},
+
+	onAdd: function (map) {
+		// unique control
+		if( document.getElementById('gui-control-zoom') )
+			return document.getElementById('gui-control-zoom');
+		
+		// create wrapper
+		var container = L.DomUtil.create('div', 'box-wrapper gui-control-wrapper');
+		container.id = 'gui-control-zoom';
+		L.DomEvent.disableClickPropagation(container);
+		
+		// create buttons
+		this._createButton('gui-zoom-in', container, map.zoomIn, map, true);
+		this._createButton('gui-zoom-out', container, map.zoomOut, map, true);
+
+		return container;
+	},
+
+	_createButton: function (id, container, fn, context, isActive) {
+		var inactive = (isActive == false) ? "-inactive" : "";
+		var classNames = "box-content" + " " + "gui-control"+inactive + " " + id+inactive;		
+		var link = L.DomUtil.create('a', classNames, container);
+		link.id = id;
+		link.title = id;
+
+		L.DomEvent
+			.on(link, 'click', L.DomEvent.stopPropagation)
+			.on(link, 'click', L.DomEvent.preventDefault)
+			.on(link, 'click', fn, context)
+			.on(link, 'dblclick', L.DomEvent.stopPropagation);
+
+		return link;
+	},
+	
+	hide: function() {
+		var zoom_controls = document.getElementById("gui-control-zoom");
+		if( zoom_controls )
+			zoom_controls.style.visibility="hidden";		
+	},
+	
+	show: function() {
+		var zoom_controls = document.getElementById("gui-control-zoom");
+		if( zoom_controls ) {
+			zoom_controls.style.top = "5px";
+			zoom_controls.style.left = ( OSRM.G.main_handle.boxVisible() == true ? (OSRM.G.main_handle.boxWidth()+10) : "30") + "px";
+			zoom_controls.style.visibility="visible";
+		}		
+	}
+});

WebContent/gui/OSRM.MainGUI.js

@@ -71,6 +71,10 @@ setLabels: function() {
 	document.getElementById('config-handle-icon').title = OSRM.loc("GUI_CONFIGURATION");
 	document.getElementById('mapping-handle-icon').title = OSRM.loc("GUI_MAPPING_TOOLS");
 	document.getElementById('main-handle-icon').title = OSRM.loc("GUI_MAIN_WINDOW");
+	document.getElementById('gui-locations-route').title = OSRM.loc("GUI_ZOOM_ON_ROUTE");
+	document.getElementById('gui-locations-user').title = OSRM.loc("GUI_ZOOM_ON_USER");
+	document.getElementById('gui-zoom-in').title = OSRM.loc("GUI_ZOOM_IN");
+	document.getElementById('gui-zoom-out').title = OSRM.loc("GUI_ZOOM_OUT");	
 	OSRM.GUI.setDistanceFormatsLanguage();
 	OSRM.GUI.setRoutingEnginesLanguage();	
 },
@@ -83,17 +87,11 @@ clearResults: function() {
 
 // reposition and hide zoom controls before main box animation
 beforeMainTransition: function() {
-	var zoom_controls = OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom');
+	OSRM.Control.Zoom.prototype.hide();
-	if( zoom_controls.length > 0)
-		zoom_controls[0].style.visibility="hidden";
 },
 // show zoom controls after main box animation
 afterMainTransition: function() {
-	var zoom_controls = OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom');
+	OSRM.Control.Zoom.prototype.show();
-	if( zoom_controls.length > 0) {
-		zoom_controls[0].style.left = ( OSRM.G.main_handle.boxVisible() == true ? (OSRM.G.main_handle.boxWidth()+10) : "30") + "px";
-		zoom_controls[0].style.visibility="visible";
-	}
 },
 
 // distance format routines

WebContent/gui/OSRM.RoutingGUI.js

@@ -46,13 +46,11 @@ init: function() {
 // toggle GUI features that need a route to work
 activateRouteFeatures: function() {
 	OSRM.Printing.activate();
-//	document.getElementById("gui-zoom").className = "button";
+	OSRM.Control.Locations.prototype.activate('gui-locations-route');
-//	document.getElementById('leaflet-control-locations-route').className = "leaflet-control-locations-route";
 },
 deactivateRouteFeatures: function() {
 	OSRM.Printing.deactivate();
-//	document.getElementById("gui-zoom").className = "button-inactive";
+	OSRM.Control.Locations.prototype.deactivate('gui-locations-route');
-//	document.getElementById('leaflet-control-locations-route').className = "leaflet-control-locations-route-inactive";	
 },
 
 // click: button "reset"

WebContent/main.css

@@ -34,116 +34,6 @@ 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;
-}
-/*
-
-.leaflet-control-zoom {
-	border-radius:8px;
-	-moz-border-radius:8px;
-	-webkit-border-radius:8px;
-	background-color:rgba(0, 0, 0, 0.25);
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3f000000, endColorstr=#3f000000);
-	padding:0px;
-}
-.leaflet-control-zoom a {
-	background-color: #ffffff;
-	background-color: rgba(255,255,255,1);
-	border-radius:4px;
-	-moz-border-radius:4px;
-	-webkit-border-radius:4px;	
-	margin:5px;
-	padding:2px;
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	display: block;
-	width: 19px;
-	height: 19px;
-}
-.leaflet-control-zoom a:hover {
-	background-color: #CCCCCC;
-}
-.leaflet-touch .leaflet-control-zoom a {
-	width: 27px;
-	height: 27px;
-}
-
-
-
-.leaflet-control-locations {
-	border-radius:10px;
-	-moz-border-radius:10px;
-	-webkit-border-radius:10px;
-	background-color:rgba(0, 0, 0, 0.25);
-	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3f000000, endColorstr=#3f000000);
-	padding:0px;	
-}
-.leaflet-control-locations a {
-	float:left;
-	background-color: #ffffff;
-	background-color: rgba(255,255,255,1);
-	border-radius:8px;
-	-moz-border-radius:8px;
-	-webkit-border-radius:8px;	
-	margin:5px;
-	padding:2px;
-	background-position: 50% 50%;
-	background-repeat: no-repeat;
-	display: block;
-	width: 26px;
-	height: 26px;	
-}
-.leaflet-control-locations a:hover {
-	background-color: #CCCCCC;
-}
-.leaflet-touch .leaflet-control-locations a {
-	width: 32px;
-	height: 32px;
-}
-.leaflet-control-zoom-in {
-	background-image: url(images/zoom-in.png);
-	margin-bottom: 5px;
-	}
-.leaflet-control-zoom-out {
-	background-image: url(images/zoom-out.png);
-	}
-
-.leaflet-control-locations-user {
-	background-image:url('images/control_zoom_user.png');
-}
-.leaflet-control-locations-user-active {
-	background-image:url('images/control_zoom_route.png');
-	background-color: rgba(255,255,0,1);
-}
-.leaflet-control-locations-user-inactive {
-	background-image:url('images/control_zoom_route.png');
-	background-color: rgba(0,255,255,1);
-}
-
-.leaflet-control-locations-route {
-	background-image:url('images/control_zoom_route.png');
-}
-.leaflet-control-locations-route-active {
-	background-image:url('images/control_zoom_user.png');
-}
-.leaflet-control-locations-route-inactive {
-	background-image:url('images/control_zoom_user.png');
-}
-
-
 .leaflet-control-layers {
 	box-shadow: 0 0px 0px;	
 	border-radius:10px;
@@ -162,17 +52,31 @@ html, body {
 	-moz-border-radius:8px;
 	-webkit-border-radius:8px;	
 	margin:5px;
-	padding:2px;
+	padding:5px;
 	background-position: 50% 50%;
 	background-repeat: no-repeat;
 	display: block;
 	width: 26px;
 	height: 26px;	
-	background-image:url('images/control_layers.png');
 }
-.leaflet-control-layers a:hover {
+
-	background-color: #CCCCCC;
+
-}*/
+/* counter for leaflet markers*/
+.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;
+}
 
 /* ------------------------------------------------------------------------ */
 
@@ -632,6 +536,59 @@ html, body {
 
 /* ------------------------------------------------------------------------ */
 
+/* map buttons */
+.gui-control-wrapper {
+	position:relative;
+}
+.gui-control {
+	cursor:pointer;
+	position:relative;	
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+}
+.gui-control-inactive {
+	cursor:default;
+	position:relative;	
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	background-color: #EFEFEF;	
+}
+
+
+/* zoom buttons */
+.gui-zoom-in,
+.gui-zoom-out {
+	width: 15px;
+	height: 15px;	
+}
+.leaflet-touch .gui-zoom-in,
+.leaflet-touch .gui-zoom-out {
+	width: 23px;
+	height: 23px;
+}
+
+
+/* locations buttons */
+.gui-locations-user,
+.gui-locations-route,
+.gui-locations-user-inactive,
+.gui-locations-route-inactive {
+	float:left;
+	width: 26px;
+	height: 26px;	
+}
+.leaflet-touch .gui-locations-user,
+.leaflet-touch .gui-locations-route,
+.leaflet-touch .gui-locations-user-inactive,
+.leaflet-touch .gui-locations-route-inactive {
+	width: 32px;
+	height: 32px;
+}
+
+/* ------------------------------------------------------------------------ */
+
 /* buttons */
 .button
 {

WebContent/main.html

@@ -37,7 +37,6 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <!-- scripts -->
 <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.Locations.js" type="text/javascript"></script> -->
 <script src="base/leaflet/L.Control.QueryableLayers.js" type="text/javascript"></script>
 <script src="base/leaflet/L.LabelMarker.js" type="text/javascript"></script>
 <script src="base/leaflet/L.LabelMarkerIcon.js" type="text/javascript"></script>
@@ -51,6 +50,8 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <script src="main.js" type="text/javascript"></script>
 <!-- <script defer="defer" src="OSRM.debug.js" type="text/javascript"></script> -->
 
+<script src="base/osrm/OSRM.Control.Locations.js" type="text/javascript"></script>
+<script src="base/osrm/OSRM.Control.Zoom.js" type="text/javascript"></script>
 <script src="base/osrm/OSRM.MapView.js" type="text/javascript"></script>
 <script src="base/osrm/OSRM.Marker.js" type="text/javascript"></script>
 <script src="base/osrm/OSRM.Route.js" type="text/javascript"></script>
@@ -153,7 +154,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <!-- mapping gui -->
 <div id="mapping-wrapper" class="box-wrapper">
 <div id="mapping-content" class="box-content">
-	<!-- header -->select
+	<!-- header -->
 	<div id="mapping-toggle" class="iconic-button cancel-marker top-right-button"></div>
 	<div id="gui-mapping-label" class="box-label">Mapping Tools</div>
 	

WebContent/main.js

@@ -83,6 +83,21 @@ OSRM.prefetchImages = function() {
 		              	{id:'printer_active',					url:'images/printer_active.png'},
 		              	{id:'printer_hover',					url:'images/printer_hover.png'},
 		              	{id:'printer_inactive',					url:'images/printer_inactive.png'},
+		              	{id:'zoom_in',							url:'images/zoom_in.png'},
+		              	{id:'zoom_in_active',					url:'images/zoom_in_active.png'},
+		              	{id:'zoom_in_hover',					url:'images/zoom_in_hover.png'},
+		              	{id:'zoom_out',							url:'images/zoom_out.png'},
+		              	{id:'zoom_out_active',					url:'images/zoom_out_active.png'},
+		              	{id:'zoom_out_hover',					url:'images/zoom_out_hover.png'},		              	
+		              	{id:'locations_user',					url:'images/locations_user.png'},
+		              	{id:'locations_user_active',			url:'images/locations_user_active.png'},
+		              	{id:'locations_user_hover',				url:'images/locations_user_hover.png'},
+		              	{id:'locations_user_inactive',			url:'images/locations_user_inactive.png'},
+		              	{id:'locations_route',					url:'images/locations_route.png'},
+		              	{id:'locations_route_active',			url:'images/locations_route_active.png'},
+		              	{id:'locations_route_hover',			url:'images/locations_route_hover.png'},
+		              	{id:'locations_route_inactive',			url:'images/locations_route_inactive.png'},
+		              	{id:'layers',							url:'images/layers.png'},
 		        		{id:'direction_0',						url:'images/default.png'},		              	
 		              	{id:'direction_1',						url:'images/continue.png'},
 		              	{id:'direction_2',						url:'images/slight-right.png'},
@@ -141,37 +156,57 @@ OSRM.prefetchIcons = function() {
 // set css styles for images
 OSRM.prefetchCSSIcons = function() {
 	var css_list = [
-	                	{ id:'#gui-printer-inactive',		image_id:'printer_inactive'},
+	                	{ id:'#gui-printer-inactive',			image_id:'printer_inactive'},
-	                	{ id:'#gui-printer',				image_id:'printer'},
+	                	{ id:'#gui-printer',					image_id:'printer'},
-	                	{ id:'#gui-printer:hover',			image_id:'printer_hover'},
+	                	{ id:'#gui-printer:hover',				image_id:'printer_hover'},
-	                	{ id:'#gui-printer:active',			image_id:'printer_active'},
+	                	{ id:'#gui-printer:active',				image_id:'printer_active'},
                 	
-	                	{ id:'.cancel-marker',				image_id:'cancel'},
+	                	{ id:'.gui-zoom-in',					image_id:'zoom_in'},
-	                	{ id:'.cancel-marker:hover',		image_id:'cancel_hover'},
+	                	{ id:'.gui-zoom-in:hover',				image_id:'zoom_in_hover'},
-	                	{ id:'.cancel-marker:active',		image_id:'cancel_active'},
+	                	{ id:'.gui-zoom-in:active',				image_id:'zoom_in_active'},
 	                	
-	                	{ id:'.up-marker',					image_id:'up'},
+	                	{ id:'.gui-zoom-out',					image_id:'zoom_out'},
-	                	{ id:'.up-marker:hover',			image_id:'up_hover'},
+	                	{ id:'.gui-zoom-out:hover',				image_id:'zoom_out_hover'},
-	                	{ id:'.up-marker:active',			image_id:'up_active'},
+	                	{ id:'.gui-zoom-out:active',			image_id:'zoom_out_active'},
 	                	
-	                	{ id:'.down-marker',				image_id:'down'},
+	                	{ id:'.gui-locations-user-inactive',	image_id:'locations_user_inactive'},
-	                	{ id:'.down-marker:hover',			image_id:'down_hover'},
+	                	{ id:'.gui-locations-user',				image_id:'locations_user'},
-	                	{ id:'.down-marker:active',			image_id:'down_active'},
+	                	{ id:'.gui-locations-user:hover',		image_id:'locations_user_hover'},
+	                	{ id:'.gui-locations-user:active',		image_id:'locations_user_active'},
 	                	
-	                	{ id:'#input-mask-header',			image_id:'osrm-logo'},
+	                	{ id:'.gui-locations-route-inactive',	image_id:'locations_route_inactive'},
-	                	{ id:'.styled-select',				image_id:'selector'},
+	                	{ id:'.gui-locations-route',			image_id:'locations_route'},
+	                	{ id:'.gui-locations-route:hover',		image_id:'locations_route_hover'},
+	                	{ id:'.gui-locations-route:active',		image_id:'locations_route_active'},
 	                	
-	                	{ id:'#config-handle-icon',			image_id:'config'},
+	                	{ id:'.leaflet-control-layers a',		image_id:'layers'},
-	                	{ id:'#config-handle-icon:hover',	image_id:'config_hover'},
-	                	{ id:'#config-handle-icon:active',	image_id:'config_active'},
 	                	
-	                	{ id:'#mapping-handle-icon',		image_id:'mapping'},
+	                	{ id:'.cancel-marker',					image_id:'cancel'},
-	                	{ id:'#mapping-handle-icon:hover',	image_id:'mapping_hover'},
+	                	{ id:'.cancel-marker:hover',			image_id:'cancel_hover'},
-	                	{ id:'#mapping-handle-icon:active',	image_id:'mapping_active'},
+	                	{ id:'.cancel-marker:active',			image_id:'cancel_active'},
 	                	
-	                	{ id:'#main-handle-icon',			image_id:'restore'},
+	                	{ id:'.up-marker',						image_id:'up'},
-	                	{ id:'#main-handle-icon:hover',		image_id:'restore_hover'},
+	                	{ id:'.up-marker:hover',				image_id:'up_hover'},
-	                	{ id:'#main-handle-icon:active',	image_id:'restore_active'}	                	
+	                	{ id:'.up-marker:active',				image_id:'up_active'},
+	                	
+	                	{ id:'.down-marker',					image_id:'down'},
+	                	{ id:'.down-marker:hover',				image_id:'down_hover'},
+	                	{ id:'.down-marker:active',				image_id:'down_active'},
+	                	
+	                	{ id:'#input-mask-header',				image_id:'osrm-logo'},
+	                	{ id:'.styled-select',					image_id:'selector'},
+	                	
+	                	{ id:'#config-handle-icon',				image_id:'config'},
+	                	{ id:'#config-handle-icon:hover',		image_id:'config_hover'},
+	                	{ id:'#config-handle-icon:active',		image_id:'config_active'},
+	                	           	
+	                	{ id:'#mapping-handle-icon',			image_id:'mapping'},
+	                	{ id:'#mapping-handle-icon:hover',		image_id:'mapping_hover'},
+	                	{ id:'#mapping-handle-icon:active',		image_id:'mapping_active'},
+	                	          	
+	                	{ id:'#main-handle-icon',				image_id:'restore'},
+	                	{ id:'#main-handle-icon:hover',			image_id:'restore_hover'},
+	                	{ id:'#main-handle-icon:active',		image_id:'restore_active'}	                	
 	                ];
 	
 	var stylesheet = OSRM.CSS.getStylesheet("main.css");