map is moved when pop up window is outisde of map box

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

@@ -33,6 +33,7 @@ function MapCanvas(element, options) {
   this.registerListenerType("shape-rightclick");
 
   this.setOptions(options);
+  this.setElement(element);
 
   // following fields are used in conversion between x,y coordinates and lat,lng
   // coordinates
@@ -66,6 +67,15 @@ MapCanvas.prototype.setOptions = function (options) {
 MapCanvas.prototype.getOptions = function () {
   return this._options;
 };
+
+MapCanvas.prototype.setElement = function (element) {
+  this._element = element;
+};
+
+MapCanvas.prototype.getElement = function () {
+  return this._element;
+};
+
 /**
  *
  * @returns {number}

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

@@ -9,6 +9,9 @@ var Functions = require('../../../Functions');
 
 var Promise = require('bluebird');
 
+/**
+ * https://stackoverflow.com/a/45092467/1127920
+ */
 function modifyPopover() {
   if ($.fn.popover.Constructor.prototype.reposition === undefined) {
     $.fn.popover.Constructor.prototype.reposition = function () {
@@ -38,10 +41,11 @@ function modifyPopover() {
           .removeClass(orgPlacement)
           .addClass(placement)
       }
-
       var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight);
 
-      this.applyPlacement(calculatedOffset, placement)
+      this.applyPlacement(calculatedOffset, placement);
+
+      this.$element[0].__calculatedToolTipOffset = calculatedOffset;
     }
   }
 }
@@ -78,7 +82,7 @@ function OpenLayerInfoWindow(options) {
   self._visible = false;
   self.setContent(options.content);
 
-  //the only way that I found how to keep track if the window is opened or noth
+  //the only way that I found how to keep track if the window is opened or not
   $(element).on('hidden.bs.popover', function () {
     self._visible = false;
   });
@@ -105,7 +109,25 @@ OpenLayerInfoWindow.prototype.updatePosition = function () {
   popup.setPosition(position);
 
   return Promise.delay(100).then(function () {
+    var oldOffset = self._element.__calculatedToolTipOffset;
+    var oldDy = 0;
+    if (oldOffset) {
+      oldDy = oldOffset.top;
+    }
     $(self._element).popover('reposition');
+    var dy = self._element.__calculatedToolTipOffset.top;
+    if (!self.isOpened()) {
+      self._element.__calculatedToolTipOffset = oldOffset;
+    } else {
+      var mapOffset = self.getMap().getElement().getBoundingClientRect();
+      if (dy < mapOffset.y && self.isOpened() && oldDy !== dy) {
+        dy -= mapOffset.y;
+        dy *= self.getMap().zoomFactor / Math.pow(2, self.getMap().getZoom());
+        var center = self.getMap().getCenter();
+        center.y += dy;
+        return self.getMap().setCenter(center);
+      }
+    }
   });
 };