spothole/webassets/js/map.js

// Map layers
var markersLayer;
var terminator;

// Load spots and populate the table.
function loadSpots() {
    $.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
        // Store data
        spots = jsonData;
        // Update map
        updateMap();
        terminator.setTime();
    });
}

// Build a query string for the API, based on the filters that the user has selected.
function buildQueryString() {
    var str =  "?";
    ["dx_continent", "de_continent", "mode_type", "source", "band"].forEach(fn => {
        if (!allFilterOptionsSelected(fn)) {
            str = str + getQueryStringFor(fn) + "&";
        }
    });
    str = str + "max_age=" + $("#max-spot-age option:selected").val();
    return str;
}

// Update the spots map
function updateMap() {
    // Clear existing content
    markersLayer.clearLayers();
    // Make new markers for all spots with a good location
    spots.forEach(function (s) {
        if (s["dx_location_good"]) {
            let m = L.marker([s["dx_latitude"], s["dx_longitude"]], {icon: getIcon(s)});
            m.bindPopup(getTooltipText(s));
            markersLayer.addLayer(m);
        }
    });
}

// Get an icon for a spot, based on its band, using PSK Reporter colours, its program etc.
function getIcon(s) {
    return L.ExtraMarkers.icon({
        icon: "fa-" + s["icon"],
        iconColor: s["band_contrast_color"],
        markerColor: s["band_color"],
        shape: 'circle',
        prefix: 'fa',
        svg: true
    });
}

// Tooltip text for the markers
function getTooltipText(s) {
    // Format DX flag
    var dx_flag = "<i class='fa-solid fa-globe-africa'></i>";
    if (s["dx_flag"] && s["dx_flag"] != null && s["dx_flag"] != "") {
        dx_flag = s["dx_flag"];
    }

    // Format the frequency
    var mhz = Math.floor(s["freq"] / 1000000.0);
    var khz = Math.floor((s["freq"] - (mhz * 1000000.0)) / 1000.0);
    var hz = Math.floor(s["freq"] - (mhz * 1000000.0) - (khz * 1000.0));
    var hz_string = (hz > 0) ? hz.toFixed(0)[0] : "";
    var freq_string = `<span class='freq-mhz'>${mhz.toFixed(0)}</span><span class='freq-khz'>${khz.toFixed(0).padStart(3, '0')}</span><span class='freq-hz hideonmobile'>${hz_string}</span>`

    // Format comment
    var commentText = "";
    if (s["comment"] != null) {
        commentText = escapeHtml(s["comment"]);
    }

    // Sig or fallback to source
    var sigSourceText = s["source"];
    if (s["sig"]) {
        sigSourceText = s["sig"];
    }

    // Format sig_refs
    var sig_refs = "";
    if (s["sig_refs"]) {
        sig_refs = s["sig_refs"].map(s => `<span class='nowrap'>${s}</span>`).join(", ");
    }

    // DX
    const shortCall = s["dx_call"].split("/").sort(function (a, b) {
        return b.length - a.length;
    })[0];
    ttt = `<span class='nowrap'>${dx_flag} <a href='https://www.qrz.com/db/${shortCall}' target='_blank' class="leaflet-popup-callsign-link">${s["dx_call"]}</a></span><br/>`;

    // Frequency & band
    ttt += `<i class='fa-solid fa-walkie-talkie markerPopupIcon'></i>&nbsp;${freq_string} (${s["band"]})`;
    // Mode
    if (s["mode"] != null) {
        ttt += ` &nbsp;&nbsp; <i class='fa-solid fa-wave-square markerPopupIcon'></i>&nbsp;${s["mode"]}`;
    }
    ttt += "<br/>";

    // Source / SIG / Ref
    ttt += `<span class='nowrap'><span class='icon-wrapper'><i class='fa-solid fa-${s["icon"]}'></i>&nbsp;${sigSourceText} ${sig_refs}</span><br/>`;

    // Time
    ttt += `<i class='fa-solid fa-clock markerPopupIcon'></i>&nbsp;${moment.unix(s["time"]).fromNow()}`;

    // Comment
    if (commentText.length > 0) {
        ttt += `<br/><i class='fa-solid fa-comment markerPopupIcon'></i> ${commentText}`;
    }

    return ttt;
}

// Load server options. Once a successful callback is made from this, we then query spots and set up the timer to query
// spots repeatedly.
function loadOptions() {
    $.getJSON('/api/v1/options', function(jsonData) {
        // Store options
        options = jsonData;

        // Add CSS for band toggle buttons
        addBandToggleColourCSS(options["bands"]);

        // Populate the filters panel
        generateBandsMultiToggleFilterCard(options["bands"]);
        generateMultiToggleFilterCard("#dx-continent-options", "dx_continent", options["continents"]);
        generateMultiToggleFilterCard("#de-continent-options", "de_continent", options["continents"]);
        generateMultiToggleFilterCard("#mode-options", "mode_type", options["mode_types"]);
        generateMultiToggleFilterCard("#source-options", "source", options["spot_sources"]);

        // Load settings from settings storage now all the controls are available
        loadSettings();

        // Load spots and set up the timer
        loadSpots();
        setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000);
    });
}

// Method called when any display property is changed to reload the map and persist the display settings.
function displayUpdated() {
    updateMap();
    saveSettings();
}

// React to toggling/closing panels
function toggleFiltersPanel() {
    // If we are going to show the filters panel, hide the display panel
    if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
        $("#display-area").hide();
        $("#display-button").button("toggle");
    }
    $("#filters-area").toggle();
}
function closeFiltersPanel() {
    $("#filters-button").button("toggle");
    $("#filters-area").hide();
}

function toggleDisplayPanel() {
    // If we are going to show the display panel, hide the filters panel
    if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
        $("#filters-area").hide();
        $("#filters-button").button("toggle");
    }
    $("#display-area").toggle();
}
function closeDisplayPanel() {
    $("#display-button").button("toggle");
    $("#display-area").hide();
}

// Set up the map
function setUpMap() {
    // Create map
    map = L.map('map', {
        zoomControl: false,
        minZoom: 2,
        maxZoom: 12
    });

    // Add basemap
    backgroundTileLayer = L.tileLayer.provider("OpenStreetMap.Mapnik", {
        opacity: 1,
        edgeBufferTiles: 1
    });
    backgroundTileLayer.addTo(map);
    backgroundTileLayer.bringToBack();

    // Add marker layer
    markersLayer = new L.LayerGroup();
    markersLayer.addTo(map);

    // Add terminator/greyline
    terminator = L.terminator({
        interactive: false
    });
    terminator.setStyle({fillColor: '#00000050'});
    terminator.addTo(map);

    // Display a default view.
    map.setView([30, 0], 3);
}

// Startup
$(document).ready(function() {
    // Hide the extra things that need to be hidden on this page
    $(".hideonmap").hide();
    // Set up map
    setUpMap();
    // Call loadOptions(), this will then trigger loading spots and setting up timers.
    loadOptions();
});