custom map relays on the div (not on the predefined jsf google map)

frontend-js/src/main/js/GuiConnector.js

@@ -129,21 +129,6 @@ GuiConnector.getImgPrefix = function() {
   return "resources/images/";
 };
 
-/**
- * Returns main google maps div tag placed on the webpage.
- */
-GuiConnector.getGoogleMapElement = function() {
-  return document.getElementById(ServerConnector.formIdentifier + ":gmapElement");
-};
-
-/**
- * Shows main google map (by default map is hidden, because it doesn't point to
- * our data from the beginning).
- */
-GuiConnector.showGoogleMap = function() {
-  GuiConnector.getGoogleMapElement().style.visibility = "visible";
-};
-
 /**
  * Shows legend.
  */

frontend-js/src/main/js/map/AbstractCustomMap.js

@@ -26,7 +26,6 @@ function AbstractCustomMap(model, options) {
     throw Error("Model must be defined");
   }
 
-  this.setGoogleMap(options.getMap());
   this.setModel(model);
 
   // this array contains elements that are presented on a specific layout (set

frontend-js/src/main/js/map/CustomMap.js

@@ -43,21 +43,7 @@ function CustomMap(options) {
   this.setProject(options.getProject());
 
   // set config parameters
-  this.setGoogleMap(options.getMap());
-
-  if (options.isCustomTouchInterface()) {
-    this._touchInterface = new TouchMap(this);
-  }
-
-  // create function that override primefaces fitBounds with default google
-  // implementation
-  var fitBounds = function(bounds) {
-    var tmp = this.fitBounds;
-    this.fitBounds = google.maps.Map.prototype.fitBounds;
-    this.fitBounds(bounds);
-    this.fitBounds = tmp;
-  };
-  this.getGoogleMap().fitBounds2 = fitBounds;
+// this.setGoogleMap(options.getMap());
 
   this.buttons = [];
 
@@ -65,12 +51,12 @@ function CustomMap(options) {
 
   this.selectedLayouts = [];
 
-  this.setupLayouts();
+  this.customizeGoogleMapView(options.getFitMapBounds(),options.getMapDiv());
 
   this.createBelt();
-
-  this.customizeGoogleMapView(options.getFitMapBounds());
-
+  
+  this.createMapMenu();
+  
   this.createMapChangedCallbacks();
 
   this.createClientServerListeners();
@@ -88,6 +74,11 @@ function CustomMap(options) {
   var commentDialog = new CommentDialog(document.getElementById("feedbackContent"), this); 
 
   this.setCommentDialog(commentDialog);
+
+  if (options.isCustomTouchInterface()) {
+    this._touchInterface = new TouchMap(this);
+  }
+
 }
 
 CustomMap.prototype = Object.create(AbstractCustomMap.prototype);
@@ -577,11 +568,7 @@ CustomMap.prototype.refreshOverlayMarkers = function(overlay) {
         var map = this.getSubmodelById(mapId).getGoogleMap();
         bounds = boundsArray[mapId];
         if (map !== undefined && !bounds.isEmpty()) {
-          if (typeof map.fitBounds2 !== "undefined") {
-            map.fitBounds2(bounds);
-          } else {
             map.fitBounds(bounds);
-          }
         }
       }
     }
@@ -626,11 +613,11 @@ CustomMap.prototype.openSubmodel = function(id, htmlTag, jsVar) {
 
 };
 
-CustomMap.prototype.customizeGoogleMapView = function(fitMapBounds) {
-  var mapOptions = this.creatMapOptions();
-  this.getGoogleMap().setOptions(mapOptions);
-
-  this.createMapMenu();
+CustomMap.prototype.customizeGoogleMapView = function(fitMapBounds, div) {
+  logger.debug(div);
+  var mapOptions = this.creatMapOptions(this.getLayouts().length);
+  this.setGoogleMap(new google.maps.Map(div, mapOptions));
+  this.setupLayouts();
 
   this.registerMapClickEvents();
 
@@ -646,11 +633,7 @@ CustomMap.prototype.customizeGoogleMapView = function(fitMapBounds) {
     bounds.extend(this.getTopLeftLatLng());
     bounds.extend(this.getBottomRightLatLng());
 
-    if (typeof this.getGoogleMap().fitBounds2 !== undefined) {
-      this.getGoogleMap().fitBounds2(bounds);
-    } else {
       this.getGoogleMap().fitBounds(bounds);
-    }
   }
 };
 
@@ -1442,11 +1425,7 @@ CustomMap.prototype.renderOverlayCollection = function(overlayCollection, fitBou
           var map = self.getSubmodelById(mapId).getGoogleMap();
           var bounds = boundsArray[mapId];
           if (map !== undefined && !bounds.isEmpty()) {
-            if (typeof map.fitBounds2 !== "undefined") {
-              map.fitBounds2(bounds);
-            } else {
               map.fitBounds(bounds);
-            }
           }
         }
       }

frontend-js/src/main/js/map/CustomMapOptions.js

@@ -7,10 +7,10 @@ var logger = require('./../logger');
  * objects.
  */
 function CustomMapOptions(params) {
-  if (params.map === undefined) {
-    throw new Error("map must be defined");
+  if (params.mapDiv === undefined) {
+    throw new Error("mapDiv must be defined");
   }
-  this.setMap(params.map);
+  this.setMapDiv(params.mapDiv);
 
   if (params.project === undefined) {
     throw new Error("project must be defined");
@@ -53,21 +53,21 @@ function CustomMapOptions(params) {
 
   if (params.customTouchInterface !== undefined) {
     if (typeof params.customTouchInterface === "boolean") {
-      this._customTouchInterface = params.customTouchInterface;
+      this.setCustomTouchInterface (params.customTouchInterface);
     } else {
       logger.warn("customTouchInterface must be of type boolean");
-      this._customTouchInterface = false;
+      this.setCustomTouchInterface (false);
     }
   } else {
-    this._customTouchInterface = false;
+    this.setCustomTouchInterface (false);
   }
 
   this.setDebug(params.debug);
   this.setFitMapBounds(params.debug);
 }
 
-CustomMapOptions.prototype.getMap = function() {
-  return this._map;
+CustomMapOptions.prototype.getMapDiv = function() {
+  return this._mapDiv;
 };
 
 CustomMapOptions.prototype.isMarkerOptimization = function() {
@@ -106,12 +106,16 @@ CustomMapOptions.prototype.setFitMapBounds = function(fitMapBounds) {
   this._fitMapBounds = fitMapBounds;
 };
 
+CustomMapOptions.prototype.setCustomTouchInterface = function(customTouchInterface) {
+  this._customTouchInterface = customTouchInterface;
+};
+
 CustomMapOptions.prototype.getFitMapBounds = function() {
   return this._fitMapBounds;
 };
 
-CustomMapOptions.prototype.setMap = function(map) {
-  this._map = map;
+CustomMapOptions.prototype.setMapDiv = function(mapDiv) {
+  this._mapDiv = mapDiv;
 };
 
 CustomMapOptions.prototype.getFitMapBounds = function() {

frontend-js/src/main/js/map/Submap.js

@@ -18,7 +18,7 @@ function Submap(customMap, model) {
   this.setCustomMap(customMap);
 
   AbstractCustomMap.call(this, model, new CustomMapOptions({
-    map : null,
+    mapDiv : customMap.getGoogleMap().getDiv(),
     hideDiV : customMap.getHideDiv(),
     overviewDiv : customMap.getOverviewDiv(),
     markerOptimization : customMap.isMarkerOptimization(),

frontend-js/src/main/js/minerva.js

@@ -76,9 +76,6 @@ function create(params) {
   var result = new CustomMap(params);
 
   ServerConnector.setCustomMap(result);
-  GuiConnector.setCustomMap(result);
-
-  GuiConnector.showGoogleMap();
 
   if (params.dataCollections !== undefined) {
     for (var i = 0; i < params.dataCollections.length; i++) {

frontend-js/src/test/js/helper.js

@@ -249,13 +249,13 @@ Helper.prototype.createReaction = function(map) {
   return result;
 };
 
-Helper.prototype.createOptions = function() {
-  var map = this.createGoogleMap();
-
-  var project = this.createProject();
+Helper.prototype.createOptions = function(project) {
+  if (project === undefined) {
+    project = this.createProject();
+  }
 
   var options = {
-    map : map,
+    mapDiv : testDiv,
     project : project,
     dataCollections : [ {
       name : "testCollection" + this.idCounter++,
@@ -301,11 +301,11 @@ Helper.prototype.createGoogleMap = function() {
 
 Helper.prototype.createCustomMapOptions = function() {
   var project = this.createProject();
-  var map = this.createGoogleMap();
+  
   var result = new CustomMapOptions({
     markerOptimization : true,
     project : project,
-    map : map
+    mapDiv : testDiv
   });
 
   return result;

frontend-js/src/test/js/map/CustomMapOptions-test.js

@@ -23,14 +23,14 @@ describe('CustomMapOptions', function() {
       });
       assert.ok(false);
     } catch (exception) {
-      assert.ok(exception.message.indexOf("map must be defined") >= 0);
+      assert.ok(exception.message.indexOf("mapDiv must be defined") >= 0);
     }
   });
 
   it("contructor with invalid arg 3", function() {
     try {
       new CustomMapOptions({
-        map : {},
+        mapDiv : testDiv,
       });
     } catch (exception) {
       assert.ok(exception.message.indexOf("project must be defined") >= 0);
@@ -40,7 +40,7 @@ describe('CustomMapOptions', function() {
   it("contructor with valid arg 2", function() {
     var project = helper.createProject();
     new CustomMapOptions({
-      map : {},
+      mapDiv : testDiv,
       project : project,
       debug : false,
     });

frontend-js/src/test/js/map/overlay/ReactionOverlay-test.js

@@ -33,7 +33,7 @@ describe('ReactionOverlay', function() {
   });
 
   it("show", function() {
-    var map = helper.createAbstractCustomMap();
+    var map = helper.createCustomMap();
     var reaction = helper.createReaction(map);
     var layoutReaction = helper.createLayoutReaction(reaction);
 

frontend-js/src/test/js/minerva-test.js

@@ -71,13 +71,7 @@ describe('minerva global', function() {
 
     GuiConnector.getParams["layout"] = layoutName;
 
-    var options = {
-      map : map,
-      project : project,
-      dataCollections : [ {
-        name : "testCollection"
-      } ],
-    };
+    var options = helper.createOptions(project);
 
     return minerva.create(options).then(function(result) {
       assert.ok(result);
@@ -102,13 +96,7 @@ describe('minerva global', function() {
 
     GuiConnector.getParams["layout"] = layoutName;
 
-    var options = {
-      map : map,
-      project : project,
-      dataCollections : [ {
-        name : "testCollection"
-      } ],
-    };
+    var options = helper.createOptions(project);
 
     return minerva.create(options).then(function(result) {
       assert.ok(result);
@@ -121,15 +109,11 @@ describe('minerva global', function() {
   it('create with comment overlay', function() {
     var project = helper.createProject();
     project.getModel().setId(15781);
-    var map = helper.createGoogleMap();
 
-    var options = {
-      map : map,
-      project : project,
-      dataCollections : [ {
-        name : "comment"
-      } ],
-    };
+    var options = helper.createOptions(project);
+    options.dataCollections.push({
+      name : "comment"
+    });
 
     return minerva.create(options).then(function(result) {
       assert.ok(result);
@@ -139,40 +123,41 @@ describe('minerva global', function() {
   it('create with search overlay', function() {
     var project = helper.createProject();
     project.getModel().setId(15781);
-    var map = helper.createGoogleMap();
 
-    var options = {
-      map : map,
-      project : project,
-      dataCollections : [ {
-        name : "search"
-      } ],
-    };
+    var options = helper.createOptions(project);
+    options.dataCollections.push({
+      name : "search"
+    });
 
     return minerva.create(options).then(function(result) {
       assert.ok(result);
     });
   });
-  
+
   it('create with search overlay and GET search param', function() {
-    GuiConnector.getParams["search"]="s1";
-    
+    GuiConnector.getParams["search"] = "s1";
+
     var project = helper.createProject();
     project.getModel().setId(15781);
-    var map = helper.createGoogleMap();
 
-    var options = {
-      map : map,
-      project : project,
-      dataCollections : [ {
-        name : "search"
-      } ],
-    };
+    var options = helper.createOptions(project);
+    options.dataCollections.push({
+      name : "search"
+    });
 
     return minerva.create(options).then(function(result) {
       return result.getOverlayByName("search").getIdentifiedElements();
-    }).then(function(elements){
-      assert.ok(elements.length>0);
+    }).then(function(elements) {
+      assert.ok(elements.length > 0);
     });
   });
+
+  it("contructor with touch enabled", function() {
+    var options = helper.createCustomMapOptions();
+    options.setCustomTouchInterface(true);
+    return minerva.create(options).then(function(result) {
+      assert.ok(result);
+    });
+  });
+
 });

web/src/main/webapp/WEB-INF/components/map/map.xhtml

@@ -13,7 +13,6 @@
 
 			<p:remoteCommand name="_setModelZoomLevel" actionListener="#{mapMB.setModelZoomLevel}"/>
 
-			<p:gmap id="gmapElement" widgetVar="gmtls" center="49.502430, 5.948763" zoom="6" type="terrain" styleClass="mapClass"/>
 		 	<p:galleria id="legend" styleClass="legendBox" panelWidth="600" panelHeight="480">
    			<h:panelGroup layout="block" rendered ="#{not empty configurationMB.legendFile1}">
           <img src="#{configurationMB.legendFile1}" alt="legend 1/4"/>
@@ -29,15 +28,13 @@
   			</h:panelGroup>
 			</p:galleria>
 			
-			<p:contextMenu id="contextMenu" model="#{exportMB.contextMenu}" for="gmapElement"/>	
-			<p:contextMenu id="selectionContextMenu" model="#{exportMB.imageExportMenu}" for="gmapElement"/>	
+			<p:contextMenu id="contextMenu" model="#{exportMB.contextMenu}" />	
+			<p:contextMenu id="selectionContextMenu" model="#{exportMB.imageExportMenu}" />	
 
 			<h:inputHidden id="selectedPolygon" value="#{exportMB.selectedPolygon}"/>
 			<h:inputHidden id="exportModelId" value="#{exportMB.selectedModelId}"/>
 			<h:inputHidden id="selectedDrugPolygon" value="#{drugMB.polygon}"/>
 
-			<p:remoteCommand name="_actualizeParams" actionListener="#{mapMB.actualizeParams}"/>
-
 			<h:panelGroup layout="block" id="submodelDialogGroup">
 			</h:panelGroup>
 
@@ -62,16 +59,6 @@
 		<h:inputHidden id="systemMaxColor" value="#{configurationMB.maxColor}"/>
 	</h:form>
 
-	<h:form id="accessLightAliasForm">
-		<p:remoteCommand name="_retreiveLightAliases" actionListener="#{mapMB.retreiveLightAliases}" />
-	</h:form>
-	<h:form id="accessFullAliasForm">
-		<p:remoteCommand name="_retreiveFullAliases" actionListener="#{mapMB.retreiveFullAliases}" />
-	</h:form>
-	<h:form id="accessReactionForm">
-		<p:remoteCommand name="_retreiveLightReactions" actionListener="#{mapMB.retreiveLightReactions}" />
-	</h:form>
-
 	<h:form id="accessReferenceGenomeForm">
 		<p:remoteCommand name="_sendReferenceGenomeDetailRequest" actionListener="#{referenceGenomeMB.requestJavasciptGenomeDetails}" />
 	</h:form>

web/src/main/webapp/index.xhtml

@@ -33,13 +33,13 @@
 //<![CDATA[
 
 function initMap(){
+	var mapDiv = document.getElementById('mapElement');
 	minerva.GuiConnector.init();
-	var mapElement = gmtls.getMap();
 	minerva.ServerConnector.getProject(minerva.GuiConnector.getParams['id']).then(function(project){
 		var windowsTouchInterface = ((navigator.appVersion.indexOf("Win")!=-1) && ('ontouchstart' in document.documentElement)); 
 		var overviewDiv = document.getElementById("overviewDiv");
 	  return minerva.create({
-		    map : mapElement, 
+		    mapDiv : mapDiv, 
 		    project : project, 
 		    hideDiv : document.getElementById('leftPanel'), 
 		    markerOptimization : !windowsTouchInterface, 
@@ -75,15 +75,9 @@ function initMap(){
 
 	<h:outputScript library="primefaces" name="jquery/jquery.js" target="head"	/>
 	<div class = "containerClass">
-		<div id="leftPanel" class ="leftPanelClass">
+		<div id="leftPanel" class ="leftPanelClass" style="float: left;">
 		
 		<ui:include src="/WEB-INF/components/admin/header.xhtml" />
-		
-<!--		<div class="tabNavigation">
-		<a href="javascript:;" onclick="GuiConnector.tabNaviShow('prev');" class="naviLeft"><i class="fa fa-chevron-left"></i></a>
-		<a href="javascript:;" onclick="GuiConnector.tabNaviShow('next');" class="naviRight"><i class="fa fa-chevron-right"></i></a>
-		</div>
--->
 
 			<p:tabView id="tabView" widgetVar="_tabViewVar" styleClass="leftTabView" activeIndex="0" >	
 				<p:tab id="searchTab" title="&lt;div class='tngContainer'&gt;&lt;div class='tng'&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class='maintabdiv'&gt;&lt;i class='fa fa-search maintab'&gt;&lt;/i&gt;&lt;br&gt;SEARCH&lt;/div&gt;" styleClass="leftTab">
@@ -123,9 +117,11 @@ function initMap(){
 			</div>
 				
 		</div>
-		<div>
-			<ui:include src="/WEB-INF/components/map/map.xhtml" />
+		<div  style="display: table-cell;height:100%;width:100%;">
+			<div id="mapElement" class="mapClass"/>
 		</div>
+			<ui:include src="/WEB-INF/components/map/map.xhtml" />
+		
 	</div>
 
 	<!--<ui:include src="/WEB-INF/components/map/footer.xhtml" />-->

web/src/main/webapp/resources/css/global.css

@@ -29,6 +29,30 @@
 	-webkit-border-vertical-spacing: 2px;
 }
 
+.mapClass {
+	border:none;
+	height:100%;
+	width:100%;
+	border-left:1px solid #e1e1e1;
+}
+
+.containerClass {
+	display: table;	
+	background-color: #ffffff;
+	height: 100%;
+	width: 100%;
+	margin: 0;
+}
+
+.leftPanelClass {
+	display: table-cell;
+	border:none;
+	background-color: #ffffff;
+	width: 357px;
+	height: 100%;
+}
+
+
 /* twitter typeahead */
 .tt-query /* UPDATE: newer versions use tt-input instead of tt-query */
  {

web/src/main/webapp/resources/css/map.css

@@ -27,4 +27,4 @@ table.mapInfoBoxResultsTable, table.mapInfoBoxResultsTable th, table.mapInfoBoxR
 	margin: 1px;
 	width: 360px;
 	background-color: #C0C0C0;
-}
\ No newline at end of file
+}

web/src/main/webapp/resources/css/style.css

@@ -21,46 +21,10 @@ html,body {
 	margin: 0;
 }
 
-.smallCheckbox {
-  
-}
   
 .smallIcon {
 	width:18px;
 }
-.searchTextClass {
-	width:100%;
-}
-.mapClass {
-	border:none;
-	position: absolute;
-	top: 0px;
-	bottom: 0px;
-	left: 357px;
-	right: 0px;
-	visibility: hidden;
-	float: left;
-	border-left:1px solid #e1e1e1;
-}
-
-.containerClass {
-	background-color: #ffffff;
-	min-height: 100%;
-	height: auto !important;
-	height: 100%;
-	margin: 0;
-}
-
-.leftPanelClass {
-	position: absolute;
-	border:none;
-	background-color: #ffffff;
-	width: 357px;
-	left:0px;
-	top:0px;
-	bottom:72px;
-	float: left;
-}
 .footerDivClass {
   position: relative;
  	top:0px;