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:
+1
-1
@@ -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/<slug>/</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 ©
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user