Default timeframe staring in 1824

General
6

If anyone wants to set their own custom time range in Firefox, here’s how I’ve done it.

Create a new folder in your files, create 2 new files, manifest.json and script.js (They have to be named exactly that). After you’ve pasted the below code into the files and saved them, search about:debugging#/runtime/this-firefox in your browser, click on Load Temporary Addon and open the manifest file. Then just run reload and your website should always have the timeslider set to your custom values.

manifest.json

{
  "manifest_version": 2,
  "name": "OHM Year Setter",
  "version": "1.0",
  "permissions": ["*://www.openhistoricalmap.org/*"],
  "content_scripts": [
    {
      "matches": ["*://www.openhistoricalmap.org/*"],
      "js": ["script.js"]
    }
  ]
}

script.js

let rangeInput = document.querySelector('.leaflet-ohm-timeslider-rangeinputs-year');
if (rangeInput) {
    rangeInput.value = '1000'; // Replace with your desired year for the year range
    rangeInput.dispatchEvent(new Event('input', { bubbles: true }));
}

let submitDiv = document.querySelector('.leaflet-ohm-timeslider-rangeinputs-submit');
if (submitDiv) {
    let submitButton = submitDiv.querySelector('button, input[type="submit"]');
    if (submitButton) {
        submitButton.click();
    } else {
        console.error('No submit button found inside .leaflet-ohm-timeslider-rangeinputs-submit');
    }
} else {
    console.error('Submit div not found');
}

setTimeout(() => {
    let sliderInput = document.querySelector('.leaflet-ohm-timeslider-sliderbar');
    if (sliderInput) {
        sliderInput.value = '1300'; // Replace with your desired year to load
        sliderInput.dispatchEvent(new Event('input', { bubbles: true }));
    } else {
        console.error('Slider input .leaflet-ohm-timeslider-sliderbar not found');
    }
}, 1000); // 1-second delay to ensure submission completes
1 Like