scripts-local.html

{% include_relative scripts-listeners.html %}

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
	     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
	     crossorigin=""/>

<script>

let events = {% include metadata/Events.json %};


//////////////////////////////
//
// buildLookupTables –- 
//

function buildLookupTables() {
	let metadata = MAP.METADATA;
	if (!metadata){
		console.warn("No METADATA!");
		return;
	}
	for (sheet in metadata) {
		if (sheet === "Events"){
			continue;
		}
		buildLookupTable(sheet);
	}
}


//////////////////////////////
//
// buildLookupTable –-
//

function buildLookupTable(sheet) {
    let sheetArray = MAP.METADATA[sheet];
    if (!sheetArray || !Array.isArray(sheetArray)){
        console.warn("No METADATA FOR", sheet);
        return;
    }
    MAP.lookup[sheet] = {};
    const lookup = MAP.lookup[sheet];

    // Dynamically determine the ID key
    let idKey = null;
    if (sheetArray.length > 0) {
        const firstEntry = sheetArray[0];
        for (let key in firstEntry) {
            if (key.toLowerCase().includes("id")) {
                idKey = key;
                break;
            }
        }
    }

    if (!idKey) {
        console.warn(`No ID key found for sheet ${sheet}`);
        return;
    }

    for (let entry of sheetArray) {
        let id = entry[idKey];
        if (!id){
            console.warn("NO ID FOR ENTRY", entry);
            continue;
        }
        lookup[id] = entry;
    }
}

//////////////////////////////
//
// findInfo –- find info on other sheets
//

function findInfo(id, sheet) {
    return MAP.lookup[sheet] ? MAP.lookup[sheet][id] : null;
}

//////////////////////////////
//
// doMapSetup –- Function to setup the map and add markers
//

