center button has a css selector

frontend-js/src/main/css/global.css

@@ -303,6 +303,11 @@
     cursor: pointer;
 }
 
+.minerva-center-map-button > i.fa {
+    font-size: 24px;
+    color: grey
+}
+
 /* twitter typeahead */
 .tt-query /* UPDATE: newer versions use tt-input instead of tt-query */
 {

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

@@ -172,6 +172,19 @@ CustomMap.prototype.createLogo = function () {
   });
   logoControlDiv.appendChild(logo);
   this.getMapCanvas().addRightBottomControl(logoControlDiv);
+
+  this.getMapCanvas().addRightTopControl(Functions.createElement({
+    type: "a",
+    content: "<i class='fa fa-crosshairs'></i>&nbsp;",
+    title: "center map",
+    className: "minerva-center-map-button",
+    href: "#",
+    onclick: function () {
+      var bounds = new Bounds(new Point(0, 0), new Point(self.getWidth(), self.getHeight()));
+      return self.getMapCanvas().fitBounds(bounds);
+    },
+    xss: false
+  }));
 };
 
 /**

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

@@ -36,7 +36,6 @@ function GoogleMapsApiCanvas(element, options) {
   var self = this;
   self.setGoogleMap(new google.maps.Map(element, self.prepareGoogleMapOptions(options)));
   self.setupBackgroundOverlays(options.backgroundOverlays);
-  self.addCenterButton();
 
   google.maps.event.addListener(this.getGoogleMap(), "click", function (e) {
     return self.callListeners("click", {point: self.fromLatLngToPoint(e.latLng)});
@@ -167,27 +166,16 @@ GoogleMapsApiCanvas.prototype.prepareGoogleMapOptions = function (options) {
 };
 
 /**
- * Adds center button to the map.
+ *
+ * @param {HTMLElement} element
  */
-GoogleMapsApiCanvas.prototype.addCenterButton = function () {
-  var self = this;
-  var centerDiv = Functions.createElement({
+GoogleMapsApiCanvas.prototype.addRightTopControl = function (element) {
+  var wrapper = 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 Bounds(new Point(0, 0), new Point(self.getWidth(), self.getHeight()));
-      return self.fitBounds(bounds);
-    },
-    xss: false
-  });
-  centerDiv.appendChild(centerButton);
-  self.getGoogleMap().controls[google.maps.ControlPosition.RIGHT_TOP].push(centerDiv);
+  wrapper.appendChild(element);
+  this.getGoogleMap().controls[google.maps.ControlPosition.RIGHT_TOP].push(wrapper);
 };
 
 

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

@@ -92,7 +92,6 @@ function OpenLayerCanvas(element, options) {
     ])
   });
   self.setOpenLayersMap(map);
-  self.addCenterButton();
 
   map.on("click", function (e) {
     var features = [];
@@ -317,25 +316,16 @@ OpenLayerCanvas.prototype.addRightBottomControl = function (element) {
 };
 
 /**
- * Adds center button to the map.
+ *
+ * @param {HTMLElement} element
  */
-OpenLayerCanvas.prototype.addCenterButton = function () {
+OpenLayerCanvas.prototype.addRightTopControl = function (element) {
   var self = this;
   var wrapper = Functions.createElement({
     type: "div",
     className: "ol-control minerva-ol-top-right"
   });
-  wrapper.appendChild(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 Bounds(new Point(0, 0), new Point(self.getWidth(), self.getHeight()));
-      return self.fitBounds(bounds);
-    },
-    xss: false
-  }));
+  wrapper.appendChild(element);
   this.getOpenLayersMap().addControl(new ol.control.Control({element: wrapper}));
 };
 

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

@@ -36,11 +36,6 @@ describe('GoogleMapsApiCanvas', function () {
 
   });
 
-  it("centerButton", function () {
-    var canvas = new GoogleMapsApiCanvas(testDiv, testOptions);
-    return canvas.getGoogleMap().controls[google.maps.ControlPosition.RIGHT_TOP][0].firstChild.onclick();
-  });
-
   it("latLngToTile", function () {
     var canvas = new GoogleMapsApiCanvas(testDiv, testOptions);