Control map via URL options (#58)

* Add URL options to hide different aspects of the default display, helpful for starting for a kiosk

* Fix spacing in changes

* More options to move map left/right/up/down

* Allow movement in all directions, consolidate some code

* Add controls for units and range rings from url

* Swap left/right,up/down behavior for map moves

* Convert #nohistory anchor tag to a query param like the other parameters. Make query parameters values explicitly state true

* Fix for enableRings so it will toggle the setting

* Use show/hide parameter values to avoid having a a showX/hideX parameter for each option, Rename some parameters, resize map when hiding banner/sidebar, cleanup

Co-authored-by: BuildTools <unconfigured@null.spigotmc.org>
Co-authored-by: eric1tran <eric1tran@gmail.com>

public_html/script.js

@@ -421,7 +421,9 @@ var CurrentHistoryFetch = null;
 var PositionHistoryBuffer = [];
 var HistoryItemsReturned = 0;
 function start_load_history() {
-	if (PositionHistorySize > 0 && window.location.hash != '#nohistory') {
+	let url = new URL(window.location.href);
+	let params = new URLSearchParams(url.search);
+	if (PositionHistorySize > 0 && params.get('nohistory') !== 'true') {
 		$("#loader_progress").attr('max',PositionHistorySize);
 		console.log("Starting to load history (" + PositionHistorySize + " items)");
 		//Load history items in parallel
@@ -515,6 +517,112 @@ function end_load_history() {
         // And kick off one refresh immediately.
         fetchData();
 
+        // update the display layout from any URL query strings
+        applyUrlQueryStrings();
+}
+
+// Function to apply any URL query value to the map before we start
+function applyUrlQueryStrings() {
+    // if asked, toggle featrues at start
+    let url = new URL(window.location.href);
+    let params = new URLSearchParams(url.search);
+
+    // be sure we start with a 'clean' layout, but only if we need it
+    var allOptions = [
+        'banner',
+        'altitudeChart',
+        'aircraftTrails',
+        'map',
+        'sidebar',
+        'zoomOut',
+        'zoomIn',
+        'moveNorth',
+        'moveSouth',
+        'moveWest',
+        'moveEast',
+        'displayUnits',
+        'rangeRings',
+        'ringCount',
+        'ringBaseDistance',
+        'ringInterval'
+    ]
+
+    var needReset = false;
+    for (var option of allOptions) {
+        if (params.has(option)) {
+            needReset = true;
+            break;
+        }
+    }
+    
+    if (needReset) {
+        resetMap();
+    }
+
+    if (params.get('banner') === 'hide') {
+        hideBanner();
+    }
+    if (params.get('altitudeChart') === 'hide') {
+	$('#altitude_checkbox').removeClass('settingsCheckboxChecked');
+        $('#altitude_chart').hide();
+    }
+    if (params.get('altitudeChart') === 'show') {
+        $('#altitude_checkbox').addClass('settingsCheckboxChecked');
+        $('#altitude_chart').show();
+    }
+    if (params.get('aircraftTrails') === 'show') {
+        selectAllPlanes();
+    }
+    if (params.get('aircraftTrails') === 'hide') {
+        deselectAllPlanes();
+    }
+    if (params.get('map') === 'show') {
+        showMap();
+    }
+    if (params.get('map') === 'hide') {
+        expandSidebar();
+    }
+    if (params.get('sidebar') === 'show') {
+        $("#sidebar_container").show();
+        updateMapSize();
+    }
+    if (params.get('sidebar') === 'hide') {
+        $("#sidebar_container").hide();
+        updateMapSize();
+    }
+    if (params.get('zoomOut')) {
+        zoomMap(params.get('zoomOut'), true);
+    }
+    if (params.get('zoomIn')) {
+        zoomMap(params.get('zoomIn'), false);
+    }
+    if (params.get('moveNorth')) {
+        moveMap(params.get('moveNorth'), true, false);
+    }
+    if (params.get('moveSouth')) {
+        moveMap(params.get('moveSouth'), true, true);
+    }
+    if (params.get('moveEast')) {
+        moveMap(params.get('moveEast'), false, false);
+    }
+    if (params.get('moveWest')) {
+        moveMap(params.get('moveWest'), false, true);
+    }
+    if (params.get('displayUnits')) {
+        setDisplayUnits(params.get('displayUnits'));
+    }
+    if (params.get('rangeRings')) {
+        setRangeRingVisibility(params.get('rangeRings'));
+    }
+    if (params.get('ringCount')) {
+        setRingCount(params.get('ringCount'));
+    }
+    if (params.get('ringBaseDistance')) {
+        setRingBaseDistance(params.get('ringBaseDistance'));
+    }
+    if (params.get('ringInterval')) {
+        setRingInterval(params.get('ringInterval'));
+    }
 }
 
 // Make a LineString with 'points'-number points
@@ -1632,7 +1740,9 @@ function updateMapSize() {
 }
 
 function toggleSidebarVisibility(e) {
+    if (e) {
         e.preventDefault();
+    }
     $("#sidebar_container").toggle();
     $("#expand_sidebar_control").toggle();
     $("#toggle_sidebar_button").toggleClass("show_sidebar");
@@ -1641,7 +1751,9 @@ function toggleSidebarVisibility(e) {
 }
 
 function expandSidebar(e) {
+    if (e) {
         e.preventDefault();
+    }
     $("#map_container").hide()
     $("#toggle_sidebar_control").hide();
     $("#splitter").hide();
@@ -1809,12 +1921,16 @@ function initializeUnitsSelector() {
 }
 
 function onDisplayUnitsChanged(e) {
+
+    if (e) {
         var displayUnits = e.target.value;
         // Save display units to local storage
         localStorage['displayUnits'] = displayUnits;
-    DisplayUnits = displayUnits;
+    }
 
-    setAltitudeLegend(displayUnits);
+    DisplayUnits = localStorage['displayUnits'];
+
+    setAltitudeLegend(DisplayUnits);
 
     // Update filters
     updatePlaneFilter();
@@ -1832,7 +1948,7 @@ function onDisplayUnitsChanged(e) {
     // Reset map scale line units
     OLMap.getControls().forEach(function(control) {
         if (control instanceof ol.control.ScaleLine) {
-            control.setUnits(displayUnits);
+            control.setUnits(DisplayUnits);
         }
     });
 }
@@ -2049,6 +2165,114 @@ function updatePiAwareOrFlightFeeder() {
     refreshPageTitle();
 }
 
+// Function to hide banner (ex. for a kiosk to show maximum data possible)
+function hideBanner() {
+    document.getElementById("header").style.display = 'none'; 
+    document.getElementById("layout_container").style.height = '100%';
+    updateMapSize();
+}
+
+// Helper function to restrict the range of the inputs
+function restrictUrlRequest(c) {
+    let v = parseFloat(c);
+    if (v < 0) {
+        v = 0;
+    } else if (v > 5) {
+        v = 5;
+    }
+    return v;
+}
+
+// Function to zoom, but not by too much per 'amount'
+function zoomMap(c, zoomOut) {
+    c = restrictUrlRequest(c);
+    ZoomLvl = OLMap.getView().getZoom();
+    if (zoomOut) {
+        ZoomLvl *= Math.pow(0.95, c);
+    } else {
+        ZoomLvl /= Math.pow(0.95, c);
+    }
+    localStorage['ZoomLvl'] = ZoomLvl;
+    OLMap.getView().setZoom(ZoomLvl);
+}
+
+// Function to move map at 0.005% of the extent per 'move'
+function moveMap(c, moveVertical, moveDownLeft) {
+    c = restrictUrlRequest(c);
+    let cn = OLMap.getView().getCenter();
+    let dist = 0;
+    if (moveVertical) {
+        dist = ol.extent.getHeight(OLMap.getView().getProjection().getExtent());
+    } else {
+        dist = ol.extent.getWidth(OLMap.getView().getProjection().getExtent());
+    }
+    let d = c * (dist * .005);
+    // 'up' or 'right' needs a negative number
+    if (moveDownLeft) {
+        d *= -1.0;
+    }
+    if (moveVertical) {
+        ol.coordinate.add(cn, [0, d]);
+    } else {
+        ol.coordinate.add(cn, [d, 0]);
+    }
+    OLMap.getView().setCenter(cn);
+}
+
+// Function to set displayUnits
+function setDisplayUnits(units) {
+    if (units === 'nautical') {
+        localStorage['displayUnits'] = "nautical";
+    } else if (units === 'metric') {
+        localStorage['displayUnits'] = "metric";
+    } else if (units === 'imperial') {
+        localStorage['displayUnits'] = "imperial";
+    }
+    onDisplayUnitsChanged();
+}
+
+// Function to set range ring visibility
+function setRangeRingVisibility (showhide) {
+   var show = null;
+
+   if (showhide === 'hide') {
+        $('#sitepos_checkbox').removeClass('settingsCheckboxChecked')
+        show = false;
+   } else if (showhide === 'show') {
+        $('#sitepos_checkbox').addClass('settingsCheckboxChecked')
+        show = true;
+   } else {
+        return
+   }
+
+   ol.control.LayerSwitcher.forEachRecursive(layerGroup, function(lyr) {
+        if (lyr.get('name') === 'site_pos') {
+        lyr.setVisible(show);
+        }
+    });
+}
+
+// simple function to set range ring count
+function setRingCount(val) {
+    localStorage['SiteCirclesCount'] = val;
+    setRangeRings();
+    createSiteCircleFeatures();
+}
+
+// simple function to set range ring distance
+function setRingBaseDistance(val) {
+    localStorage['SiteCirclesBaseDistance'] = val;
+    setRangeRings();
+    createSiteCircleFeatures();
+}
+
+// simple function to set range ring interval
+function setRingInterval(val) {
+    localStorage['SiteCirclesInterval'] = val;
+    setRangeRings();
+    createSiteCircleFeatures();
+}
+
 // Set range ring globals and populate form values
 function setRangeRings() {
     SiteCirclesCount = Number(localStorage['SiteCirclesCount']) || DefaultSiteCirclesCount;