fix on legend links

frontend-js/src/main/js/gui/Legend.js

@@ -13,7 +13,7 @@ function Legend(params) {
   AbstractGuiElement.call(this, params);
 
   this._initializeGui();
-
+  this.hide();
 }
 
 Legend.prototype = Object.create(AbstractGuiElement.prototype);
@@ -24,7 +24,7 @@ Legend.prototype._initializeGui = function() {
 
   var legendDiv = Functions.createElement({
     type : "div",
-    name : "legend",
+    id : "legend-div",
     className : "carousel slide",
   });
   self.getElement().appendChild(legendDiv);
@@ -50,7 +50,7 @@ Legend.prototype._initializeGui = function() {
     type : "a",
     className : "left carousel-control",
     role:"button",
-    link:"#legend",
+    href:"#legend-div",
     content: '<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span>',
   });
   leftButton.setAttribute("data-slide", "prev" );
@@ -60,10 +60,10 @@ Legend.prototype._initializeGui = function() {
     type : "a",
     className : "right carousel-control",
     role:"button",
-    link:"#legend",
+    href:"#legend-div",
     content: '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span>',
   });
-  leftButton.setAttribute("data-slide", "next" );
+  rightButton.setAttribute("data-slide", "next" );
   legendDiv.appendChild(rightButton);
 };
 

web/src/main/webapp/index.xhtml

@@ -10,6 +10,7 @@
 	>
 
 <f:view contentType="text/html">
+
  
 <h:head>
 	<title>#{mapMB.currentProject.name}</title>
@@ -23,6 +24,7 @@
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
 
+
 	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/>	
 	<link rel="shortcut icon" href="./resources/images/favicon.png" type="image/png" />
 
@@ -67,17 +69,20 @@ function initMap(){
 			<div  style="height:100%;width:100%;position:relative">
 				<div id="menuBelt" class="menuBelt"/>
 				<div id="mapElement" class="mapClass"/>
-				<div id="legend" class="legendBox" />
+				<div id="legend" class="legendBox" style="display:none" />
 			</div>		
 		</div>
 		<ul id="contextMenu" />	
 		<ul id="selectionContextMenu" />	
 	</div>
 
+
 	<h:form id="accessReferenceGenomeForm">
 		<p:remoteCommand name="_sendReferenceGenomeDetailRequest" actionListener="#{referenceGenomeMB.requestJavasciptGenomeDetails}" />
 	</h:form>
 
+
 </h:body>
 </f:view>
 </html>
+