working basic connection to OpenLayers

we can show map of the world

frontend-js/package.json

@@ -49,6 +49,7 @@
     "jszip": "^3.1.4",
     "log4js": "0.6.38",
     "multi-checkbox-list": "^0.2.0",
+    "openlayers": "^4.6.5",
     "pileup": "^0.6.8",
     "request": "^2.82.0",
     "spectrum-colorpicker": "^1.8.0",

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

@@ -20,6 +20,7 @@ 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');
 
@@ -451,7 +452,8 @@ CustomMap.prototype.openSubmap = function (id) {
 CustomMap.prototype.customizeGoogleMapView = function (div) {
   var self = this;
 
-  self.setMapCanvas(new GoogleMapsApiCanvas(div, self.createMapOptions()));
+  self.setMapCanvas(new OpenLayerCanvas(div, self.createMapOptions()));
+  // self.setMapCanvas(new GoogleMapsApiCanvas(div, self.createMapOptions()));
 
   self.registerMapClickEvents();
 

frontend-js/src/main/js/map/canvas/MapCanvas.js

@@ -149,4 +149,8 @@ MapCanvas.prototype.removeSelection = function () {
   throw new Error("Not implemented");
 };
 
+MapCanvas.prototype.triggerListeners = function (type, data) {
+  throw new Error("Not implemented");
+};
+
 module.exports = MapCanvas;

frontend-js/src/main/js/map/canvas/OpenLayers/OpenLayerCanvas.js

+"use strict";
+
+var ol;
+
+var logger = require('../../../logger');
+
+var Bounds = require('../Bounds');
+var Functions = require('../../../Functions');
+var MapCanvas = require('../MapCanvas');
+var Point = require('../Point');
+
+function OpenLayerCanvas(element, options) {
+  ol = require('openlayers/dist/ol-debug');
+
+  MapCanvas.call(this, element, options);
+  var self = this;
+  self.setOpenLayersMap(new ol.Map({
+    target: element,
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.OSM()
+      })
+    ],
+    view: new ol.View({
+      center: [0, 0],
+      zoom: 0
+    })
+  }));
+}
+
+OpenLayerCanvas.prototype = Object.create(MapCanvas.prototype);
+OpenLayerCanvas.prototype.constructor = MapCanvas;
+
+OpenLayerCanvas.prototype.setOpenLayersMap = function (map) {
+  this._map = map;
+};
+
+OpenLayerCanvas.prototype.setOptions = function (options) {
+  this._options = options;
+};
+OpenLayerCanvas.prototype.getOptions = function () {
+  return this._options;
+};
+
+OpenLayerCanvas.prototype.getTileSize = function () {
+  return this.getOptions().tileSize;
+};
+OpenLayerCanvas.prototype.getMaxZoom = function () {
+  return this.getOptions().maxZoom;
+};
+OpenLayerCanvas.prototype.getMinZoom = function () {
+  return this.getOptions().minZoom;
+};
+OpenLayerCanvas.prototype.getWidth = function () {
+  return this.getOptions().width;
+};
+OpenLayerCanvas.prototype.getHeight = function () {
+  return this.getOptions().height;
+};
+
+OpenLayerCanvas.prototype.createMarker = function (options) {
+  logger.fatal("Not implemented");
+};
+
+OpenLayerCanvas.prototype.createInfoWindow = function (options) {
+  logger.fatal("Not implemented");
+};
+
+OpenLayerCanvas.prototype.createRectangle = function (options) {
+  logger.fatal("Not implemented");
+};
+
+OpenLayerCanvas.prototype.createPolyline = function (options) {
+  logger.fatal("Not implemented");
+};
+
+OpenLayerCanvas.prototype.addLeftBottomControl = function (element) {
+  logger.fatal("Not implemented");
+};
+
+OpenLayerCanvas.prototype.addRightBottomControl = function (element) {
+  logger.fatal("Not implemented");
+};
+
+OpenLayerCanvas.prototype.fitBounds = function (bounds) {
+  logger.fatal("Not implemented");
+};
+
+OpenLayerCanvas.prototype.setCenter = function (center) {
+  logger.fatal("Not implemented");
+};
+
+/**
+ * @returns {Point}
+ */
+OpenLayerCanvas.prototype.getCenter = function () {
+  logger.fatal("Not implemented");
+};
+OpenLayerCanvas.prototype.getZoom = function () {
+  logger.fatal("Not implemented");
+};
+OpenLayerCanvas.prototype.setZoom = function (zoom) {
+  logger.fatal("Not implemented");
+};
+
+/**
+ * @returns {string}
+ */
+OpenLayerCanvas.prototype.getBackgroundId = function () {
+  logger.fatal("Not implemented");
+  return this._backgroundId;
+};
+
+OpenLayerCanvas.prototype.setBackgroundId = function (backgroundId) {
+  this._backgroundId = backgroundId;
+  logger.fatal("Not implemented");
+};
+
+/**
+ * @returns {Bounds}
+ */
+OpenLayerCanvas.prototype.getBounds = function () {
+  logger.fatal("Not implemented");
+};
+
+/**
+ * It toggle drawing manager used on the map: if it's on then it will turn it
+ * off, if it's off it will turn it on
+ *
+ */
+OpenLayerCanvas.prototype.toggleDrawing = function () {
+  if (this.isDrawingOn()) {
+    this.turnOffDrawing();
+  } else {
+    this.turnOnDrawing();
+  }
+};
+
+OpenLayerCanvas.prototype.turnOnDrawing = function () {
+  logger.fatal("Not implemented");
+};
+OpenLayerCanvas.prototype.turnOffDrawing = function () {
+  logger.fatal("Not implemented");
+};
+/**
+ * @returns {boolean}
+ */
+OpenLayerCanvas.prototype.isDrawingOn = function () {
+  logger.fatal("Not implemented");
+};
+
+OpenLayerCanvas.prototype.setSelectedArea = function (area) {
+  logger.fatal("Not implemented");
+};
+
+OpenLayerCanvas.prototype.getSelectedArea = function () {
+  logger.fatal("Not implemented");
+};
+
+OpenLayerCanvas.prototype.removeSelection = function () {
+  logger.fatal("Not implemented");
+};
+
+MapCanvas.prototype.triggerListeners = function (type, data) {
+  logger.fatal("Not implemented");
+};
+
+module.exports = OpenLayerCanvas;