function doMapSetup(opts) {
    if (typeof opts === "undefined") {
        console.error("doMapSetup input parameter is undefined");
        return;
    }
    if (typeof opts.name === "undefined") {
        console.error("doMapSetup name parameter is undefined");
        return;
    }
    if (typeof opts.view === "undefined") {
        console.error("view option is not specified");
        return;
    }
    if (typeof opts.zoom === "undefined") {
        console.warn("zoom option is not specified, setting to 4");
        opts.zoom = 5;
    }
    if (typeof opts.zoomMin === "undefined") {
        console.warn("zoomMin option is not specified, setting to zoom");
        opts.zoomMin = opts.zoom;
    }
    if (typeof opts.zoomMax === "undefined") {
        console.warn("zoomMax option is not specified, setting to 19");
        opts.zoomMax = 19;
    }

    if (map) {
        map.eachLayer(function(layer) {
            map.removeLayer(layer);
        });
        map.remove();
    }

    map = L.map(opts.name).setView(opts.view, opts.zoom);
    map.options.minZoom = opts.zoomMin;

    let mapImage = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
    let attribution = "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>";
    L.tileLayer(mapImage, {
        maxZoom: opts.zoomMax,
        attribution: attribution
    }).addTo(map);

    // Get names of variables
    let ID = MAP.cindex("EV", "EVID");
    let LOC = MAP.cindex("EV", "LOCID");
    let BIOID = MAP.cindex("EV", "BIOID");
    let EINFO = MAP.cindex("EV", "EINFO");
    let DATERANGE = MAP.cindex("EV", "DATERANGE");
    let EYEAR = MAP.cindex("EV","EYEAR");
    let EMONTH = MAP.cindex("EV","EMONTH");
    let EDAY = MAP.cindex("EV","EDAY");
    let LYEAR = MAP.cindex("EV","LYEAR");
    let LMONTH = MAP.cindex("EV","LMONTH");
    let LDAY = MAP.cindex("EV","LDAY");
    let LOCID = MAP.cindex("LOC", "LOCID");
    let LOCNAME = MAP.cindex("LOC", "LOCNAME");
    let LOCCITY = MAP.cindex("LOC", "CITY");
    let COORD = MAP.cindex("LOC", "COORD");
    let BCONAME = MAP.cindex("BCO", "BCONAME");
    let BMUNAME = MAP.cindex("BMU", "BMUNAME");
    let BNONAME = MAP.cindex("BNO", "BNONAME");

    // Get variable names for certainty markers
    let CERTLOC = MAP.cindex("EV", "CERTLOC");
    let CERTEDATE = MAP.cindex("EV", "CERTEDATE");
    let CERTLDATE = MAP.cindex("EV", "CERTLDATE");
    let CERTRANGE = MAP.cindex("EV", "CERTRANGE");

    // Get variable names for document entries
    let DOEID = MAP.cindex("EV", "DOEID");
    let ARDID = MAP.cindex("DOE", "ARDID");
    let ARDARC = MAP.cindex("ARD", "ARC");
    let ARDARCFOND = MAP.cindex("ARD", "ARCFOND");
    let ARDSIG = MAP.cindex("ARD", "SIG");

    // Establish variables
    let eventid = "";
    let person = "";
    let personprocessed = "";
    let locationid = "";
    let locationprocessed = "";
    let largerlocation = "";
    let daterange = "";
    let earliestyear = "";
    let earliestmonth = "";
    let earliestday = "";
    let earliestdate = "";
    let latestyear = "";
    let latestmonth = "";
    let latestday = "";
    let latestdate = "";
    let coordinates = "";
    let coordinatesprocessed = "";
    let description = "";
    let docentry = "";
    let bibliography = "";
    let archiveprocessed = "";
    let nameshort = "";

    markers = []; // Clear the markers array

    for (let i = 0; i < events.length; i++) {
        
        // Only process events for map if there's a location and a date
        if (events[i][LOC] && events[i][DATERANGE]) {
            eventid = events[i][ID];
            locationid = events[i][LOC];
            let locationInfo = findInfo(locationid, "Locations");
            locationprocessed = locationInfo[LOCNAME];

            // Find larger location, if applicable
            let largerlocation = locationInfo[LOCCITY];
            if (largerlocation) {
                locationprocessed += `, ${largerlocation}`;
            }

            // Get name of person
            if (events[i][BIOID]) {
                person = events[i][BIOID];
                let composerInfo = findInfo(person, "Bio_Composers");
                let musicianInfo = findInfo(person, "Bio_Musicians");
                let nonmusicianInfo = findInfo(person, "Bio_Nonmusicians");

                // Get first three letters to determine type of ID
                nameshort = person.substring(0, 3);

                // Get name from composer, musician, or non-musician biography sheets
                if (nameshort === "BCO" && composerInfo) {
                    personprocessed = composerInfo[BCONAME];
                } else if (nameshort === "BMU" && musicianInfo) {
                    personprocessed = musicianInfo[BMUNAME];
                } else if (nameshort === "BNO" && nonmusicianInfo) {
                    personprocessed = nonmusicianInfo[BNONAME];
                } else {
                    continue;
                }
            }

            // Get dates
            if (events[i][DATERANGE]) {
                daterange = events[i][DATERANGE];
                
                // Get earliest/latest years, months, dates
                earliestyear = events[i][EYEAR];
                earliestmonth = events[i][EMONTH];
                earliestday = events[i][EDAY];
                latestyear = events[i][LYEAR];
                latestmonth = events[i][LMONTH];
                latestday = events[i][LDAY];

                // Put together earliest and latest dates in YEAR-MONTH-DAY format
                earliestdate = `${earliestyear}-${earliestmonth}-${earliestday}`;
                latestdate = `${latestyear}-${latestmonth}-${latestday}`;
            }

            // Get event description
            if (events[i][EINFO]) {
                description = events[i][EINFO];
            }

            // Get certainty information
            let locationCertainty = events[i][CERTLOC];
            let earliestDateCertainty = events[i][CERTEDATE];
            let latestDateCertainty = events[i][CERTLDATE];
            let rangeCertainty = events[i][CERTRANGE];

            // Add information about location uncertainty to location
            // Only consider location certainty if not certain
            // Return a console message if the location certainty is not 1, 2, 3, or 4
            if (locationCertainty && locationCertainty !== "1"){
                if (locationCertainty === "2"){
                    locationprocessed += ` [probable]`;
                } else if (locationCertainty === "3"){
                    locationprocessed += ` [possible]`;
                } else if (locationCertainty === "4"){
                    locationprocessed += ` [doubtful]`;
                } else {
                    console.warn("Forbidden location certainty for", eventid, locationCertainty);
                    continue;
                }
            }

            // Add information about date uncertainty to date range
            // Only consider date certainty if not certain
            // Return a console message if the date certainty is not 1, 2, 3, or 4

            if (earliestDateCertainty && earliestDateCertainty !== "1"){
                if (earliestDateCertainty === "2"){
                    daterange += ` [earliest date probable]`;
                } else if (earliestDateCertainty === "3"){
                    daterange += ` [earliest date possible]`;
                } else if (earliestDateCertainty === "4"){
                    daterange += ` [earliest date doubtful]`;
                } else {
                    console.warn("Forbidden earliestDateCertainty certainty for", eventid, earliestDateCertainty);
                    continue;
                }
            }

            if (latestDateCertainty && latestDateCertainty !== "1"){
                if (latestDateCertainty === "2"){
                    daterange += ` [latest date probable]`;
                } else if (latestDateCertainty === "3"){
                    daterange += ` [latest date possible]`;
                } else if (latestDateCertainty === "4"){
                    daterange += ` [latest date doubtful]`;
                } else {
                    console.warn("Forbidden latestDateCertainty certainty for", eventid, latestDateCertainty);
                    continue;
                }
            }

            // Add information about event uncertainty to description
            // Only consider event certainty if not certain
            // Return a console message if the event certainty is not 1, 2, 3, or 4

            if (rangeCertainty && rangeCertainty !== "1"){
                if (rangeCertainty === "2"){
                    description += ` [event probable]`;
                } else if (rangeCertainty === "3"){
                    description += ` [event possible]`;
                } else if (rangeCertainty === "4"){
                    description += ` [event doubtful]`;
                } else {
                    console.warn("Forbidden rangeCertainty certainty for", eventid, rangeCertainty);
                    continue;
                }
            }


            // Get archival signature for linked document entry, if applicable
            if (events[i][DOEID]) {
                docentry = events[i][DOEID];
                let archivalid = "";

                // Split docentries if multiple documents separated by a semicolon
                if (docentry.match(";")){
                    docentry = docentry.trim().split(/\s*;\s*/);
                } else {
                    docentry = [ docentry ];
                }
                
                for (let j=0; j<docentry.length; j++){
                    // Get archival document from document entries data
                    let documentInfo = findInfo(docentry[j], "Doc_Entries");
                    
                    // Only process if there's an archive linked to the document
                    if (documentInfo) {
                        archivalid = documentInfo[ARDID];
                    }
                    // Get archival signature from archival documents data
                    if (archivalid) {
                        let archivalInfo = findInfo(archivalid, "Archival_Docs");
                        let archive = archivalInfo[ARDARC];
                        let fond = archivalInfo[ARDARCFOND];
                        let signature = archivalInfo[ARDSIG];

                        if (archive && j == 0){
                            archiveprocessed += `<br><b>Archival Document:</b> ${archive}`;
                        } else if (archive) {
                            archiveprocessed += `; ${archive}`;
                        }

                        if (archive && fond){
                            archiveprocessed += `, ${fond}`;
                        }

                        if (archive && fond && signature){
                            archiveprocessed += ` ${signature}`;
                        }
                    }
                }
            }

            // Get coordinates
            coordinates = locationInfo[COORD];

            // Map points if there are coordinates and the earliest and latest years are defined
            if (coordinates !== undefined && earliestyear !== undefined && latestyear !== undefined) {
                // Convert the comma-separated string into an array
                let coordsArray = coordinates.split(',').map(Number);

                // Ensure coordinates are in the format [longitude, latitude]
                if (coordsArray.length === 2 && !isNaN(coordsArray[0]) && !isNaN(coordsArray[1])) {
                    // Swap latitude and longitude
                    coordinatesprocessed = [coordsArray[1], coordsArray[0]];

                    const geoJsonFeature = {
                        type: "Feature",
                        geometry: {
                            type: "Point",
                            coordinates: coordinatesprocessed // Ensure this is [longitude, latitude]
                        },
                        properties: {
                            popupContent: description ? 
                                `<b>Person:</b> ${personprocessed}<br><b>Date:</b> ${daterange}<br> <b>Place:</b> ${locationprocessed} <br><b>Description:</b> ${description} ${archiveprocessed}` : 
                                `<b>Person:</b> ${personprocessed}<br><b>Date:</b> ${daterange}<br> <b>Place:</b> ${locationprocessed} ${archiveprocessed}`,
                            locationCertainty: locationCertainty,
                            earliestDateCertainty: earliestDateCertainty,
                            latestDateCertainty: latestDateCertainty,
                            rangeCertainty: rangeCertainty,
                            earliestyear: earliestyear,
                            latestyear: latestyear
                        }
                    };

                    // Determine color based on nameshort
                    let fillColor;
                    if (nameshort === "BCO") {
                        fillColor = "#440154"; // Color for composers (BCO)
                    } else if (nameshort === "BMU") {
                        fillColor = "#23ed5c"; // Color for musicians (BMU)
                    } else if (nameshort === "BNO") {
                        fillColor = "#fde725"; // Color for non-musicians (BNO)
                    } else {
                        fillColor = "#0c8aff"; // Default color if no match
                    }

                    const geojsonMarkerOptions = {
                        radius: 5,
                        fillColor: fillColor, //black fill color
                        color: "#000000", //Black border color
                        weight: 1,
                        opacity: 1,
                        fillOpacity: 0.8
                    };

                    let marker = L.geoJson(geoJsonFeature, {
                        pointToLayer: function (feature, latlng) {
                            return L.circleMarker(latlng, geojsonMarkerOptions);
                        }
                    }).bindPopup(geoJsonFeature.properties.popupContent);

                    markers.push({ marker, personID: person, text: `[${daterange}] ${personprocessed}: ${description}`, locationCertainty: locationCertainty, earliestDateCertainty: earliestDateCertainty, latestDateCertainty: latestDateCertainty, rangeCertainty: rangeCertainty, earliestyear: earliestyear, latestyear: latestyear });
                } else {
                    console.warn('Invalid coordinates:', coordsArray, events[i]);
                    continue;
                }
            } else {
                continue;
            }
            // Reset variables
            person = "";
            personprocessed = "";
            locationid = "";
            locationprocessed = "";
            largerlocation = "";
            daterange = "";
            coordinates = "";
            coordinatesprocessed = "";
            description = "";
            docentry = "";
            bibliography = "";
            archiveprocessed = "";
            earliestyear = "";
            earliestmonth = "";
            earliestday = "";
            earliestdate = "";
            latestyear = "";
            latestmonth = "";
            latestday = "";
            latestdate = "";
        }
    }

    // Apply the initial filter
    filterMarkers();
}

