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",
|
"name": "homepage",
|
||||||
"version": "1.82.0",
|
"version": "1.82.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@@ -94,7 +94,9 @@
|
|||||||
if (cancelled || !node.isConnected) return;
|
if (cancelled || !node.isConnected) return;
|
||||||
|
|
||||||
const map = L.map(node, {
|
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,
|
zoomControl: true,
|
||||||
preferCanvas: false
|
preferCanvas: false
|
||||||
}).setView(DEFAULT_CENTER, DEFAULT_ZOOM);
|
}).setView(DEFAULT_CENTER, DEFAULT_ZOOM);
|
||||||
@@ -109,6 +111,11 @@
|
|||||||
const markerLayer = L.layerGroup().addTo(map);
|
const markerLayer = L.layerGroup().addTo(map);
|
||||||
const lineLayer = 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
|
// 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`
|
// focus effect so it can pan/zoom + style the marker for `mapView.focusId`
|
||||||
// without forcing a full re-render of every marker.
|
// without forcing a full re-render of every marker.
|
||||||
@@ -204,7 +211,8 @@
|
|||||||
const poly = L.polyline(latLngs, {
|
const poly = L.polyline(latLngs, {
|
||||||
color: TRACK_COLOR,
|
color: TRACK_COLOR,
|
||||||
weight: 4,
|
weight: 4,
|
||||||
opacity: 0.9
|
opacity: 0.9,
|
||||||
|
renderer: routeRenderer
|
||||||
}).addTo(lineLayer);
|
}).addTo(lineLayer);
|
||||||
// Routed segments index aligns with placed-only pairs; map back
|
// Routed segments index aligns with placed-only pairs; map back
|
||||||
// to the full waypoint-array index so inline insertion still
|
// 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) {
|
.edit-map-wrap.placement-mode :global(.leaflet-container) {
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -490,6 +490,15 @@
|
|||||||
Veröffentlichung als Wandereintrag erfordert einen Commit der Dateien unter
|
Veröffentlichung als Wandereintrag erfordert einen Commit der Dateien unter
|
||||||
<code>src/content/hikes/<slug>/</code>.
|
<code>src/content/hikes/<slug>/</code>.
|
||||||
</p>
|
</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>
|
</section>
|
||||||
|
|
||||||
<!-- FAB lives outside .builder so its fixed-positioning doesn't add a
|
<!-- FAB lives outside .builder so its fixed-positioning doesn't add a
|
||||||
@@ -848,4 +857,24 @@
|
|||||||
border-radius: var(--radius-sm);
|
border-radius: var(--radius-sm);
|
||||||
font-size: 0.85em;
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user