Skip to content

Commit fa02777

Browse files
bmmmmbmmmm
committed
Add button to lazy load OpenStreetMap on demand
The map iframe now loads only when clicked, improving initial page load. Added toggle button with smooth scroll to map location.
1 parent b628a8e commit fa02777

2 files changed

Lines changed: 119 additions & 12 deletions

File tree

‎donations.html‎

Lines changed: 65 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -133,18 +133,38 @@ <h1>Unterstütze bitcircus101</h1>
133133
display: none;
134134
"
135135
>
136-
<iframe
137-
width="425"
138-
height="350"
139-
src="https://www.openstreetmap.org/export/embed.html?bbox=7.057943344116212%2C50.72276418262858%2C7.12090015411377%2C50.75828718705439&amp;layer=mapnik&amp;marker=50.74052905321277%2C7.08942174911499"
140-
style="border: 1px solid black"
141-
></iframe
142-
><br /><small
143-
><a
144-
href="https://www.openstreetmap.org/?mlat=50.74053&amp;mlon=7.08942#map=15/50.74053/7.08942"
145-
>Größere Karte öffnen</a
146-
></small
136+
<button
137+
id="show-map-btn"
138+
style="
139+
padding: 10px 20px;
140+
background: #4285f4;
141+
color: #fff;
142+
border: none;
143+
border-radius: 5px;
144+
cursor: pointer;
145+
font-size: 1rem;
146+
"
147147
>
148+
Auf Karte anzeigen
149+
</button>
150+
<div
151+
id="osm-map-container"
152+
style="display: none; margin-top: 20px"
153+
>
154+
<iframe
155+
id="osm-map"
156+
width="425"
157+
height="350"
158+
src=""
159+
style="border: 1px solid black"
160+
></iframe
161+
><br /><small
162+
><a
163+
href="https://www.openstreetmap.org/?mlat=50.74053&amp;mlon=7.08942#map=15/50.74053/7.08942"
164+
>Größere Karte öffnen</a
165+
></small
166+
>
167+
</div>
148168
</div>
149169
<div class="back-link">
150170
<a href="index.html">← Zurück zur Startseite</a>
@@ -215,6 +235,40 @@ <h1>Unterstütze bitcircus101</h1>
215235
"payment-method-text",
216236
);
217237
if (paymentMethodText) paymentMethodText.style.display = "none";
238+
239+
// OSM Map functionality
240+
var showMapBtn = document.getElementById("show-map-btn");
241+
var mapContainer = document.getElementById("osm-map-container");
242+
var osmMap = document.getElementById("osm-map");
243+
244+
if (showMapBtn && mapContainer && osmMap) {
245+
showMapBtn.addEventListener("click", function () {
246+
// Load map only on first click
247+
if (!osmMap.src) {
248+
osmMap.src =
249+
"https://www.openstreetmap.org/export/embed.html?bbox=7.057943344116212%2C50.72276418262858%2C7.12090015411377%2C50.75828718705439&layer=mapnik&marker=50.74052905321277%2C7.08942174911499";
250+
}
251+
252+
// Show/hide map
253+
var isVisible = mapContainer.style.display !== "none";
254+
mapContainer.style.display = isVisible
255+
? "none"
256+
: "block";
257+
showMapBtn.textContent = isVisible
258+
? "Auf Karte anzeigen"
259+
: "Karte verstecken";
260+
261+
// Scroll to map when showing
262+
if (!isVisible) {
263+
setTimeout(function () {
264+
mapContainer.scrollIntoView({
265+
behavior: "smooth",
266+
block: "center",
267+
});
268+
}, 100);
269+
}
270+
});
271+
}
218272
});
219273

220274
// Show donation content only after explicit consent, always show banner first

‎index.html‎

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -336,10 +336,30 @@ <h2>Kontakt</h2>
336336
53113 Bonn, Germany
337337
</div>
338338
<div style="margin-top: 20px">
339+
<button
340+
id="show-map-btn"
341+
style="
342+
padding: 10px 20px;
343+
background: #4285f4;
344+
color: #fff;
345+
border: none;
346+
border-radius: 5px;
347+
cursor: pointer;
348+
font-size: 1rem;
349+
"
350+
>
351+
Auf Karte anzeigen
352+
</button>
353+
</div>
354+
<div
355+
id="osm-map-container"
356+
style="display: none; margin-top: 20px"
357+
>
339358
<iframe
359+
id="osm-map"
340360
width="425"
341361
height="350"
342-
src="https://www.openstreetmap.org/export/embed.html?bbox=7.057943344116212%2C50.72276418262858%2C7.12090015411377%2C50.75828718705439&amp;layer=mapnik&amp;marker=50.74052905321277%2C7.08942174911499"
362+
src=""
343363
style="border: 1px solid black"
344364
></iframe
345365
><br /><small
@@ -398,6 +418,39 @@ <h2>Kontakt</h2>
398418
</div>
399419
</footer>
400420

421+
<script>
422+
// OSM Map functionality
423+
const showMapBtn = document.getElementById("show-map-btn");
424+
const mapContainer = document.getElementById("osm-map-container");
425+
const osmMap = document.getElementById("osm-map");
426+
427+
if (showMapBtn && mapContainer && osmMap) {
428+
showMapBtn.addEventListener("click", function () {
429+
// Load map only on first click
430+
if (!osmMap.src) {
431+
osmMap.src =
432+
"https://www.openstreetmap.org/export/embed.html?bbox=7.057943344116212%2C50.72276418262858%2C7.12090015411377%2C50.75828718705439&layer=mapnik&marker=50.74052905321277%2C7.08942174911499";
433+
}
434+
435+
// Show/hide map
436+
const isVisible = mapContainer.style.display !== "none";
437+
mapContainer.style.display = isVisible ? "none" : "block";
438+
showMapBtn.textContent = isVisible
439+
? "Auf Karte anzeigen"
440+
: "Karte verstecken";
441+
442+
// Scroll to map when showing
443+
if (!isVisible) {
444+
setTimeout(() => {
445+
mapContainer.scrollIntoView({
446+
behavior: "smooth",
447+
block: "center",
448+
});
449+
}, 100);
450+
}
451+
});
452+
}
453+
</script>
401454
<script defer src="main.js"></script>
402455
</body>
403456
</html>

0 commit comments

Comments
 (0)