responsive map height (gridmap and lba)

application/views/activated_gridmap/index.php

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container gridsquare_map_form">
 
 	<br>
 
@@ -96,7 +96,7 @@
 </div>
 
 <div id="gridmapcontainer">
-	<div id="gridsquare_map" class="map-leaflet" style="width: 100%; height: 800px"></div>
+	<div id="gridsquare_map" class="map-leaflet" style="width: 100%;"></div>
 </div>
 <div class="coordinates d-flex">
         <div class="cohidden"><?php echo lang('gen_hamradio_latitude')?>:&nbsp;</div>

application/views/awards/ffma/index.php

@@ -1,21 +1,5 @@
 
-
-<style>
-.coordinates {
-    justify-content: center;
-    align-items: stretch;
-}
-.cohidden {
-    display:none;
-}
-#latDeg, #lngDeg {
-    width: 170px;
-}
-#locator, #distance, #bearing {
-    width: 120px;
-}
-</style>
-<div class="container">
+<div class="container gridsquare_map_form">
         <!-- Award Info Box -->
         <br>
         <div id="awardInfoButton">
@@ -40,7 +24,7 @@
 </div>
 
 <div id="gridmapcontainer">
-	<div id="gridsquare_map" class="map-leaflet" style="width: 100%; height: 800px"></div>
+	<div id="gridsquare_map" class="map-leaflet" style="width: 100%;"></div>
 </div>
 <div class="coordinates d-flex">
         <div class="cohidden"><?php echo lang('gen_hamradio_latitude')?>: </div>

application/views/awards/gridmaster/index.php

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container gridsquare_map_form">
         <!-- Award Info Box -->
         <br>
         <div id="awardInfoButton">
@@ -23,7 +23,7 @@
 
 
 <div id="gridmapcontainer">
-	<div id="gridsquare_map" class="map-leaflet" style="width: 100%; height: 800px"></div>
+	<div id="gridsquare_map" class="map-leaflet" style="width: 100%;"></div>
 </div>
 <div class="coordinates d-flex">
         <div class="cohidden"><?php echo lang('gen_hamradio_latitude')?>: </div>

application/views/gridmap/index.php

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container gridsquare_map_form">
 
     <br>
 
@@ -140,7 +140,7 @@
 </div>
 
 <div id="gridmapcontainer">
-    <div id="gridsquare_map" class="map-leaflet" style="width: 100%; height: 800px"></div>
+    <div id="gridsquare_map" class="map-leaflet" style="width: 100%;"></div>
 </div>
 <div class="coordinates d-flex">
     <div class="cohidden"><?php echo lang('gen_hamradio_latitude') ?>:&nbsp;</div>

assets/css/cosmo_wide/overrides.css

@@ -65,11 +65,6 @@
 	height: 500px !important;
 }
 
-#gridsquare_map {
-	height: calc(100vh - 380px) !important;
-	max-height: 900px !important;
-}
-
 @media (min-width: 992px) {
 	.modal-lg, .modal-xl {
 		max-width: 1300px;

assets/css/cyborg_wide/overrides.css

@@ -223,11 +223,6 @@ path.grid-worked {
 	height: 500px !important;
 }
 
-#gridsquare_map {
-	height: calc(100vh - 380px) !important;
-	max-height: 900px !important;
-}
-
 #mapqso {
 	height: 400px !important;
 }

assets/css/darkly_wide/overrides.css

@@ -241,11 +241,6 @@ div.alert-danger {
 	height: 500px !important;
 }
 
-#gridsquare_map {
-	height: calc(100vh - 380px) !important;
-	max-height: 900px !important;
-}
-
 #mapqso {
 	height: 400px !important;
 }

assets/css/default_wide/overrides.css

@@ -65,11 +65,6 @@ thead > tr > td {
 	height: 500px !important;
 }
 
