feat(hikes): hide on-map attribution control, add swisstopo credit

Drop Leaflet's bottom-right attribution control on both the overview and
detail maps for a cleaner frame. The swisstopo tile licence still requires
their credit, so keep it on the page: the detail page already shows it in
the meta footer, and the overview now gets a tiny "Kartendaten © swisstopo"
line at the bottom of the listing.
This commit is contained in:
2026-05-22 12:42:37 +02:00
parent bb1d494c48
commit 48d971c216
4 changed files with 40 additions and 3 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "homepage",
"version": "1.79.0",
"version": "1.79.1",
"private": true,
"type": "module",
"scripts": {
+4 -1
View File
@@ -140,7 +140,10 @@
const latLngs: [number, number][] = track.map((p) => [p[1], p[0]]);
const map = L.map(node, {
attributionControl: true,
// On-map attribution control removed for a cleaner frame; the
// required swisstopo credit is repeated in the page's meta footer
// ("Kartendaten © swisstopo").
attributionControl: false,
zoomControl: true,
preferCanvas: true
});
@@ -103,7 +103,10 @@
// hovered/clicked from a comfortable margin instead of demanding a
// pixel-perfect click on the 4 px line.
const map = L.map(node, {
attributionControl: true,
// On-map attribution control removed for a cleaner frame.
// NOTE: swisstopo's tile licence requires their credit to appear;
// the /hikes page currently shows no other swisstopo attribution.
attributionControl: false,
zoomControl: true,
preferCanvas: true,
renderer: L.canvas({ tolerance: 12 })
+31
View File
@@ -229,6 +229,16 @@
{/each}
</ul>
{/if}
<!-- Tiny swisstopo credit. The map's own attribution control is hidden
for a cleaner frame, but their tile licence still requires the
credit to appear somewhere on the page. -->
<footer class="map-credit">
Kartendaten &copy;
<a href="https://www.swisstopo.admin.ch/" target="_blank" rel="noopener noreferrer">
swisstopo
</a>
</footer>
</div>
</section>
@@ -335,6 +345,27 @@
padding: 3rem 1rem;
}
/* Tiny, muted map-licence credit at the very bottom of the listing. */
.map-credit {
margin-top: 2.5rem;
padding: 0 1rem;
text-align: center;
font-size: 0.72rem;
color: var(--color-text-tertiary);
}
.map-credit a {
color: inherit;
text-decoration: underline;
text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
text-underline-offset: 0.18em;
transition: color var(--transition-fast);
}
.map-credit a:hover {
color: var(--color-primary);
}
@media (max-width: 560px) {
.grid {
grid-template-columns: 1fr;