Extract @trails-cool/map-core package from Planner
New renderer-agnostic package with zero dependencies: - Tile configs (base layers, overlay layers) - Color palettes (surface, highway, smoothness, tracktype, cycleway, bikeroute, elevation, maxspeed) — 8 color maps + 3 color functions - POI category definitions (9 categories with Overpass queries, icons, colors, profile mappings) - Z-index layering constants - Snap distance constant Updated 15 consuming files to import from @trails-cool/map-core. Deleted poi-categories.ts and z-index.ts from the Planner (fully moved). packages/map re-exports tile configs from map-core for backwards compat. All 117 tests pass, no user-facing changes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer
parent
cd939ccf07
commit
60b94b5789
33 changed files with 339 additions and 257 deletions
|
|
@ -1,6 +1,15 @@
|
|||
import { useMemo } from "react";
|
||||
import { Polyline } from "react-leaflet";
|
||||
import type L from "leaflet";
|
||||
import {
|
||||
SURFACE_COLORS, DEFAULT_SURFACE_COLOR,
|
||||
HIGHWAY_COLORS, DEFAULT_HIGHWAY_COLOR,
|
||||
SMOOTHNESS_COLORS, DEFAULT_SMOOTHNESS_COLOR,
|
||||
TRACKTYPE_COLORS, DEFAULT_TRACKTYPE_COLOR,
|
||||
CYCLEWAY_COLORS, DEFAULT_CYCLEWAY_COLOR,
|
||||
BIKEROUTE_COLORS, DEFAULT_BIKEROUTE_COLOR,
|
||||
elevationColor, routeGradeColor, maxspeedColor,
|
||||
} from "@trails-cool/map-core";
|
||||
|
||||
export type ColorMode = "plain" | "elevation" | "surface" | "grade" | "highway" | "maxspeed" | "smoothness" | "tracktype" | "cycleway" | "bikeroute";
|
||||
|
||||
|
|
@ -16,135 +25,6 @@ interface ColoredRouteProps {
|
|||
bikeroutes?: string[];
|
||||
}
|
||||
|
||||
const SURFACE_COLORS: Record<string, string> = {
|
||||
asphalt: "#6b7280",
|
||||
concrete: "#9ca3af",
|
||||
paved: "#6b7280",
|
||||
paving_stones: "#78716c",
|
||||
cobblestone: "#a8a29e",
|
||||
gravel: "#92400e",
|
||||
compacted: "#b45309",
|
||||
"fine_gravel": "#d97706",
|
||||
ground: "#65a30d",
|
||||
dirt: "#84cc16",
|
||||
grass: "#22c55e",
|
||||
sand: "#fbbf24",
|
||||
mud: "#713f12",
|
||||
wood: "#a16207",
|
||||
unpaved: "#ca8a04",
|
||||
path: "#16a34a",
|
||||
track: "#ea580c",
|
||||
};
|
||||
|
||||
const DEFAULT_SURFACE_COLOR = "#9ca3af";
|
||||
|
||||
const HIGHWAY_COLORS: Record<string, string> = {
|
||||
// Major roads — warm tones (caution for cyclists)
|
||||
motorway: "#dc2626",
|
||||
motorway_link: "#dc2626",
|
||||
trunk: "#ea580c",
|
||||
trunk_link: "#ea580c",
|
||||
primary: "#f97316",
|
||||
primary_link: "#f97316",
|
||||
// Urban roads — neutral tones
|
||||
secondary: "#6366f1",
|
||||
secondary_link: "#6366f1",
|
||||
tertiary: "#818cf8",
|
||||
tertiary_link: "#818cf8",
|
||||
residential: "#6b7280",
|
||||
unclassified: "#9ca3af",
|
||||
living_street: "#a78bfa",
|
||||
// Paths & cycling infrastructure — green tones
|
||||
cycleway: "#16a34a",
|
||||
path: "#22c55e",
|
||||
footway: "#4ade80",
|
||||
track: "#65a30d",
|
||||
bridleway: "#84cc16",
|
||||
// Service & other — muted tones
|
||||
service: "#d4d4d8",
|
||||
pedestrian: "#c084fc",
|
||||
steps: "#f472b6",
|
||||
};
|
||||
|
||||
const DEFAULT_HIGHWAY_COLOR = "#9ca3af";
|
||||
|
||||
const SMOOTHNESS_COLORS: Record<string, string> = {
|
||||
excellent: "#22c55e",
|
||||
good: "#16a34a",
|
||||
intermediate: "#eab308",
|
||||
bad: "#f97316",
|
||||
very_bad: "#ef4444",
|
||||
horrible: "#991b1b",
|
||||
very_horrible: "#7f1d1d",
|
||||
impassable: "#450a0a",
|
||||
};
|
||||
|
||||
const DEFAULT_SMOOTHNESS_COLOR = "#9ca3af";
|
||||
|
||||
const TRACKTYPE_COLORS: Record<string, string> = {
|
||||
grade1: "#22c55e",
|
||||
grade2: "#84cc16",
|
||||
grade3: "#eab308",
|
||||
grade4: "#f97316",
|
||||
grade5: "#ef4444",
|
||||
};
|
||||
|
||||
const DEFAULT_TRACKTYPE_COLOR = "#9ca3af";
|
||||
|
||||
const CYCLEWAY_COLORS: Record<string, string> = {
|
||||
track: "#22c55e",
|
||||
lane: "#84cc16",
|
||||
shared_lane: "#eab308",
|
||||
share_busway: "#f97316",
|
||||
opposite_lane: "#818cf8",
|
||||
separate: "#16a34a",
|
||||
no: "#ef4444",
|
||||
};
|
||||
|
||||
const DEFAULT_CYCLEWAY_COLOR = "#9ca3af";
|
||||
|
||||
const BIKEROUTE_COLORS: Record<string, string> = {
|
||||
icn: "#7c3aed", // purple — international
|
||||
ncn: "#2563eb", // blue — national
|
||||
rcn: "#0891b2", // teal — regional
|
||||
lcn: "#059669", // emerald — local
|
||||
none: "#d4d4d8", // gray — no route
|
||||
};
|
||||
|
||||
const DEFAULT_BIKEROUTE_COLOR = "#d4d4d8";
|
||||
|
||||
export function routeGradeColor(grade: number): string {
|
||||
const absGrade = Math.abs(grade);
|
||||
if (absGrade < 3) return "#22c55e";
|
||||
if (absGrade < 6) return "#eab308";
|
||||
if (absGrade < 10) return "#f97316";
|
||||
if (absGrade < 15) return "#ef4444";
|
||||
return "#991b1b";
|
||||
}
|
||||
|
||||
export function elevationColor(t: number): string {
|
||||
// green (0) → yellow (0.5) → red (1)
|
||||
if (t <= 0.5) {
|
||||
const r = Math.round(255 * (t * 2));
|
||||
return `rgb(${r}, 200, 50)`;
|
||||
}
|
||||
const g = Math.round(200 * (1 - (t - 0.5) * 2));
|
||||
return `rgb(255, ${g}, 50)`;
|
||||
}
|
||||
|
||||
export function maxspeedColor(speed: string): string {
|
||||
if (speed === "walk") return "#22c55e";
|
||||
if (speed === "none") return "#991b1b";
|
||||
const num = parseInt(speed, 10);
|
||||
if (isNaN(num)) return "#9ca3af"; // unknown/gray
|
||||
if (num <= 20) return "#22c55e";
|
||||
if (num <= 30) return "#22c55e";
|
||||
if (num <= 50) return "#eab308";
|
||||
if (num <= 70) return "#f97316";
|
||||
if (num <= 100) return "#ef4444";
|
||||
return "#991b1b"; // >100 dark red
|
||||
}
|
||||
|
||||
export function ColoredRoute({ coordinates, colorMode, surfaces, highways, maxspeeds, smoothnesses, tracktypes, cycleways, bikeroutes }: ColoredRouteProps) {
|
||||
const segments = useMemo(() => {
|
||||
if (colorMode === "plain" || coordinates.length < 2) {
|
||||
|
|
@ -356,11 +236,3 @@ export function findSegmentForPoint(
|
|||
return 0;
|
||||
}
|
||||
|
||||
export {
|
||||
SURFACE_COLORS, DEFAULT_SURFACE_COLOR,
|
||||
HIGHWAY_COLORS, DEFAULT_HIGHWAY_COLOR,
|
||||
SMOOTHNESS_COLORS, DEFAULT_SMOOTHNESS_COLOR,
|
||||
TRACKTYPE_COLORS, DEFAULT_TRACKTYPE_COLOR,
|
||||
CYCLEWAY_COLORS, DEFAULT_CYCLEWAY_COLOR,
|
||||
BIKEROUTE_COLORS, DEFAULT_BIKEROUTE_COLOR,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ import {
|
|||
TRACKTYPE_COLORS, DEFAULT_TRACKTYPE_COLOR,
|
||||
CYCLEWAY_COLORS, DEFAULT_CYCLEWAY_COLOR,
|
||||
BIKEROUTE_COLORS, DEFAULT_BIKEROUTE_COLOR,
|
||||
type ColorMode,
|
||||
} from "~/components/ColoredRoute";
|
||||
} from "@trails-cool/map-core";
|
||||
import type { ColorMode } from "~/components/ColoredRoute";
|
||||
|
||||
function gradeColor(grade: number): string {
|
||||
const absGrade = Math.abs(grade);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { usePois } from "~/lib/use-pois";
|
|||
import { useProfileDefaults } from "~/lib/use-profile-defaults";
|
||||
import { useYjsPoiSync } from "~/lib/use-yjs-poi-sync";
|
||||
import { snapToPoi } from "~/lib/poi-snap";
|
||||
import { Z_CURSOR, Z_WAYPOINT, Z_WAYPOINT_HIGHLIGHTED, Z_HIGHLIGHT } from "~/lib/z-index";
|
||||
import { Z_CURSOR, Z_WAYPOINT, Z_WAYPOINT_HIGHLIGHTED, Z_HIGHLIGHT } from "@trails-cool/map-core";
|
||||
import { NoGoAreaLayer } from "./NoGoAreaLayer";
|
||||
import { ColoredRoute, findSegmentForPoint, type ColorMode } from "./ColoredRoute";
|
||||
import { RouteInteraction } from "./RouteInteraction";
|
||||
|
|
|
|||
|
|
@ -2,9 +2,8 @@ import { useState, useEffect, useRef } from "react";
|
|||
import L from "leaflet";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMap } from "react-leaflet";
|
||||
import { poiCategories } from "~/lib/poi-categories";
|
||||
import { poiCategories, Z_POI_MARKER } from "@trails-cool/map-core";
|
||||
import type { PoiState } from "~/lib/use-pois";
|
||||
import { Z_POI_MARKER } from "~/lib/z-index";
|
||||
import "leaflet.markercluster/dist/MarkerCluster.css";
|
||||
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useEffect, useRef, useCallback } from "react";
|
||||
import { useMap } from "react-leaflet";
|
||||
import L from "leaflet";
|
||||
import { Z_GHOST_WAYPOINT } from "~/lib/z-index";
|
||||
import { Z_GHOST_WAYPOINT } from "@trails-cool/map-core";
|
||||
|
||||
interface RouteInteractionProps {
|
||||
coordinates: [number, number, number][]; // [lon, lat, ele]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue