Geoguessr Map-Making Auto-Tag

Tag your street views by date, exactTime, address, generation, elevation

当前为 2024-06-09 提交的版本,查看 最新版本

// ==UserScript==
// @name         Geoguessr Map-Making Auto-Tag
// @namespace    https://www.geoguessr.com/user/6494f9bbab07ca3ea843220f
// @version      3.80
// @description  Tag your street views by date, exactTime, address, generation, elevation
// @author       KaKa
// @match        https://map-making.app/maps/*
// @grant        GM_setClipboard
// @grant        GM_xmlhttpRequest
// @require      https://cdn.jsdelivr.net/npm/sweetalert2@11
// @license      MIT
// @icon         https://www.svgrepo.com/show/423677/tag-price-label.svg
// ==/UserScript==

(function() {
    'use strict';
    let accuracy=60 /* You could modifiy accuracy here, default setting is 1 minutes */
    let tagBox = ['Year', 'Month','Day', 'Time','Country', 'Subdivision', 'Locality', 'Generation', 'Elevation','Type']
    let mapData
    getMap().then((map) =>{
        mapData=map

    })
    function getMap() {
        return new Promise(function(resolve, reject) {
            var requestURL = window.location.origin + "/api" + window.location.pathname + "/locations";

            GM_xmlhttpRequest({
                method: "GET",
                url: requestURL,
                onload: function(response) {

                    if (response.status === 200) {

                        try {
                            var jsonData = JSON.parse(response.responseText);
                            resolve(jsonData);
                        } catch (error) {
                            console.error("Error parsing JSON:", error);

                            reject("Error parsing JSON data!");
                        }
                    } else {

                        console.error("HTTP Error:", response.status);
                        reject("HTTP Error!");
                    }
                },
                onerror: function(error) {

                    console.error("Request Error:", error);
                    reject("Error fetching meta data of the map!");
                }
            });
        });
    }

    function extractTags() {
        var elements = document.querySelectorAll('label.selection-row__label');
        var tags = [];
        elements.forEach(function(labelElement) {
            var labelText = labelElement.textContent.trim();
            if(labelText.includes('Everything')){
                tags.push(labelText)
            }
            else{
                var tagText = labelText.split('Tag:')[1].trim();
                tags.push(tagText)};
        });
        return tags;
    }

    function extractSelection(locs, tags) {
        if (!locs || locs.length === 0) {
            Swal.fire('Selection not found', 'please select one location for auto-tagging at least!', 'warning');
        }
        if( tags.includes('Everything')){
            return locs
        }

        var result = [];
        locs.forEach(function(loc) {
            if (loc.tags && loc.tags.length > 0) {
                loc.tags.forEach(function(tag) {
                    if (tags.includes(tag)) {
                        result.push(loc);
                    }
                });
            }
        });
        return result;
    }

    async function getSelection(){
        const locs= await getMap()
        const tags=extractTags()
        const selection=extractSelection(locs,tags)
        return selection
    }

    function updateSelection(entries) {
        var requestURL = window.location.origin + "/api" + window.location.pathname + "/locations";
        var payload = {
            edits: []
        };

        entries.forEach(function(entry) {
            var createEntry = {
                id: -1,
                author: entry.author,
                mapId: entry.mapId,
                location: entry.location,
                panoId: entry.panoId,
                panoDate: entry.panoDate,
                heading: entry.heading,
                pitch: entry.pitch,
                zoom: entry.zoom,
                tags: entry.tags,
                flags: entry.flags,
                createdAt: entry.createdAt,

            };
            payload.edits.push({
                action: {
                    type: 3
                },
                create: [createEntry],
                remove: [entry.id]
            });


        });

        var xhr = new XMLHttpRequest();
        xhr.open("POST", requestURL);
        xhr.setRequestHeader("Content-Type", "application/json");

        xhr.onload = function() {
            if (xhr.status >= 200 && xhr.status < 300) {
                console.log("Request succeeded");
            } else {
                console.error("Request failed with status", xhr.status);
            }
        };

        xhr.onerror = function() {
            console.error("Request failed");
        };

        xhr.send(JSON.stringify(payload));
    }

    async function runScript(tags,sR,uN) {
        let taggedLocs=[];
        let selections

        if(!selections){
            selections=await getSelection()
        }

        function mergeList(list1, list2) {
            const mergedDict = list1.reduce((dict, currentValue, index) => {

                if (list2[index] !== undefined) {
                    dict[currentValue] = list2[index];
                }
                return dict;
            }, {});

            return mergedDict;
        }

        async function UE(t, e, s, d) {

            try {
                const r = `https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.MapsJsInternalService/${t}`;
                let payload = createPayload(t, e);
                var lat=parseFloat(e.location.lat.toFixed(6))
                var lng=parseFloat(e.location.lng.toFixed(6))

               if(d){
                    payload=JSON.stringify([["apiv3"],[[null,null,lat,lng],10],[[null,null,null,null,null,null,null,null,null,null,[s,d]],null,null,null,null,null,null,null,[2],null,[[[2,true,2]]]],[[2,6]]])
                }
                const response = await fetch(r, {
                    method: "POST",
                    headers: {
                        "content-type": "application/json+protobuf",
                        "x-user-agent": "grpc-web-javascript/0.1"
                    },
                    body: payload,
                    mode: "cors",
                    credentials: "omit"
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                } else {
                    return await response.json();
                }
            } catch (error) {
                console.error(`There was a problem with the UE function: ${error.message}`);
            }
        }

        function createPayload(mode,coorData) {
            let payload;
            if (mode === 'GetMetadata') {
                payload = [["apiv3",null,null,null,"US",null,null,null,null,null,[[0]]],["en","US"],[[[2,coorData]]],[[1,2,3,4,8,6]]];
            } else if (mode === 'SingleImageSearch') {
                payload =[["apiv3",null,null,null,"US",null,null,null,null,null, [[0]]],
                          [[null,null,coorData.location.lat,coorData.location.lng],50],
                          [null,["en","US"],null,null,null,null,null,null,[2],null,[[[2,1,2],[3,1,2],[10,1,2]]]], [[1,2,3,4,8,6]]];
            } else {
                throw new Error("Invalid mode!");
            }
            return JSON.stringify(payload);
        }

        function monthToTimestamp(m) {

            const [year, month] = m.split('-');

            const startDate =Math.round( new Date(year, month-1,1).getTime()/1000);

            const endDate =Math.round( new Date(year, month, 1).getTime()/1000)-1;

            return { startDate, endDate };
        }

        async function binarySearch(c, start,end) {
            let capture
            let response
            while (end - start >= accuracy) {
                let mid= Math.round((start + end) / 2);
                response = await UE("SingleImageSearch", c, start,end);
                if (response&&response[0][2]== "Search returned no images." ){
                    start=mid+start-end
                    end=start-mid+end
                    mid=Math.round((start+end)/2)
                } else {
                    start=mid
                    mid=Math.round((start+end)/2)
                }
                capture=mid
            }

            return capture
        }

        function getMetaData(svData) {
            if (svData) {
                let levelId=svData.dn
                let year = 'noyear',month = 'nomonth'
                let panoType='Unofficial'
                let subdivision='nosub',locality='nolocality'
                let coverageCount='0'
                if (svData.imageDate) {
                    const matchYear = svData.imageDate.match(/\d{4}/);
                    if (matchYear) {
                        year = matchYear[0];
                    }

                    const matchMonth = svData.imageDate.match(/-(\d{2})/);
                    if (matchMonth) {
                        month = matchMonth[1];
                    }
                }

                if (svData.copyright.includes('Google')) {
                    panoType = 'Official';
                }
                if (svData.time){
                    coverageCount = svData.time.length.toString();
                }
                if(svData.location.description){
                    let parts = svData.location.description.split(',');
                    if(parts.length > 1){
                        subdivision = parts[parts.length-1].trim();
                        locality = parts[parts.length-2].trim();
                    } else {
                        subdivision = svData.location.description;

                    }
                }
                return [year,month,panoType,subdivision,locality,levelId,coverageCount]
            }

            else{
                return null}
        }

        function getGeneration(svData,country) {

            if (svData&&svData.tiles) {
                if (svData.tiles.worldSize.height === 1664) { // Gen 1
                    return 'Gen1';
                } else if (svData.tiles.worldSize.height === 6656) { // Gen 2 or 3

                    let lat;
                    for (let key in svData.Sv) {
                        lat = svData.Sv[key].lat;
                        break;
                    }

                    let date;
                    if (svData.imageDate) {
                        date = new Date(svData.imageDate);
                    } else {
                        date = 'nodata';
                    }

                    if (date!=='nodata'&&((country === 'BD' && (date >= new Date('2021-04'))) ||
                                          (country === 'EC' && (date >= new Date('2022-03'))) ||
                                          (country === 'FI' && (date >= new Date('2020-09'))) ||
                                          (country === 'IN' && (date >= new Date('2021-10'))) ||
                                          (country === 'LK' && (date >= new Date('2021-02'))) ||
                                          (country === 'KH' && (date >= new Date('2022-10'))) ||
                                          (country === 'LB' && (date >= new Date('2021-05'))) ||
                                          (country === 'NG' && (date >= new Date('2021-06'))) ||
                                          (country === 'ST') ||
                                          (country === 'US' && lat > 52 && (date >= new Date('2019-01'))))) {
                        return 'Shitcam';
                    }

                    let gen2Countries = ['AU', 'BR', 'CA', 'CL', 'JP', 'GB', 'IE', 'NZ', 'MX', 'RU', 'US', 'IT', 'DK', 'GR', 'RO',
                                         'PL', 'CZ', 'CH', 'SE', 'FI', 'BE', 'LU', 'NL', 'ZA', 'SG', 'TW', 'HK', 'MO', 'MC', 'SM',
                                         'AD', 'IM', 'JE', 'FR', 'DE', 'ES', 'PT'];
                    if (gen2Countries.includes(country)) {

                        return 'Gen2or3';
                    }
                    else{
                        return 'Gen3';}
                }
                else if(svData.tiles.worldSize.height === 8192){
                    return 'Gen4';
                }
            }
            return 'Unknown';
        }

        async function getLocal(coord, timestamp) {
            const apiUrl = "https://api.wheretheiss.at/v1/coordinates/";
            const systemTimezoneOffset = -new Date().getTimezoneOffset() * 60;

            try {
                const [lat, lng] = coord;
                const url = `${apiUrl}${lat},${lng}`;

                const responsePromise = new Promise((resolve, reject) => {
                    GM_xmlhttpRequest({
                        method: "GET",
                        url: url,
                        responseType: "json",
                        onload: function(response) {
                            if (response.status >= 200 && response.status < 300) {
                                resolve(response.response);
                            } else {
                                reject(new Error("Request failed: " + response.statusText));
                            }
                        },
                        onerror: function(error) {
                            reject(new Error("There was a network error: " + error));
                        }
                    });
                });

                const data = await responsePromise;
                const targetTimezoneOffset = data.offset * 3600;
                const offsetDiff = systemTimezoneOffset - targetTimezoneOffset;
                const convertedTimestamp = Math.round(timestamp - offsetDiff);
                return convertedTimestamp;
            } catch (error) {
                throw error;
            }
        }

        async function getElevation(locations) {
            function findRange(elevation, ranges) {
                for (let i = 0; i < ranges.length; i++) {
                    const range = ranges[i];
                    if (elevation >= range.min && elevation <= range.max) {
                        return `${range.min}-${range.max}m`;
                    }
                }
                if (!elevation) {
                    return 'noElevation';
                }
                return `${JSON.stringify(elevation)}m`;
            }

            const batchSize = 100;
            const totalBatches = Math.ceil(locations.length / batchSize);
            const promises = [];

            for (let i = 0; i < totalBatches; i++) {
                const batchLocations = locations.slice(i * batchSize, (i + 1) * batchSize);
                const coordinates = batchLocations.map(loc => `${loc.location.lat},${loc.location.lng}`).join('|');
                const url = `https://api.open-elevation.com/api/v1/lookup?locations=${coordinates}`;

                const promise = new Promise((resolve, reject) => {
                    GM_xmlhttpRequest({
                        method: "GET",
                        url: url,
                        responseType: "json",
                        onload: function(response) {
                            try {
                                const data = JSON.parse(response.responseText);
                                if (data && data.results && data.results.length > 0) {
                                    const elevations = data.results.map(result => result.elevation);
                                    batchLocations.forEach((location, index) => {
                                        if (location.tags) {
                                            if (sR) {
                                                const range = findRange(elevations[index], sR);
                                                location.tags.push(`${range}`);
                                            } else {
                                                location.tags.push(`${JSON.stringify(elevations[index])}m`);
                                            }
                                        } else {
                                            location.tags = [(sR ? `${findRange(elevations[index], sR)}m` : `${JSON.stringify(elevations[index])}m`)]

                                        }
                                    });
                                } else {
                                    batchLocations.forEach(location => {
                                        if (location.tags) {
                                            location.tags.push('noElevation');
                                        } else {
                                            location.tags=['noElevation']
                                        }
                                    });
                                }
                                resolve();
                            } catch (error) {
                                reject(error);
                            }
                        },
                        onerror: function(error) {
                            reject(new Error("There was a network error: " + error));
                        }
                    });
                });
                promises.push(promise);
            }

            await Promise.all(promises);
            return locations;
        }

        var CHUNK_SIZE = 1200;
        var promises = [];

        async function processCoord(coord, tags, svData,ccData) {
            if (svData){
                let meta=getMetaData(svData)
                let yearTag=meta[0]
                let monthTag=meta[1]
                let typeTag=meta[2]
                let subdivisionTag=meta[3]
                let localityTag=meta[4]
                let countryTag
                let genTag
                let trekkerTag=meta[5]
                let coverageTag=meta[6]
                let dayTag,timeTag,exactTime,timeRange
                var date=monthToTimestamp(meta[0]+'-'+meta[1])

                if(tags.includes('day')||tags.includes('time')){
                    exactTime=await binarySearch(coord, date.startDate,date.endDate)
                    if (exactTime<=date.startDate||exactTime>=date.endDate){
                        exactTime=null
                    }
                }

                if(!exactTime){dayTag='noday'
                               timeTag='notime'
                              }
                else{

                    const currentDate = new Date();
                    const currentOffset =-(currentDate.getTimezoneOffset())*60
                    const dayOffset = currentOffset-Math.round((coord.location.lng / 15) * 3600);
                    const LocalDay=new Date(Math.round(exactTime-dayOffset)*1000)
                    dayTag = LocalDay.toISOString().split('T')[0];

                    if(tags.includes('time')) {

                        var localTime=await getLocal([coord.location.lat,coord.location.lng],exactTime)
                        var timeObject=new Date(localTime*1000)
                        timeTag =`${timeObject.getHours().toString().padStart(2, '0')}:${timeObject.getMinutes().toString().padStart(2, '0')}:${timeObject.getSeconds().toString().padStart(2, '0')}`;
                        var hour = timeObject.getHours();

                        if (hour < 11) {
                            timeRange = 'Morning';
                        } else if (hour >= 11 && hour < 13) {
                            timeRange = 'Noon';
                        } else if (hour >= 13 && hour < 17) {
                            timeRange = 'Afternoon';
                        } else if(hour >= 17 && hour < 19) {
                            timeRange = 'Evening';
                        }
                        else{
                            timeRange = 'Night';
                        }
                    }
                }
                if (ccData){
                    try {
                        countryTag = ccData[1][0][5][0][1][4]
                    }
                    catch (error) {
                        try {
                            countryTag = ccData[1][5][0][1][4]
                        } catch (error) {
                            countryTag='nocountry'
                        }
                    }
                    if (!countryTag)countryTag='nocountry'
                }

                if (tags.includes('generation')&&typeTag=='Official'){
                    genTag = getGeneration(svData,countryTag)
                    coord.tags.push(genTag)}

                if (tags.includes('year'))coord.tags.push(yearTag)

                if (tags.includes('month'))coord.tags.push(yearTag.slice(-2)+'-'+monthTag)

                if (tags.includes('day'))coord.tags.push(dayTag)

                if (tags.includes('time')) coord.tags.push(timeTag)

                if (tags.includes('time')&&timeRange) coord.tags.push(timeRange)

                if (tags.includes('type'))coord.tags.push(typeTag)

                if (tags.includes('type')&&trekkerTag&&typeTag=='Official')coord.tags.push('trekker')

                if (tags.includes('country')&&typeTag=='Official')coord.tags.push(countryTag)

                if (tags.includes('subdivision')&&typeTag=='Official')coord.tags.push(subdivisionTag)

                if (tags.includes('locality')&&typeTag=='Official')coord.tags.push(localityTag)

                if (tags.includes('coverageCount')&&typeTag=='Official')coord.tags.push(coverageTag)
            }

            else {
                if(tags.some(tag => tagBox.includes(tag))){
                    coord.tags.push('nopano')
                }
            }


            if (coord.tags) {coord.tags=Array.from(new Set(coord.tags))}
            taggedLocs.push(coord);
        }

        async function processChunk(chunk, tags) {
            if (tags.includes('elevation')){
                try {
                    chunk = await getElevation(chunk);
                } catch (error) {
                    console.error('error fecthing elevtion data:', error);
                }
            }
            var service = new google.maps.StreetViewService();
            var promises = chunk.map(async coord => {
                let panoId = coord.panoId;
                let latLng = {lat: coord.location.lat, lng: coord.location.lng};
                let svData;
                let ccData;

                if ((panoId || latLng)) {
                    if(tags!=['elevation']){
                        svData = await getSVData(service, panoId ? {pano: panoId} : {location: latLng, radius: 50});}
                }
                if (!panoId && (tags.includes('generation')||('country'))) {
                    ccData = await UE('SingleImageSearch', coord);
                } else if (panoId && (tags.includes('generation')||('country'))) {
                    ccData = await UE('GetMetadata', panoId);
                }

                await processCoord(coord, tags, svData,ccData)
            });
            await Promise.all(promises);

        }

        function getSVData(service, options) {
            return new Promise(resolve => service.getPanorama({...options}, (data, status) => {
                resolve(data);
            }));
        }

        async function processData(tags) {
            try {
                const totalChunks = Math.ceil(selections.length / CHUNK_SIZE);
                let processedChunks = 0;

                const swal = Swal.fire({
                    title: 'Processing Data',
                    text: 'Please wait...',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                for (let i = 0; i < selections.length; i += CHUNK_SIZE) {
                    let chunk = selections.slice(i, i + CHUNK_SIZE);
                    await processChunk(chunk, tags);
                    processedChunks++;

                    const progress = Math.min((processedChunks / totalChunks) * 100, 100);
                    Swal.update({
                        html: `<div>${progress.toFixed(2)}% completed</div>
                       <div class="swal2-progress">
                           <div class="swal2-progress-bar" role="progressbar" aria-valuenow="${progress}" aria-valuemin="0" aria-valuemax="100" style="width: ${progress}%;">
                           </div>
                       </div>`
                    });
                }

                updateSelection(taggedLocs)
                swal.close();
                Swal.fire({
                    title: 'Success!',
                    text: 'Tagging completed! Do you want to refresh the page?',
                    icon: 'success',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Refresh'
                }).then((result) => {
                    if (result.isConfirmed) {
                        location.reload();
                    }
                });
            } catch (error) {
                swal.close();
                Swal.fire('Error!', 'Invalid JSON data','error');
                console.error('Error processing JSON data:', error);
            }
        }

        if(selections){
            if(selections.length>=1){processData(tags);}
            else{
                Swal.fire('Error Parsing JSON Data!', 'The input JSON data is empty! If you update the map after the page is loaded, please save it and refresh the page before tagging','error');}
        }else{Swal.fire('Error Parsing JSON Data!', 'The input JSON data is invaild or incorrectly formatted.','error');}
    }

    function createCheckbox(text, tags) {
        var label = document.createElement('label');
        var checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.value = text;
        checkbox.name = 'tags';
        checkbox.id = tags;
        label.appendChild(checkbox);
        label.appendChild(document.createTextNode(text));
        buttonContainer.appendChild(label);
        return checkbox;
    }

    var mainButton = document.createElement('button');
    mainButton.textContent = 'Auto-Tag';
    mainButton.style.position = 'fixed';
    mainButton.style.right = '20px';
    mainButton.style.bottom = '20px';
    mainButton.style.borderRadius = "18px";
    mainButton.style.fontSize = "16px";
    mainButton.style.padding = "10px 20px";
    mainButton.style.border = "none";
    mainButton.style.color = "white";
    mainButton.style.cursor = "pointer";
    mainButton.style.backgroundColor = "#4CAF50";
    mainButton.addEventListener('click', function () {
        if (buttonContainer.style.display === 'none') {
            buttonContainer.style.display = 'block';
        } else {
            buttonContainer.style.display = 'none';
        }
    });
    document.body.appendChild(mainButton);

    var buttonContainer = document.createElement('div');
    buttonContainer.style.position = 'fixed';
    buttonContainer.style.right = '20px';
    buttonContainer.style.bottom = '60px';
    buttonContainer.style.display = 'none';
    buttonContainer.style.fontSize = '16px';
    document.body.appendChild(buttonContainer);

    var selectAllCheckbox = document.createElement('input');
    selectAllCheckbox.type = 'checkbox';
    selectAllCheckbox.id = 'selectAll';
    selectAllCheckbox.addEventListener('change', function () {
        var checkboxes = document.getElementsByName('tags');
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = this.checked;
        }
    });
    var selectAllLabel = document.createElement('label');
    selectAllLabel.textContent = 'Select All';
    selectAllLabel.htmlFor = 'selectAll';



    var triggerButton = document.createElement('button');
    triggerButton.textContent = 'Star Tagging';
    triggerButton.addEventListener('click', function () {
        var checkboxes = document.getElementsByName('tags');
        var checkedTags = [];
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                checkedTags.push(checkboxes[i].id);
            }
        }
        if (checkedTags.includes('elevation')) {
            Swal.fire({
                title: 'Set A Range For Elevation',
                text: 'If you select "Cancel", the script will return the exact elevation for each location.',
                icon: 'question',
                showCancelButton: true,
                showCloseButton: true,
                allowOutsideClick: false,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Define Range for Each Segment',
                        html: `
                    <label> <br>Enter range for each segment, separated by commas</br></label>
                    <textarea id="segmentRanges" class="swal2-textarea" placeholder="such as:-1-10,11-35"></textarea>
                `,
                        icon: 'question',
                        showCancelButton: true,
                        showCloseButton: true,
                        allowOutsideClick: false,
                        focusConfirm: false,
                        preConfirm: () => {
                            const segmentRangesInput = document.getElementById('segmentRanges').value.trim();
                            if (!segmentRangesInput) {
                                Swal.showValidationMessage('Please enter range for each segment');
                                return false;
                            }
                            const segmentRanges = segmentRangesInput.split(',');
                            const validatedRanges = segmentRanges.map(range => {
                                const matches = range.trim().match(/^\s*(-?\d+)\s*-\s*(-?\d+)\s*$/);
                                if (matches) {
                                    const min = Number(matches[1]);
                                    const max = Number(matches[2]);
                                    return { min, max };
                                } else {
                                    Swal.showValidationMessage('Invalid range format. Please use format: minValue-maxValue');
                                    return false;
                                }
                            });
                            return validatedRanges.filter(Boolean);
                        },
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes',
                        cancelButtonText: 'Cancel',
                        inputValidator: (value) => {
                            if (!value.trim()) {
                                return 'Please enter range for each segment';
                            }
                        }
                    }).then((result) => {
                        if (result.isConfirmed) {
                            runScript(checkedTags, result.value)
                        } else {
                            Swal.showValidationMessage('You canceled input');
                        }
                    });
                }
                else if (result.dismiss === Swal.DismissReason.cancel) {
                    runScript(checkedTags)
                }
            });
        }
        else {
            runScript(checkedTags)
        }
    })
    buttonContainer.appendChild(triggerButton);
    buttonContainer.appendChild(selectAllCheckbox);
    buttonContainer.appendChild(selectAllLabel);
    tagBox.forEach(tag => {
        createCheckbox(tag, tag.toLowerCase());
    });

})();