trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #610 from trails-cool/feat/planner-map-markers

Browse source 
feat(planner): restyle map markers + route on tokens
This commit is contained in:
Ullrich Schäfer 2026-07-16 07:24:39 +02:00 • committed by GitHub
commit 23882dae68
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 13 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/planner/app/components/ColoredRoute.tsx
View file

@ -210,7 +210,7 @@ export function ColoredRoute({ coordinates, colorMode, surfaces, highways, maxsp
return ( return (
<Polyline <Polyline
positions={plainPositions} positions={plainPositions}
pathOptions={{ color: "#2563eb", weight: 4, opacity: 0.8 }} pathOptions={{ color: "#4a6b40", weight: 4, opacity: 0.85 }}
interactive={false} interactive={false}
/> />
); );

7
apps/planner/app/components/NoGoAreaLayer.tsx
View file

@ -12,10 +12,11 @@ interface NoGoAreaLayerProps {
onToggle: () => void; onToggle: () => void;
} }
// --color-danger (the no-go hue at full strength)
const NO_GO_STYLE: L.PathOptions = { const NO_GO_STYLE: L.PathOptions = {
color: "#ef4444", color: "#a03c3c",
fillColor: "#ef4444", fillColor: "#a03c3c",
fillOpacity: 0.2, fillOpacity: 0.15,
weight: 2, weight: 2,
}; };

13
apps/planner/app/components/PlannerMap.tsx
View file

@ -33,10 +33,11 @@ import type { Poi } from "~/lib/pois";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
function waypointIcon(index: number, overnight?: boolean, highlighted?: boolean, hasNote?: boolean): L.DivIcon { function waypointIcon(index: number, overnight?: boolean, highlighted?: boolean, hasNote?: boolean): L.DivIcon {
const bg = overnight ? "#8B6D3A" : "#2563eb"; // token colors: --color-accent / --color-stop (overnight). Note dot: --color-eg-mid.
const bg = overnight ? "#8b6d3a" : "#4a6b40";
const scale = highlighted ? "scale(1.17)" : "scale(1)"; const scale = highlighted ? "scale(1.17)" : "scale(1)";
const noteIndicator = hasNote const noteIndicator = hasNote
? `<span style="position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#f59e0b;border:1.5px solid white;font-size:7px;display:flex;align-items:center;justify-content:center;line-height:1;">✎</span>` ? `<span style="position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:#c4a840;border:1.5px solid white;font-size:7px;display:flex;align-items:center;justify-content:center;line-height:1;">✎</span>`
: ""; : "";
return L.divIcon({ return L.divIcon({
className: "", className: "",
@ -59,7 +60,7 @@ function dayLabelIcon(dayNumber: number, distanceKm: string): L.DivIcon {
className: "", className: "",
html: `<div style="position:absolute;left:50%;transform:translate(-50%,-40px);"> html: `<div style="position:absolute;left:50%;transform:translate(-50%,-40px);">
<div style=" <div style="
background:white;color:#1f2937; background:#faf8f4;color:#1a1916;
padding:1px 6px;border-radius:8px; padding:1px 6px;border-radius:8px;
font-size:10px;font-weight:600;white-space:nowrap; font-size:10px;font-weight:600;white-space:nowrap;
box-shadow:0 1px 3px rgba(0,0,0,0.15); box-shadow:0 1px 3px rgba(0,0,0,0.15);
@ -148,8 +149,8 @@ export function PlannerMap({ yjs, sessionId, onRouteRequest, highlightPosition,
onDrop={handleDrop} onDrop={handleDrop}
> >
{draggingOver && ( {draggingOver && (
<div className="absolute inset-0 z-[2000] flex items-center justify-center bg-blue-500/20 backdrop-blur-sm"> <div className="absolute inset-0 z-[2000] flex items-center justify-center bg-accent/15 backdrop-blur-sm">
<div className="rounded-xl bg-white px-8 py-6 text-lg font-medium text-blue-600 shadow-lg"> <div className="rounded-xl bg-bg-raised px-8 py-6 text-lg font-medium text-accent shadow-md">
{t("dropGpxHere")} {t("dropGpxHere")}
</div> </div>
</div> </div>
@ -280,7 +281,7 @@ export function PlannerMap({ yjs, sessionId, onRouteRequest, highlightPosition,
interactive={false} interactive={false}
icon={L.divIcon({ icon={L.divIcon({
className: "", className: "",
html: '<div style="width:12px;height:12px;border-radius:50%;background:#ef4444;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.3);transform:translate(-6px,-6px)"></div>', html: '<div style="width:12px;height:12px;border-radius:50%;background:#4a6b40;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.3);transform:translate(-6px,-6px)"></div>',
iconSize: [0, 0], iconSize: [0, 0],
})} })}
/> />

2
apps/planner/app/components/RouteInteraction.tsx
View file

@ -18,7 +18,7 @@ const ghostIcon = L.divIcon({
className: "route-ghost-marker", className: "route-ghost-marker",
html: `<div style=" html: `<div style="
width:14px;height:14px;border-radius:50%; width:14px;height:14px;border-radius:50%;
background:white;border:3px solid #2563eb; background:white;border:3px solid #4a6b40;
box-shadow:0 1px 4px rgba(0,0,0,0.3); box-shadow:0 1px 4px rgba(0,0,0,0.3);
transform:translate(-7px,-7px); transform:translate(-7px,-7px);
cursor:grab; cursor:grab;