About

I like to use Gaia GPS to record outdoor activities. When I want to take a screenshot of the map, I find it very annoying to crop out all of the UI elements and maintain a 16:9 aspect ratio. To speed up this process and make it more enjoyable, I created a Tamper Monkey script that removes UI elements with the click of a button.

How to use the tool

Please note that the instructions below are for Firefox. The script is at the bottom of this page.

Setting up

1. Search for the Tamper Monkey extension and install it
2. Once installed, click on the puzzle piece icon in the top right of the browser
3. Click on “Tampermonkey” from the drop-down
4. Click on “Create a new script…”
5. Copy the code provided into the editor
6. Click on “File” and then click on “Save” from the drop-down

Using the tool

1. Go to the Gaia GPS map
2. You should now see two buttons in the top left corner
3. Click “Toggle UI Elements” to hide UI elements
4. Click “Hide Buttons” to hide these two new buttons for 20 seconds
5. While the buttons are hidden, take a screenshot

Take screenshots with a higher resolution then the display

1. Make the website full screen by pressing “F11” on the keyboard
2. Open the Firefox Developer Tools window with “Ctrl-Shift-K”
3. Ensure you are in the “Console” tab
4. At the bottom of the window by the “>>” symbol, enter “:screenshot –dpr 2” to take a screenshot of the current browser window with 2 times the resolution of your display

Pictures

Below is a picture of Gaia GPS with the tool.

Below is a picture with the UI elements removed.

Tamper Monkey Script

// ==UserScript==
// @name         Gaia GPS Screenshot Helper
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Hides the visibility of certain elements on the Gaia GPS website so nice screenshots can be taken
// @author       Riley Trafton
// @match        https://www.gaiagps.com/map/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==
// Last modifed 2023.06.02. It would be nice to have the script do something equivalent to typing ":screenshot --dpr 2" into the firefox developer console to take a screenshot with 2 times the resolution

(function() {
    'use strict';

    var classesToHide = ['Map_search__CJjI',
                           'Map_footer__tlmD',
                           'Map_header__UgJq',
                           'MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover MuiLink-button css-4imcou',
                           'Map_orientation__zLpQ',
                           'mapboxgl-ctrl-attrib-button',
                           'MuiDrawer-root Controls_drawer__7Ksl MuiDrawer-docked css-1tu59u4',
                           'MuiAccordionSummary-expandIconWrapper Mui-expanded css-1fx8m19'
                          ];

    var parentsToHide = ['MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium  css-16pm3fs',
                           'MuiListItem-root MuiListItem-padding css-1n81496',
                           'MuiList-root MuiList-padding css-1ontqvh'
                           ];

    setTimeout(() => { buttonCreatorFunction(classesToHide, parentsToHide); }, 2000);

})();

// Toggles the visibility of the selected elements
function elementEditorFunction(event, classesToHide, parentsToHide) {

    // Using a custom data tag attached to the button to store the visibilityStatus
    var visibilityStatus = document.getElementById("visibilityTogglerButton").getAttribute("data-uistate");
    if (visibilityStatus == "none") {
        document.getElementById("visibilityTogglerButton").setAttribute("data-uistate", "flex");
    }
    else {
        document.getElementById("visibilityTogglerButton").setAttribute("data-uistate", "none");
    }

    console.log("Starting to change visibility");

    // Run through the list classesToHide and change display attribute
    for (var item of classesToHide) {
        for (var item2 of document.getElementsByClassName(item)) {
            item2.style.display = visibilityStatus;
        }
    }

    // Run through the list parentsToHide and change display attribute
    for (item of parentsToHide) {
        if (document.getElementsByClassName(item).length > 0) {
            document.getElementsByClassName(item)[0].parentNode.style.display = visibilityStatus;
        }
    }

    // Changes the font size of the date time stamp
    var dateStampNode = document.getElementsByClassName('MuiTypography-root MuiTypography-caption css-17vvm01');
    if (dateStampNode.length > 0) {
        if (visibilityStatus == "none") {
            dateStampNode[0].style.fontSize = '20px';
        }
        else {
            dateStampNode[0].style.fontSize = '12px';
        }
    }

    console.log("Finished changing visibility");

}

// Makes two new buttons
function buttonCreatorFunction(classesToHide, parentsToHide) {

    console.log("Making new buttons");
    var newNode = document.createElement('div');
    newNode.innerHTML = '<button id="visibilityTogglerButton" type="button" data-uistate="none">Toggle UI Elements</button> <button id="buttonHiderButton" type="button"">Hide Buttons</button>';
    newNode.setAttribute('id', 'customButtons');
    newNode.setAttribute("style", "z-index:2; position:absolute; display:flex");
    document.getElementById("root").insertBefore(newNode, document.getElementsByClassName("Map_ui__Lpv1")[0]); // Put the new node in a specific spot so it shows up on the page
    document.getElementById("visibilityTogglerButton").addEventListener("click", (event) => { elementEditorFunction(event, classesToHide, parentsToHide); }, false);
    document.getElementById("buttonHiderButton").addEventListener("click", buttonHiderFunction, false);

}

// Hides to buttons for 20 seconds so a screenshot can be taken
function buttonHiderFunction(event) {

    console.log("Hiding the buttons for 20 seconds");
    document.getElementById("customButtons").style.display = "none";
    setTimeout(() => { document.getElementById("customButtons").style.display = "flex"; }, 20000);

}