feat(route-builder): clearer map cursors, route click tolerance, swisstopo credit

- Pointing-hand cursor over the map (click adds a waypoint); grab/grabbing
  only on the draggable waypoint pins. Fixes the cursor living on the
  Leaflet container element itself (the `.edit-map` div), not a descendant.
- Route polylines render on a canvas renderer with a hit `tolerance`, so a
  click near the line inserts a waypoint without a pixel-perfect hit.
- Hide the on-map attribution control and show the required "Kartendaten ©
  swisstopo" credit in the page footer, matching /hikes.
This commit is contained in:
2026-05-22 14:26:44 +02:00
parent 6483c55fce
commit 5540d37c72
3 changed files with 58 additions and 3 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "homepage",
"version": "1.82.0",
"version": "1.82.1",
"private": true,
"type": "module",
"scripts": {
@@ -94,7 +94,9 @@
if (cancelled || !node.isConnected) return;
const map = L.map(node, {
attributionControl: true,
// On-map attribution removed for a cleaner frame; the required
// swisstopo credit is shown in the page footer instead.
attributionControl: false,
zoomControl: true,
preferCanvas: false
}).setView(DEFAULT_CENTER, DEFAULT_ZOOM);
@@ -109,6 +111,11 @@
const markerLayer = L.layerGroup().addTo(map);
const lineLayer = L.layerGroup().addTo(map);
// Route polylines render on a canvas with a hit-test `tolerance`, so a
// click *near* the (thin) line still inserts a waypoint into the route
// — same trick as the /hikes overview map's broadened hover.
const routeRenderer = L.canvas({ tolerance: 12 });
// Map of waypointId → marker, kept in sync by render(). Used by the
// focus effect so it can pan/zoom + style the marker for `mapView.focusId`
// without forcing a full re-render of every marker.
@@ -204,7 +211,8 @@
const poly = L.polyline(latLngs, {
color: TRACK_COLOR,
weight: 4,
opacity: 0.9
opacity: 0.9,
renderer: routeRenderer
}).addTo(lineLayer);
// Routed segments index aligns with placed-only pairs; map back
// to the full waypoint-array index so inline insertion still
@@ -357,6 +365,24 @@
}
}
/* Default cursor is a pointing hand — a click adds a waypoint (on blank map
* or, with the canvas tolerance, near a route). Leaflet turns the
* `.edit-map` div itself into the container, so the grab cursor lives on
* this element (not a descendant) — target it directly. */
.edit-map:global(.leaflet-container) {
cursor: pointer;
}
/* Waypoint pins are the only draggable thing — show the drag hand on them. */
.edit-map :global(.rb-waypoint) {
cursor: grab;
}
.edit-map :global(.rb-waypoint:active) {
cursor: grabbing;
}
/* Placement mode (dropping an unplaced image) keeps the crosshair. */
.edit-map-wrap.placement-mode :global(.leaflet-container) {
cursor: crosshair;
}
@@ -490,6 +490,15 @@
Veröffentlichung als Wandereintrag erfordert einen Commit der Dateien unter
<code>src/content/hikes/&lt;slug&gt;/</code>.
</p>
<!-- Tiny swisstopo credit (the on-map attribution control is hidden);
their tile licence still requires the credit to appear on the page. -->
<footer class="map-credit">
Kartendaten &copy;
<a href="https://www.swisstopo.admin.ch/" target="_blank" rel="noopener noreferrer">
swisstopo
</a>
</footer>
</section>
<!-- FAB lives outside .builder so its fixed-positioning doesn't add a
@@ -848,4 +857,24 @@
border-radius: var(--radius-sm);
font-size: 0.85em;
}
/* Tiny, muted map-licence credit at the bottom of the page. */
.map-credit {
margin-top: 0.5rem;
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);
}
</style>