diff --git a/frontend-js/src/main/js/Functions.js b/frontend-js/src/main/js/Functions.js
index b2530bf5db61dc1907d2aed9e785e13de536be67..5ee90acf0c7379a499ab95c1fb6147e75c2bdfad 100644
--- a/frontend-js/src/main/js/Functions.js
+++ b/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;
};
diff --git a/frontend-js/src/main/js/map/AbstractCustomMap.js b/frontend-js/src/main/js/map/AbstractCustomMap.js
index f896ece5133af5e6a0644be9b66ccf865c048c99..e64db0d71be14a055e2c3294d18839b531b7b18c 100644
--- a/frontend-js/src/main/js/map/AbstractCustomMap.js
+++ b/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> ",
+ 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
*
diff --git a/frontend-js/src/main/js/map/CustomMap.js b/frontend-js/src/main/js/map/CustomMap.js
index 71db44e636a77f7a88f4eadfd5a65a92466dccfa..0aeb74b676520cfcb41c8cf21ebd5e0295e26504 100644
--- a/frontend-js/src/main/js/map/CustomMap.js
+++ b/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);
}
};
diff --git a/frontend-js/src/main/js/map/Submap.js b/frontend-js/src/main/js/map/Submap.js
index 362215fccfc092f8a8aab41f62e05898f6af110f..34e577a64019a616d426538d5bbe03fed10bc19e 100644
--- a/frontend-js/src/main/js/map/Submap.js
+++ b/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;
diff --git a/frontend-js/src/test/js/google-map-mock.js b/frontend-js/src/test/js/google-map-mock.js
index e81caeaa017953026ce8d9c8d1310275d5d4d334..da044a1d7bdcb24059c6b8b8d4d5e2dd09ec14dc 100644
--- a/frontend-js/src/test/js/google-map-mock.js
+++ b/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;