-#gridsquare_map {
-	height: calc(100vh - 380px) !important;
-	max-height: 900px !important;
-}
-
 @media (min-width: 992px) {
 	.modal-lg, .modal-xl {
 		max-width: 1300px;

assets/css/general.css

@@ -666,11 +666,6 @@ div#station_logbooks_linked_table_paginate {
 	margin-bottom: 0px;
 }
 
-#advancedmap {
-	height: calc(100vh - 280px) !important;
-	max-height: 1000px !important;
-}
-
 .lotw-cert-list table {
 	margin-bottom: 0px;
 }
@@ -840,9 +835,14 @@ label {
 }
 
 .coordinates {
-    justify-content: center;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+	justify-content: center;
     align-items: stretch;
 }
+
 .cohidden {
     display:none;
 }

assets/css/superhero_wide/overrides.css

@@ -87,11 +87,6 @@ path.grid-worked {
 	height: 400px !important;
 }
 
-#gridsquare_map {
-	height: calc(100vh - 380px) !important;
-	max-height: 900px !important;
-}
-
 /* 
 *	Dark Navigation 
 */

assets/js/sections/common.js

@@ -929,6 +929,28 @@ $(document).ready(function() {
     }
 });
 
+// auto setting of gridmap height
+function set_map_height() {
+    //header menu
+    var headerNavHeight = $('nav').outerHeight();
+    // console.log('nav: ' + headerNavHeight);
+
+    // line with coordinates
+    var coordinatesHeight = $('.coordinates').outerHeight();
+    // console.log('.coordinates: ' + coordinatesHeight);
+
+    // form for gridsquare map
+    var gridsquareFormHeight = $('.gridsquare_map_form').outerHeight();
+    // console.log('.gridsquare_map_form: ' + gridsquareFormHeight);
+
+    // calculate correct map height
+    var gridsquareMapHeight = window.innerHeight - headerNavHeight - coordinatesHeight - gridsquareFormHeight;
+
+    // and set it
+    $('#gridsquare_map').css('height', gridsquareMapHeight + 'px');
+    // console.log('#gridsquare_map: ' + gridsquareMapHeight);
+}
+
 
 console.log("Ready to unleash your coding prowess and join the fun?\n\n" +
     "Check out our GitHub Repository and dive into the coding adventure:\n\n" +

assets/js/sections/ffma.js

@@ -13,7 +13,8 @@ function gridPlot(form) {
     if(container != null){
         container._leaflet_id = null;
         container.remove();
-        $("#gridmapcontainer").append('<div id="gridsquare_map" class="map-leaflet" style="width: 100%; height: 800px"></div>');
+        $("#gridmapcontainer").append('<div id="gridsquare_map" class="map-leaflet" style="width: 100%;"></div>');
+        set_map_height();
     }
 
     ajax_url = site_url + '/awards/getFfmaGridsjs';
@@ -23,6 +24,7 @@ function gridPlot(form) {
       type: 'get',
       success: function (data) {
             $('.cohidden').show();
+            set_map_height();
             $(".ld-ext-right-plot").removeClass('running');
             $(".ld-ext-right-plot").prop('disabled', false);
             $('#plot').prop("disabled", false);
@@ -145,5 +147,8 @@ function spawnGridsquareModal(loc_4char) {
 }
 
 $(document).ready(function(){
-   gridPlot(this.form);
+    gridPlot(this.form);
+    $(window).resize(function () {
+        set_map_height();
+    });
 })

assets/js/sections/gridmap.js

@@ -39,7 +39,8 @@ function gridPlot(form, visitor=true) {
     if(container != null){
         container._leaflet_id = null;
         container.remove();
-        $("#gridmapcontainer").append('<div id="gridsquare_map" class="map-leaflet" style="width: 100%; height: 800px"></div>');
+        $("#gridmapcontainer").append('<div id="gridsquare_map" class="map-leaflet" style="width: 100%;"></div>');
+        set_map_height();
     }
 
     if (typeof type == 'undefined') { type=''; }
@@ -68,6 +69,7 @@ function gridPlot(form, visitor=true) {
 		},
 		success: function (data) {
             $('.cohidden').show();
+            set_map_height();
             $(".ld-ext-right-plot").removeClass('running');
             $(".ld-ext-right-plot").prop('disabled', false);
             $('#plot').prop("disabled", false);
@@ -219,5 +221,8 @@ function clearMarkers() {
 }
 
 $(document).ready(function(){
-   gridPlot(this.form, visitor);
+    gridPlot(this.form, visitor);
+    $(window).resize(function () {
+        set_map_height();
+    });
 })

assets/js/sections/gridmaster.js

@@ -13,7 +13,8 @@ function gridPlot(form, dxcc) {
     if(container != null){
         container._leaflet_id = null;
         container.remove();
-        $("#gridmapcontainer").append('<div id="gridsquare_map" class="map-leaflet" style="width: 100%; height: 800px"></div>');
+        $("#gridmapcontainer").append('<div id="gridsquare_map" class="map-leaflet" style="width: 100%;"></div>');
+        set_map_height();
     }
 
     ajax_url = site_url + '/awards/getGridmasterGridsjs/'+dxcc;
@@ -27,6 +28,7 @@ function gridPlot(form, dxcc) {
 
       success: function (data) {
             $('.cohidden').show();
+            set_map_height();
             $(".ld-ext-right-plot").removeClass('running');
             $(".ld-ext-right-plot").prop('disabled', false);
             $('#plot').prop("disabled", false);
@@ -151,5 +153,8 @@ function spawnGridsquareModal(loc_4char) {
 }
 
 $(document).ready(function(){
-   gridPlot(this.form, dxcc);
+    gridPlot(this.form, dxcc);
+    $(window).resize(function () {
+        set_map_height();
+    });
 })

assets/js/sections/logbookadvanced_map.js

@@ -273,7 +273,7 @@ function loadMap(data, iconsList) {
 		container._leaflet_id = null;
 		container.remove();
 		$(".coordinates").remove();
-		$(".qso_manager").append('<div id="advancedmap" class="map-leaflet"></div>');
+		$("#lba_div").append('<div id="advancedmap" class="map-leaflet"></div>');
 		$(".qso_manager").append('<div class="coordinates d-flex">' +
         '<div class="cohidden">' + lang_gen_hamradio_latitude + '&nbsp;</div>' +
         '<div class="cohidden col-auto text-success fw-bold" id="latDeg"></div>' +
@@ -287,6 +287,7 @@ function loadMap(data, iconsList) {
         '<div class="cohidden col-auto text-success fw-bold" id="bearing"></div>' +
 		'</div>');
 		$('.cohidden').show();
+		set_advancedmap_height();
 	}
 
 	map = new L.Map('advancedmap', {
@@ -435,292 +436,323 @@ function loadMap(data, iconsList) {
 	}
 }
 
-	function createContentMessage(qso) {
-		var table = '<table><tbody>' +
-		'<tr>' +
-		'<td>' +
-		'Station callsign: ' + qso.mycallsign +
-		"</td></tr>" +
-		'<tr>' +
-		'<td>' +
-		'Gridsquare: ' + qso.mygridsquare +
-		"</td></tr>";
-		return (table += "</tbody></table>");
-	}
+function createContentMessage(qso) {
+	var table = '<table><tbody>' +
+	'<tr>' +
+	'<td>' +
+	'Station callsign: ' + qso.mycallsign +
+	"</td></tr>" +
+	'<tr>' +
+	'<td>' +
+	'Gridsquare: ' + qso.mygridsquare +
+	"</td></tr>";
+	return (table += "</tbody></table>");
+}
 
-	function createContentMessageDx(qso) {
-		var table = '<table><tbody>' +
-		'<tr>' +
-		'<td>Callsign</td>' +
-		'<td>' + qso.callsign + '</td>' +
-		'</tr>' +
-		'<tr>' +
-		'<td>Date/time</td>' +
-		'<td>' + qso.datetime + '</td>' +
+function createContentMessageDx(qso) {
+	var table = '<table><tbody>' +
+	'<tr>' +
+	'<td>Callsign</td>' +
+	'<td>' + qso.callsign + '</td>' +
+	'</tr>' +
+	'<tr>' +
+	'<td>Date/time</td>' +
+	'<td>' + qso.datetime + '</td>' +
+	'</tr>' +
+	'<tr>';
+	if (qso.satname != "") {
+		table += '<td>Band</td>' +
+		'<td>SAT ' + qso.satname
+		if (qso.orbit != "") {
+			table += ' (' + qso.orbit + ') '
+		}
+		table += '</td>' +
 		'</tr>' +
 		'<tr>';
-		if (qso.satname != "") {
-			table += '<td>Band</td>' +
-			'<td>SAT ' + qso.satname
-			if (qso.orbit != "") {
-				table += ' (' + qso.orbit + ') '
+	} else {
+		table += '<td>Band</td>' +
+		'<td>' + qso.band + '</td>' +
+		'</tr>' +
+		'<tr>';
+	}
+	table += '<td>Mode</td>' +
+	'<td>' + qso.mode + '</td>' +
+	'</tr>' +
+	'<tr>';
+	if (qso.gridsquare != undefined) {
+		table += '<td>Gridsquare</td>' +
+		'<td>' + qso.gridsquare + '</td>' +
+		'</tr>';
+	}
+	if (qso.distance != undefined) {
+		table += '<td>Distance</td>' +
+		'<td>' + qso.distance + '</td>' +
+		'</tr>';
+	}
+	if (qso.bearing != undefined) {
+		table += '<td>Bearing</td>' +
+		'<td>' + qso.bearing + '</td>' +
+		'</tr>';
+	}
+	return (table += '</tbody></table>');
+}
+
+function loadMapOptions(data) {
+	$.ajax({
+		url: base_url + 'index.php/user_options/get_map_custom',
+		type: 'GET',
+		dataType: 'json',
+	error: function () {
+	},
+	success: function (json_mapinfo) {
+			if (typeof json_mapinfo.qso !== "undefined") {
+				iconsList = json_mapinfo;
 			}
-			table += '</td>' +
-			'</tr>' +
-			'<tr>';
-		} else {
-			table += '<td>Band</td>' +
-			'<td>' + qso.band + '</td>' +
-			'</tr>' +
-			'<tr>';
+			loadMap(data, iconsList)
 		}
-		table += '<td>Mode</td>' +
-		'<td>' + qso.mode + '</td>' +
-		'</tr>' +
-		'<tr>';
-		if (qso.gridsquare != undefined) {
-			table += '<td>Gridsquare</td>' +
-			'<td>' + qso.gridsquare + '</td>' +
-			'</tr>';
-		}
-		if (qso.distance != undefined) {
-			table += '<td>Distance</td>' +
-			'<td>' + qso.distance + '</td>' +
-			'</tr>';
-		}
-		if (qso.bearing != undefined) {
-			table += '<td>Bearing</td>' +
-			'<td>' + qso.bearing + '</td>' +
-			'</tr>';
-		}
-		return (table += '</tbody></table>');
+	});
+}
+
+function mapQsos(form) {
+	$('#mapButton').prop("disabled", true).addClass("running");
+
+	var id_list=[];
+	var elements = $('#qsoList tbody input:checked');
+	var nElements = elements.length;
+
+	elements.each(function() {
+		let id = $(this).first().closest('tr').data('qsoID')
+		id_list.push(id);
+		unselectQsoID(id);
+	});
+
+	$("#qsoList").attr("Hidden", true);
+	$("#qsoList_wrapper").attr("Hidden", true);
+	$("#qsoList_info").attr("Hidden", true);
+
+	amap = $('#advancedmap').val();
+	if (amap == undefined) {
+		$("#lba_div").append('<div id="advancedmap" class="map-leaflet"></div>');
 	}
 
-	function loadMapOptions(data) {
+	if (id_list.length > 0) {
 		$.ajax({
-			url: base_url + 'index.php/user_options/get_map_custom',
-			type: 'GET',
-			dataType: 'json',
-		error: function () {
-		},
-		success: function (json_mapinfo) {
-				if (typeof json_mapinfo.qso !== "undefined") {
-					iconsList = json_mapinfo;
-				}
-				loadMap(data, iconsList)
-			}
+			url: base_url + 'index.php/logbookadvanced/mapSelectedQsos',
+			type: 'post',
+			data: {
+				ids: id_list,
+				de: form.de.value
+			},
+			success: function(data) {
+				loadMapOptions(data);
+			},
+			error: function() {
+				$('#mapButton').prop("disabled", false).removeClass("running");
+			},
+		});
+	} else {
+		$.ajax({
+			url: base_url + 'index.php/logbookadvanced/mapQsos',
+			type: 'post',
+			data: {
+				dateFrom: form.dateFrom.value,
+				dateTo: form.dateTo.value,
+				de: form.de.value,
+				dx: form.dx.value,
+				mode: form.mode.value,
+				band: form.band.value,
+				qslSent: form.qslSent.value,
+				qslReceived: form.qslReceived.value,
+				qslSentMethod: this.qslSentMethod.value,
+				qslReceivedMethod: this.qslReceivedMethod.value,
+				iota: form.iota.value,
+				dxcc: form.dxcc.value,
+				propmode: form.selectPropagation.value,
+				gridsquare: form.gridsquare.value,
+				state: form.state.value,
+				qsoresults: form.qsoResults.value,
+				sats: form.sats.value,
+				orbits: form.orbits.value,
+				cqzone: form.cqzone.value,
+				lotwSent: form.lotwSent.value,
+				lotwReceived: form.lotwReceived.value,
+				eqslSent: form.eqslSent.value,
+				eqslReceived: form.eqslReceived.value,
+				qslvia: $('[name="qslviainput"]').val(),
+				sota: form.sota.value,
+				pota: form.pota.value,
+				operator: form.operator.value,
+				wwff: form.wwff.value,
+				qslimages: form.qslimages.value,
+			},
+			success: function(data) {
+				loadMapOptions(data);
+			},
+			error: function() {
+				$('#mapButton').prop("disabled", false).removeClass("running");
+			},
 		});
 	}
+};
 
-	function mapQsos(form) {
-		$('#mapButton').prop("disabled", true).addClass("running");
+function mapGlobeQsos(form) {
+	var container = L.DomUtil.get('advancedmap');
+	if(container != null){
+		container._leaflet_id = null;
+		container.remove();
+		$(".coordinates").remove();
+	}
 
-		var id_list=[];
-		var elements = $('#qsoList tbody input:checked');
-		var nElements = elements.length;
+	var id_list=[];
+	var elements = $('#qsoList tbody input:checked');
+	var nElements = elements.length;
 
-		elements.each(function() {
-			let id = $(this).first().closest('tr').data('qsoID')
-			id_list.push(id);
-			unselectQsoID(id);
+	elements.each(function() {
+		let id = $(this).first().closest('tr').data('qsoID')
+		id_list.push(id);
+		unselectQsoID(id);
+	});
+
+	$("#qsoList").attr("Hidden", true);
+	$("#qsoList_wrapper").attr("Hidden", true);
+	$("#qsoList_info").attr("Hidden", true);
+
+	amap = $('#advancedmap').val();
+	if (amap == undefined) {
+		$("#lba_div").append('<div id="advancedmap" class="map-leaflet"></div>');
+	}
+
+	if (id_list.length > 0) {
+		$.ajax({
+			url: base_url + 'index.php/logbookadvanced/mapSelectedQsos',
+			type: 'post',
+			data: {
+				ids: id_list,
+				de: form.de.value
+			},
+			success: function(data) {
+				globemap(data);
+			},
+			error: function() {
+
+			},
 		});
+	} else {
+		$.ajax({
+			url: base_url + 'index.php/logbookadvanced/mapQsos',
+			type: 'post',
+			data: {
+				dateFrom: form.dateFrom.value,
+				dateTo: form.dateTo.value,
+				de: form.de.value,
+				dx: form.dx.value,
+				mode: form.mode.value,
+				band: form.band.value,
+				qslSent: form.qslSent.value,
+				qslReceived: form.qslReceived.value,
+				qslSentMethod: this.qslSentMethod.value,
+				qslReceivedMethod: this.qslReceivedMethod.value,
+				iota: form.iota.value,
+				dxcc: form.dxcc.value,
+				propmode: form.selectPropagation.value,
+				gridsquare: form.gridsquare.value,
+				state: form.state.value,
+				qsoresults: form.qsoResults.value,
+				sats: form.sats.value,
+				orbits: form.orbits.value,
+				cqzone: form.cqzone.value,
+				lotwSent: form.lotwSent.value,
+				lotwReceived: form.lotwReceived.value,
+				eqslSent: form.eqslSent.value,
+				eqslReceived: form.eqslReceived.value,
+				qslvia: $('[name="qslviainput"]').val(),
+				sota: form.sota.value,
+				pota: form.pota.value,
+				operator: form.operator.value,
+				wwff: form.wwff.value,
+				qslimages: form.qslimages.value,
+			},
+			success: function(data) {
+				globemap(data);
+			},
+			error: function() {
 
-		$("#qsoList").attr("Hidden", true);
-		$("#qsoList_wrapper").attr("Hidden", true);
-		$("#qsoList_info").attr("Hidden", true);
+			},
+		});
+	}
+};
 
-		amap = $('#advancedmap').val();
-		if (amap == undefined) {
-			$(".qso_manager").append('<div id="advancedmap" class="map-leaflet"></div>');
-		}
-
-		if (id_list.length > 0) {
-			$.ajax({
-				url: base_url + 'index.php/logbookadvanced/mapSelectedQsos',
-				type: 'post',
-				data: {
-					ids: id_list,
-					de: form.de.value
-				},
-				success: function(data) {
-					loadMapOptions(data);
-				},
-				error: function() {
-					$('#mapButton').prop("disabled", false).removeClass("running");
-				},
-			});
+function globemap(x) {
+	globePayArc=[];
+	globePayLab=[];
+	x.forEach((element) => {
+		let OneQsoArc={};
+		OneQsoArc.startLat=element.latlng1[0];
+		OneQsoArc.startLng=element.latlng1[1];
+		OneQsoArc.endLat=element.latlng2[0];
+		OneQsoArc.endLng=element.latlng2[1];
+		OneQsoArc.name=element.callsign;
+		if (element.confirmed) {
+			OneQsoArc.color = 'green';
 		} else {
-			$.ajax({
-				url: base_url + 'index.php/logbookadvanced/mapQsos',
-				type: 'post',
-				data: {
-					dateFrom: form.dateFrom.value,
-					dateTo: form.dateTo.value,
-					de: form.de.value,
-					dx: form.dx.value,
-					mode: form.mode.value,
-					band: form.band.value,
-					qslSent: form.qslSent.value,
-					qslReceived: form.qslReceived.value,
-					qslSentMethod: this.qslSentMethod.value,
-					qslReceivedMethod: this.qslReceivedMethod.value,
-					iota: form.iota.value,
-					dxcc: form.dxcc.value,
-					propmode: form.selectPropagation.value,
-					gridsquare: form.gridsquare.value,
-					state: form.state.value,
-					qsoresults: form.qsoResults.value,
-					sats: form.sats.value,
-					orbits: form.orbits.value,
-					cqzone: form.cqzone.value,
-					lotwSent: form.lotwSent.value,
-					lotwReceived: form.lotwReceived.value,
-					eqslSent: form.eqslSent.value,
-					eqslReceived: form.eqslReceived.value,
-					qslvia: $('[name="qslviainput"]').val(),
-					sota: form.sota.value,
-					pota: form.pota.value,
-					operator: form.operator.value,
-					wwff: form.wwff.value,
-					qslimages: form.qslimages.value,
-				},
-				success: function(data) {
-					loadMapOptions(data);
-				},
-				error: function() {
-					$('#mapButton').prop("disabled", false).removeClass("running");
-				},
-			});
+			OneQsoArc.color = 'red';
 		}
-	};
+		// OneQsoArc.color = [['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)], ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]]
+		OneQsoArc.altitude=0.15;
+		globePayArc.push(OneQsoArc);
+		let OneQsoLab={};
+		OneQsoLab.lat=element.latlng2[0];
+		OneQsoLab.lng=element.latlng2[1];
+		OneQsoLab.text=element.callsign;
+		globePayLab.push(OneQsoLab);
+	});
+	renderGlobe(globePayArc,globePayLab);
+}
 
-	function mapGlobeQsos(form) {
-		var container = L.DomUtil.get('advancedmap');
-		if(container != null){
-			container._leaflet_id = null;
-			container.remove();
-			$(".coordinates").remove();
-		}
+function renderGlobe(arcsData,labelData) {
+	Globe()
+	.globeImageUrl(base_url + '/assets/images/earth-blue-marble.jpg')
+	.pointOfView({ lat: arcsData[0].startLat, lng: arcsData[0].startLng, altitude:1}, 100)
+	.labelsData(labelData)
+	.arcsData(arcsData)
+	.arcColor('color')
+	//.arcAltitude('altitude')
+	.arcAltitudeAutoScale(.3)
+	.arcStroke(.2)
+	.arcDashLength(() => .1)
+	.arcDashGap(() => 0.01)
+	.arcDashAnimateTime(() => 4000 + 500)
+	(document.getElementById('advancedmap'))
+}
 
-		var id_list=[];
-		var elements = $('#qsoList tbody input:checked');
-		var nElements = elements.length;
+// auto setting of gridmap height
+function set_advancedmap_height() {
+    //header menu
+    var headerNavHeight = $('nav').outerHeight();
+    // console.log('nav: ' + headerNavHeight);
 
-		elements.each(function() {
-			let id = $(this).first().closest('tr').data('qsoID')
-			id_list.push(id);
-			unselectQsoID(id);
-		});
+    // line with coordinates
+    var coordinatesHeight = $('.coordinates').outerHeight();
+    // console.log('.coordinates: ' + coordinatesHeight);
 
-		$("#qsoList").attr("Hidden", true);
-		$("#qsoList_wrapper").attr("Hidden", true);
-		$("#qsoList_info").attr("Hidden", true);
+    // form for gridsquare map
+    var qsoManagerHeight = $('.qso_manager').outerHeight();
+    // console.log('.qso_manager: ' + qsoManagerHeight);
 
-		amap = $('#advancedmap').val();
-		if (amap == undefined) {
-			$(".qso_manager").append('<div id="advancedmap" class="map-leaflet"></div>');
-		}
+    // calculate correct map height
+    var advancedMapHeight = window.innerHeight - headerNavHeight - coordinatesHeight - qsoManagerHeight;
 
-		if (id_list.length > 0) {
-			$.ajax({
-				url: base_url + 'index.php/logbookadvanced/mapSelectedQsos',
-				type: 'post',
-				data: {
-					ids: id_list,
-					de: form.de.value
-				},
-				success: function(data) {
-					globemap(data);
-				},
-				error: function() {
-
-				},
-			});
-		} else {
-			$.ajax({
-				url: base_url + 'index.php/logbookadvanced/mapQsos',
-				type: 'post',
-				data: {
-					dateFrom: form.dateFrom.value,
-					dateTo: form.dateTo.value,
-					de: form.de.value,
-					dx: form.dx.value,
-					mode: form.mode.value,
-					band: form.band.value,
-					qslSent: form.qslSent.value,
-					qslReceived: form.qslReceived.value,
-					qslSentMethod: this.qslSentMethod.value,
-					qslReceivedMethod: this.qslReceivedMethod.value,
-					iota: form.iota.value,
-					dxcc: form.dxcc.value,
-					propmode: form.selectPropagation.value,
-					gridsquare: form.gridsquare.value,
-					state: form.state.value,
-					qsoresults: form.qsoResults.value,
-					sats: form.sats.value,
-					orbits: form.orbits.value,
-					cqzone: form.cqzone.value,
-					lotwSent: form.lotwSent.value,
-					lotwReceived: form.lotwReceived.value,
-					eqslSent: form.eqslSent.value,
-					eqslReceived: form.eqslReceived.value,
-					qslvia: $('[name="qslviainput"]').val(),
-					sota: form.sota.value,
-					pota: form.pota.value,
-					operator: form.operator.value,
-					wwff: form.wwff.value,
-					qslimages: form.qslimages.value,
-				},
-				success: function(data) {
-					globemap(data);
-				},
-				error: function() {
-
-				},
-			});
-		}
-	};
-
-	function globemap(x) {
-		globePayArc=[];
-		globePayLab=[];
-		x.forEach((element) => {
-			let OneQsoArc={};
-			OneQsoArc.startLat=element.latlng1[0];
-			OneQsoArc.startLng=element.latlng1[1];
-			OneQsoArc.endLat=element.latlng2[0];
-			OneQsoArc.endLng=element.latlng2[1];
-			OneQsoArc.name=element.callsign;
-			if (element.confirmed) {
-				OneQsoArc.color = 'green';
-			} else {
-				OneQsoArc.color = 'red';
-			}
-			// OneQsoArc.color = [['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)], ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]]
-			OneQsoArc.altitude=0.15;
-			globePayArc.push(OneQsoArc);
-			let OneQsoLab={};
-			OneQsoLab.lat=element.latlng2[0];
-			OneQsoLab.lng=element.latlng2[1];
-			OneQsoLab.text=element.callsign;
-			globePayLab.push(OneQsoLab);
-		});
-		renderGlobe(globePayArc,globePayLab);
-	}
-
-	function renderGlobe(arcsData,labelData) {
-		Globe()
-		.globeImageUrl(base_url + '/assets/images/earth-blue-marble.jpg')
-		.pointOfView({ lat: arcsData[0].startLat, lng: arcsData[0].startLng, altitude:1}, 100)
-		.labelsData(labelData)
-		.arcsData(arcsData)
-		.arcColor('color')
-		//.arcAltitude('altitude')
-		.arcAltitudeAutoScale(.3)
-		.arcStroke(.2)
-		.arcDashLength(() => .1)
-		.arcDashGap(() => 0.01)
-		.arcDashAnimateTime(() => 4000 + 500)
-		(document.getElementById('advancedmap'))
-	}
+    // and set it
+    $('#advancedmap').css('height', advancedMapHeight + 'px');
+    // console.log('#advancedmap: ' + advancedMapHeight);
+}
 
+$(document).ready(function() {
+	$(window).resize(function() {
+		set_advancedmap_height();
+	});
+	$('.lba_buttons').click(function() {
+        // we need some delay because of the bs collapse menu
+        setTimeout(set_advancedmap_height, 400);
+    });
+});