frontend uses information from model when deciding which canvas implementation to use

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

@@ -21,6 +21,8 @@ var ReactionSurface = require('./surface/ReactionSurface');
 var MarkerSurfaceCollection = require('./marker/MarkerSurfaceCollection');
 
 var MapCanvas = require('./canvas/MapCanvas');
+var GoogleMapsApiCanvas = require('./canvas/GoogleMaps/GoogleMapsApiCanvas');
+var OpenLayerCanvas = require('./canvas/OpenLayers/OpenLayerCanvas');
 
 /**
  * Default constructor.
@@ -902,6 +904,11 @@ AbstractCustomMap.prototype.fitBounds = function (markers) {
 AbstractCustomMap.prototype.setProject = function (project) {
   this._project = project;
 };
+
+/**
+ *
+ * @returns {Project}
+ */
 AbstractCustomMap.prototype.getProject = function () {
   return this._project;
 };
@@ -926,5 +933,19 @@ AbstractCustomMap.prototype.triggerEvent = function (type, data) {
   }
 };
 
+AbstractCustomMap.prototype.createMapCanvas = function (div) {
+  var self = this;
+
+  var mapCanvasType = self.getProject().getMapCanvasType();
+  if (mapCanvasType === "GOOGLE_MAPS_API") {
+    self.setMapCanvas(new GoogleMapsApiCanvas(div, self.createMapOptions()));
+  } else if (mapCanvasType === "OPEN_LAYERS") {
+    self.setMapCanvas(new OpenLayerCanvas(div, self.createMapOptions()));
+  } else {
+    throw new Error("Unknown mapCanvasType: " + mapCanvasType);
+  }
+  self.registerMapClickEvents();
+};
+
 
 module.exports = AbstractCustomMap;

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

@@ -19,8 +19,6 @@ var ReferenceGenome = require('./data/ReferenceGenome');
 var SecurityError = require('../SecurityError');
 var Submap = require('./Submap');
 
-var GoogleMapsApiCanvas = require('./canvas/GoogleMaps/GoogleMapsApiCanvas');
-var OpenLayerCanvas = require('./canvas/OpenLayers/OpenLayerCanvas');
 var Bounds = require('./canvas/Bounds');
 var Point = require('./canvas/Point');
 
@@ -456,10 +454,7 @@ CustomMap.prototype.openSubmap = function (id) {
 CustomMap.prototype.customizeGoogleMapView = function (div) {
   var self = this;
 
-  self.setMapCanvas(new OpenLayerCanvas(div, self.createMapOptions()));
-  // self.setMapCanvas(new GoogleMapsApiCanvas(div, self.createMapOptions()));
-
-  self.registerMapClickEvents();
+  self.createMapCanvas(div);
 
   self.createLogo();
 
@@ -976,6 +971,10 @@ CustomMap.prototype.getInfoWindowForIdentifiedElement = function (identifiedElem
   return infoWindow;
 };
 
+/**
+ *
+ * @returns {null|number}
+ */
 CustomMap.prototype.getActiveSubmapId = function () {
   return this._activeSubmapId;
 };

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

@@ -77,14 +77,12 @@ Submap.prototype.open = function (htmlTag) {
 
     $(self.getElement()).dialog("open");
 
-    self.setMapCanvas(new GoogleMapsApiCanvas(mapDiv, self.createMapOptions()));
+    self.createMapCanvas(mapDiv);
 
     self._createMapChangedCallbacks();
 
     self.getMapCanvas().triggerListeners('resize');
 
-    self.registerMapClickEvents();
-
     self.initialized = true;
   } else {
     $(self.getElement()).dialog("open");

frontend-js/src/main/js/map/data/Project.js

@@ -15,7 +15,7 @@ var logger = require('../../logger');
 
 /**
  *
- * @param {Project|string} data
+ * @param {Project|string} [data]
  * @constructor
  */
 function Project(data) {

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

@@ -152,13 +152,26 @@ Helper.prototype.createComment = function (element) {
   });
 };
 
-Helper.prototype.createProject = function () {
+/**
+ *
+ * @param {Object} [params]
+ * @param {string} [params.mapCanvasType=OPEN_LAYERS]
+ * @returns {Project}
+ */
+Helper.prototype.createProject = function (params) {
+  if (params === undefined) {
+    params = {};
+  }
+  if (params.mapCanvasType === undefined) {
+    params.mapCanvasType = "OPEN_LAYERS";
+  }
   var result = new Project();
   result.setProjectId("testId");
   result.setId(this.idCounter++);
   result.addModel(this.createModel());
-  var overlay = this.createOverlay(result);
-  result.addDataOverlay(overlay);
+  var overlay = this.createOverlay(result.getModels()[0]);
+  result.addDataOverlay(overlay, false);
+  result.setMapCanvasType(params.mapCanvasType);
   return result;
 };
 
@@ -330,7 +343,7 @@ Helper.prototype.createModel = function () {
 
 /**
  *
- * @param {Model} [model]
+ * @param {MapModel} [model]
  * @returns {DataOverlay}
  */
 Helper.prototype.createOverlay = function (model) {

frontend-js/src/test/js/map/canvas/GoogleMaps/GoogleMapsApiCanvas-test.js

@@ -93,7 +93,8 @@ describe('GoogleMapsApiCanvas', function () {
   });
 
   it("create polygon through drawingManager", function () {
-    var map = helper.createCustomMap();
+    var project = helper.createProject({mapCanvasType: "GOOGLE_MAPS_API"});
+    var map = helper.createCustomMap(project);
     var canvas = map.getMapCanvas();
 
     map.setSelectionContextMenu(new SelectionContextMenu({
@@ -188,7 +189,8 @@ describe('GoogleMapsApiCanvas', function () {
   });
 
   it("removeSelection", function () {
-    var map = helper.createCustomMap();
+    var project = helper.createProject({mapCanvasType: "GOOGLE_MAPS_API"});
+    var map = helper.createCustomMap(project);
     map.setActiveSubmapId(map.getId());
     map.getMapCanvas().setSelectedArea(new google.maps.Rectangle({}));