center button for maps

frontend-js/src/main/js/Functions.js

@@ -280,6 +280,9 @@ Functions.createElement = function (params) {
   if (params.value !== null && params.value !== undefined) {
     result.value = params.value;
   }
+  if (params.title !== null && params.title !== undefined) {
+    result.title = params.title;
+  }
   return result;
 };
 

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

@@ -890,6 +890,32 @@ AbstractCustomMap.prototype._createMapChangedCallbacks = function () {
   });
 };
 
+AbstractCustomMap.prototype.addCenterButton = function () {
+  var self = this;
+  var centerDiv = functions.createElement({
+    type: "div",
+    style: "padding:5px"
+  });
+  var centerButton = functions.createElement({
+    type: "a",
+    content: "<i class='fa fa-crosshairs' style='font-size:24px;color:grey'></i>&nbsp;",
+    title: "center map",
+    href: "#",
+    onclick: function () {
+      var bounds = new google.maps.LatLngBounds();
+      bounds.extend(self.getTopLeftLatLng());
+      bounds.extend(self.getBottomRightLatLng());
+
+      self.getGoogleMap().fitBounds(bounds);
+      return false;
+    },
+    xss: false
+  });
+  centerDiv.appendChild(centerButton);
+  self.getGoogleMap().controls[google.maps.ControlPosition.RIGHT_TOP].push(centerDiv);
+
+};
+
 /**
  * Returns {@link ReactionInfoWindow} for given reaction identifier
  *

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

@@ -434,33 +434,36 @@ CustomMap.prototype.openSubmap = function (id) {
 };
 
 CustomMap.prototype.customizeGoogleMapView = function (div) {
-  var mapOptions = this.createMapOptions();
-  this.setGoogleMap(new google.maps.Map(div, mapOptions));
-  this.setupLayouts();
+  var self = this;
+
+  var mapOptions = self.createMapOptions();
+  self.setGoogleMap(new google.maps.Map(div, mapOptions));
+  self.addCenterButton();
+  self.setupLayouts();
 
-  this.registerMapClickEvents();
+  self.registerMapClickEvents();
 
-  this.createLogo();
+  self.createLogo();
   // this.createMapVersion();
-  google.maps.event.trigger(this.getGoogleMap(), 'resize');
-  google.maps.event.trigger(this.getGoogleMap(), 'maptypeid_changed');
-  google.maps.event.trigger(this.getGoogleMap(), 'projection_changed');
+  google.maps.event.trigger(self.getGoogleMap(), 'resize');
+  google.maps.event.trigger(self.getGoogleMap(), 'maptypeid_changed');
+  google.maps.event.trigger(self.getGoogleMap(), 'projection_changed');
 
   // center map and zoom in to fit into browser window if there is no
   // information about coordinates in the session
-  if (ServerConnector.getSessionData(this.getProject()).getCenter(this.getModel()) === undefined &&
-    (this.getModel().getDefaultCenterX() === undefined ||
-      this.getModel().getDefaultCenterY() === undefined ||
-      this.getModel().getDefaultZoomLevel() === undefined ||
-      this.getModel().getDefaultCenterX() === null ||
-      this.getModel().getDefaultCenterY() === null ||
-      this.getModel().getDefaultZoomLevel() === null
+  if (ServerConnector.getSessionData(self.getProject()).getCenter(self.getModel()) === undefined &&
+    (self.getModel().getDefaultCenterX() === undefined ||
+      self.getModel().getDefaultCenterY() === undefined ||
+      self.getModel().getDefaultZoomLevel() === undefined ||
+      self.getModel().getDefaultCenterX() === null ||
+      self.getModel().getDefaultCenterY() === null ||
+      self.getModel().getDefaultZoomLevel() === null
     )) {
     var bounds = new google.maps.LatLngBounds();
-    bounds.extend(this.getTopLeftLatLng());
-    bounds.extend(this.getBottomRightLatLng());
+    bounds.extend(self.getTopLeftLatLng());
+    bounds.extend(self.getBottomRightLatLng());
 
-    this.getGoogleMap().fitBounds(bounds);
+    self.getGoogleMap().fitBounds(bounds);
   }
 };
 

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

@@ -17,18 +17,18 @@ var TouchMap = require('./TouchMap');
  *          identifier of the submap
  */
 function Submap(customMap, model) {
-    this.setCustomMap(customMap);
-
-    AbstractCustomMap.call(this, model, new CustomMapOptions({
-        element: customMap.getGoogleMap().getDiv(),
-        markerOptimization: customMap.isMarkerOptimization(),
-        bigLogo: customMap.isBigLogo(),
-        customTouchInterface: customMap.isCustomTouchInterface(),
-        project: null,
-        debug: customMap.isDebug()
-    }));
-
-    this.initialized = false;
+  this.setCustomMap(customMap);
+
+  AbstractCustomMap.call(this, model, new CustomMapOptions({
+    element: customMap.getGoogleMap().getDiv(),
+    markerOptimization: customMap.isMarkerOptimization(),
+    bigLogo: customMap.isBigLogo(),
+    customTouchInterface: customMap.isCustomTouchInterface(),
+    project: null,
+    debug: customMap.isDebug()
+  }));
+
+  this.initialized = false;
 }
 
 // implementation of object inheritance
