diff --git a/public_html/script.js b/public_html/script.js
index 960267a..e9c8913 100644
--- a/public_html/script.js
+++ b/public_html/script.js
@@ -103,6 +103,7 @@ function processReceiverUpdate(data) {
showMap();
}
selectPlaneByHex(h, false);
+ adjustSelectedInfoBlockPosition();
evt.preventDefault();
}.bind(undefined, hex));
@@ -111,6 +112,7 @@ function processReceiverUpdate(data) {
showMap();
}
selectPlaneByHex(h, true);
+ adjustSelectedInfoBlockPosition();
evt.preventDefault();
}.bind(undefined, hex));
@@ -540,6 +542,7 @@ function initialize_map() {
null);
if (hex) {
selectPlaneByHex(hex, (evt.type === 'dblclick'));
+ adjustSelectedInfoBlockPosition();
evt.stopPropagation();
} else {
deselectAllPlanes();
@@ -1177,6 +1180,70 @@ function setSelectedInfoBlockVisibility() {
}
}
+// Reposition selected plane info box if it overlaps plane marker
+function adjustSelectedInfoBlockPosition() {
+ if (typeof Planes === 'undefined' || typeof SelectedPlane === 'undefined' || Planes === null) {
+ return;
+ }
+
+ var selectedPlane = Planes[SelectedPlane];
+
+ if (selectedPlane === undefined || selectedPlane === null || selectedPlane.marker === undefined || selectedPlane.marker === null) {
+ return;
+ }
+
+ try {
+ // Get marker position
+ var marker = selectedPlane.marker;
+ var markerCoordinates = selectedPlane.marker.getGeometry().getCoordinates();
+ var markerPosition = OLMap.getPixelFromCoordinate(markerCoordinates);
+
+ // Get info box position and size
+ var infoBox = $('#selected_infoblock');
+ var infoBoxPosition = infoBox.position();
+ var infoBoxExtent = getExtent(infoBoxPosition.left, infoBoxPosition.top, infoBox.width(), infoBox.height());
+
+ // Get map size
+ var mapCanvas = $('#map_canvas');
+ var mapExtent = getExtent(0, 0, mapCanvas.width(), mapCanvas.height());
+
+ // Check for overlap
+ if (isPointInsideExtent(markerPosition[0], markerPosition[1], infoBoxExtent)) {
+ // Array of possible new positions for info box
+ var candidatePositions = [];
+ candidatePositions.push( { x: 20, y: 20 } );
+ candidatePositions.push( { x: 20, y: markerPosition[1] + 40 } );
+
+ // Find new position
+ for (var i = 0; i < candidatePositions.length; i++) {
+ var candidatePosition = candidatePositions[i];
+ var candidateExtent = getExtent(candidatePosition.x, candidatePosition.y, infoBox.width(), infoBox.height());
+
+ if (!isPointInsideExtent(markerPosition[0], markerPosition[1], candidateExtent) && isPointInsideExtent(candidatePosition.x, candidatePosition.y, mapExtent)) {
+ // Found a new position that doesn't overlap marker - move box to that position
+ infoBox.css("left", candidatePosition.x);
+ infoBox.css("top", candidatePosition.y);
+ return;
+ }
+ }
+ }
+ }
+ catch(e) { }
+}
+
+function getExtent(x, y, width, height) {
+ return {
+ xMin: x,
+ yMin: y,
+ xMax: x + width - 1,
+ yMax: y + height - 1,
+ };
+}
+
+function isPointInsideExtent(x, y, extent) {
+ return x >= extent.xMin && x <= extent.xMax && y >= extent.yMin && y <= extent.yMax;
+}
+
function initializeUnitsSelector() {
// Get display unit preferences from local storage
if (!localStorage.getItem('displayUnits')) {