// Helper function to fetch checkbox states
function getCheckboxStates() {
    return {
        showComposers: document.querySelector("#composer-select").checked,
        showMusicians: document.querySelector("#musician-select").checked,
        showNonMusicians: document.querySelector("#non-musician-select").checked,
        showCertainty: document.querySelector("#certainty-select").checked,
    };
}

// Helper function to determine if a marker should be shown based on checkbox states and certainty
function shouldShowMarker(type, checkboxStates, certainties) {
    let { showComposers, showMusicians, showNonMusicians, showCertainty } = checkboxStates;
    let { locationCertainty, earliestDateCertainty, latestDateCertainty, rangeCertainty } = certainties;

    let show = false;

    if ((type === "BCO" && showComposers) ||
        (type === "BMU" && showMusicians) ||
        (type === "BNO" && showNonMusicians)) {
        show = true;
    }

    if (showCertainty) {
        if (locationCertainty && locationCertainty !== "1" && locationCertainty !== "2") show = false;
        if (earliestDateCertainty && earliestDateCertainty !== "1" && earliestDateCertainty !== "2") show = false;
        if (latestDateCertainty && latestDateCertainty !== "1" && latestDateCertainty !== "2") show = false;
        if (rangeCertainty && rangeCertainty !== "1" && rangeCertainty !== "2") show = false;
    }

    return show;
}

