Impact Storymap

(function() {
const iframeRoot = document.getElementById(‘storymap-iframe-root’);
if (!iframeRoot) return;

// Add CSS reset directly through JavaScript
const style = document.createElement(‘style’);
style.textContent = `
#storymap-iframe-root {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
#storymap-iframe-root iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
body { overflow: hidden; }
`;
document.head.appendChild(style);

document.body.style.overflow = ‘hidden’;
iframeRoot.innerHTML = ”; // Clear the contents of the iframeRoot

let iframe = null;

// Debounce function
const debounce = (fn, delay) => {
let timer;
return (…args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(…args), delay);
};
};

const supportsSVH = () => CSS.supports(‘height’, ‘1svh’);

const adjustIframe = () => {
if (!iframe) {
iframe = document.createElement(‘iframe’);
iframe.src = ‘https://storymaps.arcgis.com/stories/241059f773e04755a741cd4b0419d3db?cover=true&header=true’;
iframeRoot.appendChild(iframe);
}
const { left: offsetLeft, top: offsetTop } = iframeRoot.getBoundingClientRect();
const heightUnit = supportsSVH() ? ‘svh’ : ‘vh’;
iframeRoot.style.height = `calc(100${heightUnit} – ${offsetTop + window.scrollY}px)`;
Object.assign(iframe.style, {
top: ‘0’,
left: `-${offsetLeft + window.scrollX}px`,
width: `${window.innerWidth}px`,
height: ‘100%’,
});
};

const enableScrollAndShowFooter = () => {
document.body.style.overflow = ”;
};

// Debounced adjustIframe function (e.g., 200ms delay after resizing stops)
const debouncedAdjustIframe = debounce(adjustIframe, 200);

window.addEventListener(‘load’, adjustIframe);
window.addEventListener(‘resize’, debouncedAdjustIframe);
window.visualViewport?.addEventListener(‘resize’, debouncedAdjustIframe);
window.addEventListener(‘beforeunload’, enableScrollAndShowFooter);
adjustIframe();
})();