Skip to content

Overlay menu options #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pom-cost merged 8 commits into from
Feb 13, 2025
Merged

Overlay menu options #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4c25480
updating
ignasivalles Feb 8, 2025
08afbdd
update
ignasivalles Feb 9, 2025
e2dceed
update
ignasivalles Feb 9, 2025
9a17ceb
update
ignasivalles Feb 10, 2025
5525d53
update
ignasivalles Feb 10, 2025
e6ae8f9
update
ignasivalles Feb 10, 2025
89142b9
update
ignasivalles Feb 10, 2025
0913467
Update index.html
pom-cost Feb 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 111 additions & 17 deletions .ipynb_checkpoints/index-checkpoint.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,34 +10,89 @@
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
</head>

<script>
function resizeIframe(iframe) {
if (iframe.contentWindow.document.body) {
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
}

// Resize iframe when it loads
document.addEventListener("DOMContentLoaded", function () {
const iframe = document.querySelector(".overlay-content iframe");
if (iframe) {
iframe.addEventListener("load", function () {
resizeIframe(iframe);
});
}
});

// Resize iframe on window resize
window.addEventListener("resize", function () {
const iframe = document.querySelector(".overlay-content iframe");
if (iframe) {
resizeIframe(iframe);
}
});
</script>

<body>
<header>
<div class="header-text">Poniendo Ojos al Mar</div>
<div class="subtitle"><a href="https://www.youtube.com/watch?v=A2zKARkpDW4" target="_blank">Tomando el pulso del Océano</a></div> <!-- Added link here -->
<div class="menu-toggle"></div>
<div class="menu-toggle" onclick="toggleMenu()">☰</div>
</header>

<div id="map"></div>

<nav class="map-menu">
<ul>
<li><a href="climatological-year/">Perspectiva climatológica</a></li>
<li><a href="#" onclick="toggleOverlay('proyectoOverlay')">¿Qué sabemos?</a></li>
<li><a href="#" onclick="toggleOverlay('climatologicalOverlay')">Perspectiva climatológica</a></li>
<li><a href="#" onclick="toggleOverlay('downloadOverlay')">Datos</a></li>
<li><a href="#" onclick="toggleOverlay('entidadesOverlay')">Entidades participantes</a></li>
</ul>
</nav>

<div class="overlay climatological-overlay" id="climatologicalOverlay">
<button class="close-btn" onclick="closeOverlay('climatologicalOverlay')">&times;</button>
<div class="overlay-content">
<div class="iframe-container">
<iframe src="climatological-year/climatological_plot.html"></iframe>
</div>
</div>


</div>

<div class="overlay" id="entidadesOverlay">
<button class="close-btn" onclick="closeOverlay('entidadesOverlay')">&times;</button>
<div class="overlay-content">
<iframe src="entidades/index.html"></iframe>
</div>
</div>

<div class="overlay" id="downloadOverlay">
<button class="close-btn" onclick="closeOverlay('downloadOverlay')">&times;</button>
<div class="overlay-content">
<iframe src="data/datos.html"></iframe>
</div>
</div>

<div class="overlay" id="proyectoOverlay">
<button class="close-btn" onclick="closeOverlay('proyectoOverlay')">&times;</button>
<div class="overlay-content">
<iframe src="info/info.html"></iframe>
</div>
</div>

<!-- Footer section -->
<footer>

<div class="logos">
<img src="assets/logoNexGen.png" alt="Logo NextGen" class="logo">
<img src="assets/logoIEO-CSIC.png" alt="Logo IEO-CSIC" class="logo">
</div>
<nav class="nav-menu">
<ul>
<li><a href="entidades/">Entidades participantes</a></li>
<!-- Add more links here if needed -->
</ul>
</nav>
</footer>

<script>
Expand Down Expand Up @@ -90,16 +145,16 @@
endColor = red;
}

ratio = Math.max(0, Math.min(1, ratio)); // Clamp between 0 and 1
ratio = Math.max(0, Math.min(1, ratio)); // Clamp between 0 and 1

var r = Math.round(startColor[0] + ratio * (endColor[0] - startColor[0]));
var g = Math.round(startColor[1] + ratio * (endColor[1] - startColor[1]));
var b = Math.round(startColor[2] + ratio * (endColor[2] - startColor[2]));
var r = Math.round(startColor[0] + ratio * (endColor[0] - startColor[0]));
var g = Math.round(startColor[1] + ratio * (endColor[1] - startColor[1]));
var b = Math.round(startColor[2] + ratio * (endColor[2] - startColor[2]));

return `rgb(${r},${g},${b})`;
}
return `rgb(${r},${g},${b})`;
}

var fillColor = getColor(temp_anom);
var fillColor = getColor(temp_anom);

var popupContent = '<div style="width: 200px; font-family: Montserrat, sans-serif; margin-left: 20px;">' +
'<strong>Sea Temperature:</strong> ' + temp + '°C<br>' +
Expand Down Expand Up @@ -188,6 +243,45 @@

dropdownControl.addTo(map);

function adjustOverlaySize(id) {
var iframe = document.querySelector(`#${id} iframe`);
iframe.onload = function() {
setTimeout(() => {
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}, 500);
};
}

function toggleOverlay(id) {
document.querySelectorAll('.overlay.active').forEach(function(overlay) {
overlay.classList.remove('active');
});

var overlay = document.getElementById(id);
if (!overlay.classList.contains("active")) {
overlay.classList.add("active");
adjustOverlaySize(id);
}
}

function closeOverlay(id) {
var overlay = document.getElementById(id);
if (overlay && overlay.classList.contains("active")) {
overlay.classList.remove("active");
}
}

function toggleMenu() {
var menu = document.querySelector(".map-menu");
menu.classList.toggle("active");
}

document.querySelectorAll('.close-btn').forEach(function(button) {
button.addEventListener('click', function() {
var overlayId = button.getAttribute('data-overlay');
closeOverlay(overlayId);
});
});

// Existing markers and popups

Expand Down Expand Up @@ -243,4 +337,4 @@
.bindPopup(popupContentLaredo);// Attach the popup
</script>
</body>
</html>
</html>
Loading