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)});
            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: "white", // todo
        markerColor: "black", // todo
        shape: 'circle',
        prefix: 'fa',
        svg: true
    });
}

// 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 bullets and band toggle buttons
        addBandColourCSS(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();
});