made logo a bit smaller so that it is centered,

removing source or target now clears route description,
changed GUI handling to no longer be dependent on the actual width of
the sidebar

WebContent/OSRM.GUI.js

@@ -21,30 +21,25 @@ or see http://www.gnu.org/licenses/agpl.txt.
 
 OSRM.GUI = {
 
+// default state
+visible: true,
+width: 410,
+		
 // show/hide main-gui
 toggleMain: function() {
 	// show main-gui
-	if( document.getElementById('main-wrapper').style.left == "-410px" ) {
+	if( OSRM.GUI.visible == false ) {
 		getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="hidden";
-		getElementsByClassName(document,'leaflet-control-zoom')[0].style.left="420px";
+		getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.GUI.width+10)+"px";;
-		getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px";
 		
 		document.getElementById('blob-wrapper').style.visibility="hidden";
 		document.getElementById('main-wrapper').style.left="5px";
-		if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_9!=-1 ) {
-			getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
-		}
 	// hide main-gui
 	} else {
 		getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="hidden";
 		getElementsByClassName(document,'leaflet-control-zoom')[0].style.left="30px";
-		getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px";
 			
-		document.getElementById('main-wrapper').style.left="-410px";
+		document.getElementById('main-wrapper').style.left=-OSRM.GUI.width+"px";
- 		if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_9!=-1 ) {
- 			document.getElementById('blob-wrapper').style.visibility="visible";
-			getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";		
- 		}
 	}
 
 	// execute after animation
@@ -53,18 +48,22 @@ toggleMain: function() {
 		document.getElementById('main-wrapper').addEventListener("webkitTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
 		document.getElementById('main-wrapper').addEventListener("oTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
 		document.getElementById('main-wrapper').addEventListener("MSTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
+	} else {
+		OSRM.GUI.onMainTransitionEnd();		
 	}
 },
 
 // do stuff after main-gui animation finished
 onMainTransitionEnd: function() {
 	// after hiding main-gui
-	if( document.getElementById('main-wrapper').style.left == "-410px" ) {
+	if( OSRM.GUI.visible == true ) {
 		document.getElementById('blob-wrapper').style.visibility="visible";
 		getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
+		OSRM.GUI.visible = false;		
 	// after showing main-gui
 	} else {
 		getElementsByClassName(document,'leaflet-control-zoom')[0].style.visibility="visible";
+ 		OSRM.GUI.visible = true;		
 	}
 },
 

WebContent/OSRM.Markers.js

@@ -61,9 +61,9 @@ centerView: function(zoom) {
 		zoom = OSRM.DEFAULTS.ZOOM_LEVEL;
 	
 	var position;
-	if( document.getElementById('main-wrapper').style.left != "-410px" ) {
+	if( OSRM.GUI.visible == true ) {
 		var point = OSRM.G.map.project( this.position, zoom);
-		point.x-=200;
+		point.x-=OSRM.GUI.width/2;
 		position = OSRM.G.map.unproject(point,zoom);		
 	} else {
 		position = this.position;
@@ -204,10 +204,14 @@ removeMarker: function(id) {
 	if( id==0 && this.route[0].label == OSRM.C.SOURCE_LABEL ) {
 		this.removeVias();
 		document.getElementById('input-source-name').value = "";
+		document.getElementById('information-box').innerHTML = "";
+		document.getElementById('information-box-headline').innerHTML = "";		
 	} else if( id == this.route.length-1 && this.route[ this.route.length-1 ].label == OSRM.C.TARGET_LABEL ) {
 		this.removeVias();
 		id = this.route.length-1;
 		document.getElementById('input-target-name').value = "";
+		document.getElementById('information-box').innerHTML = "";
+		document.getElementById('information-box-headline').innerHTML = "";		
 	}
 	
 	this.route[id].hide();

WebContent/OSRM.Route.js

@@ -54,12 +54,12 @@ setStyle: function(style) {
 centerView: function() {
 	var bounds = new L.LatLngBounds( this.getPositions() );
 	
-	if( document.getElementById('main-wrapper').style.left != "-410px" ) {
+	if( OSRM.GUI.visible == true ) {
 		var southwest = bounds.getSouthWest();
 		var northeast = bounds.getNorthEast();
 		var zoom = OSRM.G.map.getBoundsZoom(bounds);
 		var sw_point = OSRM.G.map.project( southwest, zoom);
-		sw_point.x-=410;
+		sw_point.x-=OSRM.GUI.width/2;
 		sw_point.y+=10;
 		var ne_point = OSRM.G.map.project( northeast, zoom);
 		ne_point.y-=10;

WebContent/main.css

@@ -169,7 +169,7 @@ html, body, #map {
     display: block;
     margin-left: auto;
     margin-right: auto;
-    width: 200px;
+    width: 192px;
     height: 50px;
 	text-align:center;
 	vertical-align: middle;    

WebContent/main.js

@@ -28,6 +28,7 @@ function init() {
 	prefetchIcons();
 	
 	initLocale();
+	initGUI();
 	initMap();
 	initRouting();
 
@@ -72,6 +73,13 @@ function prefetchIcons() {
 }
 
 
+// init GUI
+function initGUI() {
+	OSRM.GUI.visible = true;
+	OSRM.GUI.width = document.getElementById("main-wrapper").clientWidth;
+}
+
+
 // init localization
 function initLocale() {
 	document.getElementById("gui-reset").innerHTML = OSRM.loc("GUI_RESET");
@@ -147,15 +155,21 @@ function initMap() {
 	OSRM.G.map.addControl(layersControl);
 
     // move zoom markers
-	getElementsByClassName(document,'leaflet-control-zoom')[0].style.left="420px";
+	getElementsByClassName(document,'leaflet-control-zoom')[0].style.left=(OSRM.GUI.width+10)+"px";
 	getElementsByClassName(document,'leaflet-control-zoom')[0].style.top="5px";
 
 	// initial map position and zoom
-	OSRM.G.map.setView( new L.LatLng( OSRM.DEFAULTS.ONLOAD_LATITUDE, OSRM.DEFAULTS.ONLOAD_LONGITUDE), OSRM.DEFAULTS.ZOOM_LEVEL);
+	var position = new L.LatLng( OSRM.DEFAULTS.ONLOAD_LATITUDE, OSRM.DEFAULTS.ONLOAD_LONGITUDE);
+	if( OSRM.GUI.visible == true ) {
+		var point = OSRM.G.map.project( position, OSRM.DEFAULTS.ZOOM_LEVEL);
+		point.x-=OSRM.GUI.width/2;
+		position = OSRM.G.map.unproject(point,OSRM.DEFAULTS.ZOOM_LEVEL);
+	}	
+	OSRM.G.map.setView( position, OSRM.DEFAULTS.ZOOM_LEVEL);
+	
+	// map events
 	OSRM.G.map.on('zoomend', function(e) { getRoute(OSRM.C.FULL_DESCRIPTION); });
 	OSRM.G.map.on('contextmenu', function(e) {});
-
-	// click on map to set source and target nodes
 	OSRM.G.map.on('click', function(e) {
 		if( !OSRM.G.markers.hasSource() ) {
 			var index = OSRM.G.markers.setSource( e.latlng );