diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index be87c9d..0f709ec 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -929,10 +929,22 @@ body::after {
}
.home-map {
+ position: relative;
width: 100%;
height: 100%;
}
+.home-map-col.is-fullscreen {
+ position: fixed !important;
+ inset: 0;
+ z-index: 9999;
+ height: 100dvh !important;
+}
+
+.home-map-col.is-fullscreen .home-map {
+ height: 100dvh;
+}
+
.home-feed-col {
padding: var(--space-8) var(--space-8);
}
diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig
index e1bcb8e..0a56b72 100644
--- a/themes/intotheeast/templates/trip.html.twig
+++ b/themes/intotheeast/templates/trip.html.twig
@@ -105,7 +105,14 @@
@@ -251,8 +258,10 @@ var tripMap = new maplibregl.Map({
container: 'trip-map',
style: MapUtils.MAP_STYLE,
center: [20, 20],
- zoom: 2
+ zoom: 2,
+ attributionControl: false
});
+tripMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-left');
tripMap.on('load', function () {
if (TRIP_ENTRIES.length === 0) {
@@ -300,6 +309,18 @@ tripMap.on('load', function () {
});
setTimeout(function () { tripMap.resize(); }, 100);
+(function() {
+ var fsBtn = document.getElementById('trip-map-fullscreen');
+ var mapCol = document.querySelector('.home-map-col');
+ if (!fsBtn || !mapCol) return;
+ fsBtn.addEventListener('click', function() {
+ var isFs = mapCol.classList.toggle('is-fullscreen');
+ fsBtn.setAttribute('aria-label', isFs ? 'Close map' : 'Expand map');
+ document.body.style.overflow = isFs ? 'hidden' : '';
+ setTimeout(function() { tripMap.resize(); }, 50);
+ });
+})();
+
(function() {
var filterBtns = document.querySelectorAll('.trip-filter-btn');
var cards = document.querySelectorAll('[data-type]');