// Helper function to add or remove marker from map
function updateMarkerOnMap(marker, show) {
    if (show) {
        if (!map.hasLayer(marker)) {
            marker.addTo(map);
        }
    } else {
        if (map.hasLayer(marker)) {
            map.removeLayer(marker);
        }
    }
}

// Function to filter markers based on checkboxes and breakdown by decade (1400-1600), with optional searchRegex
function filterMarkers(searchRegex = null) {
    const checkboxStates = getCheckboxStates();
    const histogramCounts = initializeDecades(1400, 1590);  // Initialize all decades between 1400-1590 with 0 count
    const histogramRow = document.getElementById("histogramRow");
    const minYear = document.getElementById('date-slider-min').value;
    const maxYear = document.getElementById('date-slider-max').value;

    // Clear the histogram before adding new values
    histogramRow.innerHTML = '';

    let searchCount = 0;  // Track how many markers match the filters

    markers.forEach(({ marker, personID, locationCertainty, earliestDateCertainty, latestDateCertainty, rangeCertainty, earliestyear, latestyear, text }) => {
        const type = personID.substring(0, 3);  // Example of how type could be extracted
        const certainties = { locationCertainty, earliestDateCertainty, latestDateCertainty, rangeCertainty };
        let show = shouldShowMarker(type, checkboxStates, certainties);

        // Apply search filter if searchRegex is provided
        if (show && searchRegex && !text.match(searchRegex)) {
            show = false;
        }

        // If the marker is shown after all filtering, update histogram counts
        if (show) {
            searchCount++;

            // Clamp earliestyear and latestyear to the 1400-1600 range
            const clampedEarliest = Math.max(1400, earliestyear);
            const clampedLatest = Math.min(1600, latestyear);

            // Get all decades between the clamped earliest year and clamped latest year
            const decades = getDecades(clampedEarliest, clampedLatest);

            decades.forEach(decade => {
                if (histogramCounts[decade] !== undefined) {
                    histogramCounts[decade] += 1;  // Increment the count for this decade
                }
            });
        }

        // Filter out markers that fall outside of the date range (minYear to maxYear)
        // Must be done after the histogram is created
        
        if (earliestyear > maxYear || latestyear < minYear) {
            show = false;
        }

        // Update marker visibility on the map
        updateMarkerOnMap(marker, show);
    });

    // Update search count display
    document.querySelector("#search-count").innerHTML = `[${searchCount} ${searchCount === 1 ? "event" : "events"}]`;

    // Now that we have the counts, update the histogram
    updateHistogram(histogramCounts);

    // Update the map size
    map.invalidateSize();
}