@@ -43,98 +43,100 @@ Submap.prototype.constructor = Submap;
  *          html div tag where google map should be placed
  */
 Submap.prototype.open = function (htmlTag) {
-    var self = this;
+  var self = this;
 
-    if (!this.initialized) {
-        self.htmlTag = htmlTag;
+  if (!this.initialized) {
+    self.htmlTag = htmlTag;
 
-        var mapOptions = self.createMapOptions(self.getLayouts().length);
+    var mapOptions = self.createMapOptions(self.getLayouts().length);
 
-        var contentDiv = document.createElement("div");
-        contentDiv.setAttribute("name", "submap-div-" + self.getId());
-        contentDiv.style.width = "100%";
-        contentDiv.style.height = "100%";
-        htmlTag.appendChild(contentDiv);
+    var contentDiv = document.createElement("div");
+    contentDiv.setAttribute("name", "submap-div-" + self.getId());
+    contentDiv.style.width = "100%";
+    contentDiv.style.height = "100%";
+    htmlTag.appendChild(contentDiv);
 
-        var mapDiv = document.createElement("div");
-        mapDiv.style.width = "100%";
-        mapDiv.style.height = "100%";
-        contentDiv.appendChild(mapDiv);
+    var mapDiv = document.createElement("div");
+    mapDiv.style.width = "100%";
+    mapDiv.style.height = "100%";
+    contentDiv.appendChild(mapDiv);
 
     $(self.htmlTag).dialog({
-      title : self.getModel().getName(),
-      width : Math.floor(window.innerWidth * 2 / 3),
-      height : Math.floor(window.innerHeight * 2 / 3),
-      position : {
-        my : "center",
-        at : "center",
-        of : $(self.getTopMap().getElement()),
+      title: self.getModel().getName(),
+      width: Math.floor(window.innerWidth * 2 / 3),
+      height: Math.floor(window.innerHeight * 2 / 3),
+      position: {
+        my: "center",
+        at: "center",
+        of: $(self.getTopMap().getElement())
       },
-      resize: function() {
+      resize: function () {
         google.maps.event.trigger(self.getGoogleMap(), 'resize');
       }
     });
 
-        $(self.htmlTag).dialog("open");
+    $(self.htmlTag).dialog("open");
 
-        self.setGoogleMap(new google.maps.Map(mapDiv, mapOptions));
-        self._createMapChangedCallbacks();
+    self.setGoogleMap(new google.maps.Map(mapDiv, mapOptions));
+
+    self._createMapChangedCallbacks();
 
     google.maps.event.trigger(self.getGoogleMap(), 'resize');
 
-        if (self.isCustomTouchInterface()) {
-            self._touchInterface = new TouchMap(self);
-        }
+    if (self.isCustomTouchInterface()) {
+      self._touchInterface = new TouchMap(self);
+    }
 
-        self.setupLayouts();
+    self.setupLayouts();
 
-        self.registerMapClickEvents();
+    self.registerMapClickEvents();
 
-        var centerPoint = self.getModel().getCenterLatLng();
-        self.getGoogleMap().setCenter(centerPoint);
+    var centerPoint = self.getModel().getCenterLatLng();
+    self.getGoogleMap().setCenter(centerPoint);
+    self.addCenterButton();
 
-        var sessionData = ServerConnector.getSessionData(this.getProject());
-        // and now send the zoom level to the client side
-        google.maps.event.addListener(self.getGoogleMap(), 'zoom_changed', function () {
-            sessionData.setZoomLevel(self.getModel(), self.getGoogleMap().getZoom());
-        });
+    var sessionData = ServerConnector.getSessionData(this.getProject());
+    // and now send the zoom level to the client side
+    google.maps.event.addListener(self.getGoogleMap(), 'zoom_changed', function () {
+      sessionData.setZoomLevel(self.getModel(), self.getGoogleMap().getZoom());
+    });
 
-        sessionData.setZoomLevel(self.getModel(), self.getGoogleMap().getZoom());
+    sessionData.setZoomLevel(self.getModel(), self.getGoogleMap().getZoom());
 
-        self.initialized = true;
-    } else {
-        $(self.htmlTag).dialog("open");
-    }
+    self.initialized = true;
+  } else {
+    $(self.htmlTag).dialog("open");
+  }
 
 };
 
 Submap.prototype.openDataOverlay = function (identifier) {
-    if (this.initialized) {
-        this.getGoogleMap().setMapTypeId(identifier.toString());
-    }
+  if (this.initialized) {
+    this.getGoogleMap().setMapTypeId(identifier.toString());
+  }
 };
 
 Submap.prototype.getTopMap = function () {
-    return this.getCustomMap();
+  return this.getCustomMap();
 };
 
 Submap.prototype.getCustomMap = function () {
-    return this._customMap;
+  return this._customMap;
 };
 
 Submap.prototype.setCustomMap = function (customMap) {
-    this._customMap = customMap;
+  this._customMap = customMap;
 };
 
 Submap.prototype.getProject = function () {
-    return this.getCustomMap().getProject();
+  return this.getCustomMap().getProject();
 };
 
 Submap.prototype.destroy = function () {
-    var self = this;
-    if (self.initialized) {
-        $(self.htmlTag).dialog("destroy");
-    }
+  var self = this;
+  if (self.initialized) {
+    $(self.htmlTag).dialog("destroy");
+  }
 };
 
 module.exports = Submap;

frontend-js/src/test/js/google-map-mock.js

@@ -58,7 +58,8 @@ var google = {
     ControlPosition: {
       TOP_LEFT: "TOP_LEFT",
       LEFT_BOTTOM: "LEFT_BOTTOM",
-      RIGHT_BOTTOM: "RIGHT_BOTTOM"
+      RIGHT_BOTTOM: "RIGHT_BOTTOM",
+      RIGHT_TOP: "RIGHT_TOP"
     },
     LatLng: function (lat, lng) {
       this.latitude = parseFloat(lat);
@@ -174,7 +175,8 @@ var google = {
         controls: {
           "TOP_LEFT": [],
           "LEFT_BOTTOM": [],
-          "RIGHT_BOTTOM": []
+          "RIGHT_BOTTOM": [],
+          "RIGHT_TOP": []
         },
         getDiv: function () {
           return data.div;