frontend-js/src/test/js/mocha-config.js

@@ -3,6 +3,7 @@
 var Promise = require("bluebird");
 var Cookies = require('js-cookie');
 
+
 var Helper = require('./helper');
 
 var GuiConnector = require('./GuiConnector-mock');
@@ -65,8 +66,6 @@ before(function () {
   global.MouseEvent = window.MouseEvent;
   global.FileReader = window.FileReader;
 
-  var originalCreateElement = document.createElement;
-
   window.open = function () {
     var result = {};
     result.focus = function () {
@@ -78,6 +77,75 @@ before(function () {
 
   };
 
+  //CANVAS mocking
+  window.HTMLCanvasElement.prototype.getContext = function () {
+    return {
+      fillRect: function () {
+      },
+      clearRect: function () {
+      },
+      getImageData: function (x, y, w, h) {
+        return {
+          data: new Array(w * h * 4)
+        };
+      },
+      putImageData: function () {
+      },
+      createImageData: function () {
+        return []
+      },
+      setTransform: function () {
+      },
+      drawImage: function () {
+      },
+      save: function () {
+      },
+      fillText: function () {
+      },
+      restore: function () {
+      },
+      beginPath: function () {
+      },
+      moveTo: function () {
+      },
+      lineTo: function () {
+      },
+      closePath: function () {
+      },
+      stroke: function () {
+      },
+      translate: function () {
+      },
+      scale: function () {
+      },
+      rotate: function () {
+      },
+      arc: function () {
+      },
+      fill: function () {
+      },
+      measureText: function () {
+        return {width: 0};
+      },
+      transform: function () {
+      },
+      rect: function () {
+      },
+      clip: function () {
+      },
+      canvas: document.createElement("div")
+    };
+  };
+
+  window.HTMLCanvasElement.prototype.toDataURL = function () {
+    return "";
+  };
+
+  //open layers uses this function
+  global.requestAnimationFrame = function () {
+  };
+  global.getComputedStyle = window.getComputedStyle;
+
 // pileup is using heavily some browser defined javascript
   var pileup = require('pileup');
   pileup.create = function () {
@@ -94,7 +162,7 @@ before(function () {
   };
 // ---
   // MolStar is inproperly packed
-  global.MolStar = function(){
+  global.MolStar = function () {
 
   };
 // ---
@@ -139,7 +207,7 @@ beforeEach(function () {
     global.helper = new Helper(configuration);
     helper.setUrl("http://test/");
     GuiConnector.init();
-  }).catch(function(error){
+  }).catch(function (error) {
     logger.error(error);
     throw error;
   });