// Function to initialize all decades between a given start and end year with 0
function initializeDecades(startYear, endYear) {
    const histogramCounts = {};
    for (let year = startYear; year <= endYear; year += 10) {
        histogramCounts[year] = 0;  // Initialize each decade with 0 events
    }
    return histogramCounts;
}

// Function to get all decades between two years
function getDecades(earliestYear, latestYear) {
    const decades = [];
    let startDecade = getDecade(earliestYear);  // Get the starting decade (e.g., 1990 for 1994)
    const endDecade = getDecade(latestYear);  // Get the ending decade (e.g., 2000 for 2002)

    // Loop through each decade from the start to end
    for (let decade = startDecade; decade <= endDecade; decade += 10) {
        decades.push(decade);
    }

    return decades;  // Return array of decades, e.g., [1990, 2000] if marker spans 1994 to 2002
}

// Function to calculate the decade from a given year
function getDecade(year) {
    return Math.floor(year / 10) * 10;  // Returns the decade, e.g., 1990 for years 1990-1999
}

// Function to update the histogram based on counts
function updateHistogram(histogramCounts) {
    const histogramRow = document.getElementById("histogramRow");
    histogramRow.innerHTML = '';  // Clear existing content

    const decades = Object.keys(histogramCounts).sort((a, b) => a - b);  // Sort decades in ascending order

    // Find the maximum and minimum count to scale the height proportionally
    const maxCount = Math.max(...Object.values(histogramCounts));
    const minCount = Math.min(...Object.values(histogramCounts));

    // Define a maximum height, e.g., 50px
    const maxHeight = 50;

    // Create a cell for both maxCount and minCount labels at the left of the histogram
    const labelCell = document.createElement("td");
    labelCell.style.verticalAlign = "top";
    labelCell.style.position = "relative";
    labelCell.style.width = "50px";  // Adjust width for both labels

    // Create maxCount label
    const maxCountLabel = document.createElement("div");
    maxCountLabel.textContent = maxCount;
    maxCountLabel.style.fontSize = "12px";
    maxCountLabel.style.color = "black";
    maxCountLabel.style.position = "relative";
    maxCountLabel.style.left = "-25px";  // Move the label outside of the histogram
    maxCountLabel.style.top = "-10px";   // Move it up slightly

    // Create minCount label
    const minCountLabel = document.createElement("div");
    minCountLabel.textContent = minCount;
    minCountLabel.style.fontSize = "12px";
    minCountLabel.style.color = "black";
    minCountLabel.style.position = "relative";
    minCountLabel.style.left = "-15px";  // Align with maxCount label
    minCountLabel.style.top = "30px";    // Position it below maxCount label

    // Append both labels to the same labelCell
    labelCell.appendChild(maxCountLabel);
    labelCell.appendChild(minCountLabel);
    histogramRow.appendChild(labelCell);  // Add the label cell to the row

    // Create the histogram bars
    decades.forEach(decade => {
        const count = histogramCounts[decade];
        const cell = document.createElement("td");
        const div = document.createElement("div");
        div.className = "count";

        // Scale the height proportionally to the maximum count
        const height = (count / maxCount) * maxHeight; // Proportional height

        div.style.height = height + "px";  // Set the height of the bar
        div.title = `${count} events in the ${decade}s`;

        cell.appendChild(div);
        histogramRow.appendChild(cell);  // Add the bar to the row
    });
}


