further restructuring of gui buttons

WebContent/base/OSRM.Map.js

@@ -55,9 +55,13 @@ init: function() {
 	    fadeAnimation: false
 	});
 
+	// add locations control
+	var locationsControl = new L.Control.Locations();
+	OSRM.G.map.addControl(locationsControl);
+	
 	// add layer control
 	var layerControl = new L.Control.QueryableLayers(base_maps, {});
-	OSRM.G.map.addLayerControl(layerControl);
+	OSRM.G.map.addLayerControl(layerControl);	
 
     // move zoom markers
 	OSRM.Browser.getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.G.main_handle.boxWidth()+10)+"px";

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

@@ -15,32 +15,34 @@ Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
 or see http://www.gnu.org/licenses/agpl.txt.
 */
 
-// goto Layers control
-// [used to add clickable buttons to the map]
-L.Control.Goto = L.Control.extend({
+// 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-goto',
+		var className = 'leaflet-control-locations',
 		    container = L.DomUtil.create('div', className);
 
-		this._createButton('Goto Location', className + '-my-location', container, map.zoomIn, map);
-		this._createButton('Goto Route', className + '-route', container, map.zoomOut, map);
+		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.href = '#';
+		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;
@@ -48,16 +50,16 @@ L.Control.Goto = L.Control.extend({
 });
 
 L.Map.mergeOptions({
-	gotoControl: true
+	locationsControl: false
 });
 
 L.Map.addInitHook(function () {
-	if (this.options.gotoControl) {
-		this.gotoControl = new L.Control.Goto();
-		this.addControl(this.gotoControl);
+	if (this.options.locationsControl) {
+		this.locationsControl = new L.Control.Locations();
+		this.addControl(this.locationsControl);
 	}
 });
 
-L.control.Goto = function (options) {
-	return new L.Control.Goto(options);
+L.control.locations = function (options) {
+	return new L.Control.Locations(options);
 };

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

@@ -1,3 +1,22 @@
+/*
+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'

WebContent/gui/OSRM.RoutingGUI.js

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

WebContent/main.css

@@ -49,62 +49,130 @@ html, body {
 	font-size:9px;
 	display:none;
 }
-/* .leaflet-control-goto {
-	padding: 5px;
-	background: rgba(0, 0, 0, 0.25);	
-	-moz-border-radius: 7px;
-	-webkit-border-radius: 7px;
-	border-radius: 7px;	
+
+
+.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-goto a {
-	background-color: rgba(255, 255, 255, 0.75);
+.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;
-	-moz-border-radius: 4px;
-	-webkit-border-radius: 4px;
-	border-radius: 4px;
-	width: 26px;
-	height: 26px;			
+	width: 19px;
+	height: 19px;
 }
-.leaflet-control-goto a:hover {
-	background-color: #fff;
+.leaflet-control-zoom a:hover {
+	background-color: #CCCCCC;
 }
-.leaflet-touch .leaflet-control-goto a {
+.leaflet-touch .leaflet-control-zoom a {
 	width: 27px;
 	height: 27px;
 }
-.leaflet-control-goto-my-location {
-	background-image:url('images/location.png');
-	margin-bottom:5px;
-}
 
-.leaflet-control-goto-route {
-	background-image:url('images/route.png');
-}
 
-.leaflet-control-layers {
-	padding: 5px;
-	background: rgba(0, 0, 0, 0.25);	
-	-moz-border-radius: 7px;
-	-webkit-border-radius: 7px;
-	border-radius: 7px;
+
+.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-layers a {
-	background-color: rgba(255, 255, 255, 0.75);
+.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;
-	-moz-border-radius: 4px;
-	-webkit-border-radius: 4px;
-	border-radius: 4px;
 	width: 26px;
-	height: 26px;
-	background-image: url(images/layers.png);
+	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;
+	-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);
+}
+.leaflet-control-layers-expanded {
+	background-color:rgba(255, 255, 255, 1);
+}
+.leaflet-control-layers a {
+	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;	
+	background-image:url('images/control_layers.png');
 }
 .leaflet-control-layers a:hover {
-	background-color: #fff;
-} */
+	background-color: #CCCCCC;
+}
 
 /* ------------------------------------------------------------------------ */
 
@@ -131,9 +199,9 @@ html, body {
 	position:absolute;
 	background-color:#ffffff;	
 	background-color:rgba(255,255,255,1);
-	border-radius:10px;
-	-moz-border-radius:10px;
-	-webkit-border-radius:10px;	
+	border-radius:8px;
+	-moz-border-radius:8px;
+	-webkit-border-radius:8px;	
 	margin:5px;
 	padding:5px;	
 }

WebContent/main.html

@@ -37,6 +37,7 @@ 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>