//////////////////////////////
//
// UserSearch –- freetext search through data
//

function UserSearch(skipFilter = false) {
    const input = document.querySelector("#input");
    if (!input) return;

    const regex = new RegExp(input.value, 'i');
    let searchCount = 0;
    const checkboxStates = getCheckboxStates();
    const minYear = document.getElementById('date-slider-min').value;
    const maxYear = document.getElementById('date-slider-max').value;

    markers.forEach(({ marker, text, personID, locationCertainty, earliestDateCertainty, latestDateCertainty, rangeCertainty, earliestyear, latestyear }) => {
        const type = personID.substring(0, 3);
        const certainties = { locationCertainty, earliestDateCertainty, latestDateCertainty, rangeCertainty };
        let show = shouldShowMarker(type, checkboxStates, certainties) && text.match(regex);

        // Apply chronology filter based on date slider
       
        if (earliestyear > maxYear || latestyear < minYear) {
            show = false;
        }

        updateMarkerOnMap(marker, show);
        if (show) searchCount++;
    });

    // Update the search count display
    document.querySelector("#search-count").innerHTML = `[${searchCount} ${searchCount === 1 ? "event" : "events"}]`;

    // Trigger filterMarkers and pass the search regex to update the histogram as well
    filterMarkers(regex);

    map.invalidateSize();
}

// Function to update the active value labels and reapply filters
function updateDateRange() {
    const sliderMin = document.getElementById('date-slider-min');
    const sliderMax = document.getElementById('date-slider-max');
    const startActiveLabel = document.getElementById('slider-start-active-label');
    const endActiveLabel = document.getElementById('slider-end-active-label');

    let minValue = parseInt(sliderMin.value, 10);
    let maxValue = parseInt(sliderMax.value, 10);

    // Ensure the min handle doesn't exceed the max handle
    if (minValue > maxValue) {
        minValue = maxValue;
        sliderMin.value = minValue;
    }

    // Ensure the max handle doesn't fall below the min handle
    if (maxValue < minValue) {
        maxValue = minValue;
        sliderMax.value = maxValue;
    }

    // Update the global date range with year values
    currentDateRange[0] = minValue;
    currentDateRange[1] = maxValue;

    // Update the labels
    startActiveLabel.textContent = currentDateRange[0];
    endActiveLabel.textContent = currentDateRange[1];

    // Position the labels dynamically
    const sliderWidth = sliderMin.offsetWidth;
    const minPercent = (minValue - sliderMin.min) / (sliderMin.max - sliderMin.min);
    const maxPercent = (maxValue - sliderMin.min) / (sliderMin.max - sliderMin.min);

    // Adjust the rate of movement by scaling down the percentage
    const adjustmentFactor = 0.975; // Adjust this value to control the rate of movement
    const adjustedMinPercent = minPercent * adjustmentFactor;
    const adjustedMaxPercent = maxPercent * adjustmentFactor;

    startActiveLabel.style.left = `${adjustedMinPercent * sliderWidth}px`;
    endActiveLabel.style.left = `${adjustedMaxPercent * sliderWidth}px`;

    // Call a function to reapply filters based on the selected range, or go to UserSearch depending on whether there is text.
    const input = document.querySelector("#input");

    if (input){
        UserSearch();
    } else {
        filterMarkers();
    }
}

function updateSliderBackground() {
    const sliderMin = document.getElementById("date-slider-min");
    const sliderMax = document.getElementById("date-slider-max");

    const minValue = parseInt(sliderMin.value);
    const maxValue = parseInt(sliderMax.value);

    const totalRange = sliderMin.max - sliderMin.min;
    const minPercent = ((minValue - sliderMin.min) / totalRange) * 100;
    const maxPercent = ((maxValue - sliderMax.min) / totalRange) * 100;

    // Define a constant width for the black portion (in percentage)
    const blackWidth = 2;  // For example, 1% width in front of the thumb

    // The black portion should be directly in front of the min thumb, but never extend beyond maxPercent
    const blackEnd = Math.min(minPercent + blackWidth, maxPercent);

    // Apply gradient as background
    sliderMin.style.background = `linear-gradient(to right, 
        #ddd 0%, 
        #ddd ${minPercent}%, 
        black ${minPercent}%, 
        black ${blackEnd}%, 
        #1E90FF ${blackEnd}%, 
        #1E90FF ${maxPercent}%, 
        #ddd ${maxPercent}%, 
        #ddd 100%)`;

    sliderMax.style.background = sliderMin.style.background;
}

</script>