No notable peaks in this view - try panning to the Alps or zooming in.
+ {#if toClimb.length === 0}
+ No peaks left to climb in this view - pan around or zoom in.
{:else}
+ Showing the {LIST_CAP} most notable of {toClimb.length} peaks on the map - zoom in for more.
+
+ {/if}
{/if}
{:else if ascents.length === 0}
@@ -163,6 +223,71 @@
{/if}
diff --git a/src/routes/upload/+page.server.ts b/src/routes/upload/+page.server.ts
index 31daea2..7dc3a47 100644
--- a/src/routes/upload/+page.server.ts
+++ b/src/routes/upload/+page.server.ts
@@ -3,6 +3,25 @@ import { db, peaksNearBounds, recordAscent } from '$lib/server/db';
import { matchPeaks, parseGpx } from '$lib/server/gpx';
import type { Actions } from './$types';
+/**
+ * Parse export-style filenames like
+ * "2018-01-11 141322 - Run - Afternoon Run.gpx" (Date - Type - Name).
+ */
+function parseFilename(
+ filename: string
+): { date: string; type: string; name: string } | null {
+ const base = filename.replace(/\.gpx$/i, '');
+ const parts = base.split(' - ');
+ if (parts.length < 3) return null;
+ const dateMatch = parts[0].match(/^(\d{4}-\d{2}-\d{2})(\s+\d{4,6})?$/);
+ if (!dateMatch) return null;
+ return {
+ date: dateMatch[1],
+ type: parts[1].trim().toLowerCase(),
+ name: parts.slice(2).join(' - ').trim()
+ };
+}
+
export const actions: Actions = {
default: async ({ request, locals }) => {
const userId = locals.user!.id;
@@ -25,11 +44,12 @@ export const actions: Actions = {
for (const file of files) {
try {
const gpx = parseGpx(await file.text());
+ const parsed = parseFilename(file.name);
const result = insert.run({
user_id: userId,
- name: gpx.name ?? file.name.replace(/\.gpx$/i, ''),
- type: gpx.type ?? 'outdoor',
- date: gpx.date,
+ name: parsed?.name ?? gpx.name ?? file.name.replace(/\.gpx$/i, ''),
+ type: parsed?.type ?? gpx.type ?? 'outdoor',
+ date: gpx.date ?? parsed?.date ?? null,
distance_m: gpx.distance_m,
duration_s: gpx.duration_s,
moving_s: gpx.moving_s,
@@ -49,7 +69,11 @@ export const actions: Actions = {
if (recordAscent(userId, peak.id, activityId, gpx.date)) newPeaks.push(peak.name);
}
- uploaded.push({ id: activityId, name: gpx.name ?? file.name, newPeaks });
+ uploaded.push({
+ id: activityId,
+ name: parsed?.name ?? gpx.name ?? file.name,
+ newPeaks
+ });
} catch (err) {
errors.push(`${file.name}: ${err instanceof Error ? err.message : 'could not parse'}`);
}
diff --git a/src/routes/users/[username]/+page.server.ts b/src/routes/users/[username]/+page.server.ts
new file mode 100644
index 0000000..825aa5a
--- /dev/null
+++ b/src/routes/users/[username]/+page.server.ts
@@ -0,0 +1,17 @@
+import { error } from '@sveltejs/kit';
+import { countAscents, getProfile, listActivities, listAscents, userStats } from '$lib/server/db';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = ({ params }) => {
+ const profile = getProfile(params.username);
+ if (!profile) error(404, 'No such user');
+
+ const ascents = listAscents(profile.id);
+ return {
+ profile,
+ stats: userStats(profile.id),
+ peaksReached: countAscents(profile.id),
+ highestAscent: ascents[0] ?? null,
+ activities: listActivities(profile.id).slice(0, 10)
+ };
+};
diff --git a/src/routes/users/[username]/+page.svelte b/src/routes/users/[username]/+page.svelte
new file mode 100644
index 0000000..fb331c1
--- /dev/null
+++ b/src/routes/users/[username]/+page.svelte
@@ -0,0 +1,99 @@
+
+
+
+ {p.username} · Streba
+
+
+
+
+
+
{p.username}
+
+ {#if p.location}{p.location} · {/if}member since {memberSince}
+
+ {#if p.bio}
{p.bio}
{/if}
+
+
+
+
+
+
+
+
+
+
+{#if data.peaksReached > 0}
+
+ ⛰ {data.peaksReached} peak{data.peaksReached === 1 ? '' : 's'} reached{#if data.highestAscent},
+ highest: {data.highestAscent.name}
+ ({Math.round(data.highestAscent.elevation_m ?? 0).toLocaleString('en-US')} m){/if}.
+
+{/if}
+
+
Recent activities
+{#if data.activities.length === 0}
+
No activities yet.
+{:else}
+
+ {#each data.activities as activity (activity.id)}
+
+ {/each}
+
+{/if}
+
+
diff --git a/static/logo.png b/static/logo.png
deleted file mode 100644
index cb4bbef..0000000
Binary files a/static/logo.png and /dev/null differ
+{:else}
+
+{/if}
+
+
diff --git a/src/lib/components/Map.svelte b/src/lib/components/Map.svelte
index 1de2d68..7449405 100644
--- a/src/lib/components/Map.svelte
+++ b/src/lib/components/Map.svelte
@@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import 'maplibre-gl/dist/maplibre-gl.css';
import { theme } from '$lib/theme.svelte';
+ import type { FeatureCollection, Point } from 'geojson';
export interface MapTrack {
id?: number;
@@ -45,30 +46,35 @@
let container: HTMLDivElement;
let map: import('maplibre-gl').Map | undefined;
let lib: typeof import('maplibre-gl') | undefined;
- let markers: import('maplibre-gl').Marker[] = [];
let currentDark: boolean | undefined;
let pendingTerrain: unknown = null;
- function renderPeaks() {
- if (!lib || !map) return;
- for (const m of markers) m.remove();
- markers = peaks.map((p) => {
- const el = document.createElement('div');
- el.className = `peak-marker ${p.climbed ? 'climbed' : ''}`;
- el.textContent = p.climbed ? '✓' : '▲';
- el.title = `${p.name} · ${p.elevation_m.toLocaleString('en-US')} m`;
- el.addEventListener('click', (e) => {
- e.stopPropagation();
- onpeakclick?.(p.id);
- });
- return new lib!.Marker({ element: el }).setLngLat([p.lon, p.lat]).addTo(map!);
- });
+ export function flyTo(lat: number, lon: number, zoom = 13) {
+ map?.flyTo({ center: [lon, lat], zoom });
}
- // re-render markers when climbed state changes
+ function peaksGeojson(): FeatureCollection {
+ return {
+ type: 'FeatureCollection',
+ features: peaks.map((p) => ({
+ type: 'Feature',
+ id: p.id,
+ properties: {
+ id: p.id,
+ name: p.name,
+ elevation_m: p.elevation_m,
+ climbed: p.climbed
+ },
+ geometry: { type: 'Point', coordinates: [p.lon, p.lat] }
+ }))
+ };
+ }
+
+ // push new data into the peaks layer when peaks/climbed state changes
$effect(() => {
void peaks;
- renderPeaks();
+ const source = map?.getSource('peaks') as import('maplibre-gl').GeoJSONSource | undefined;
+ source?.setData(peaksGeojson());
});
// swap map style when the theme changes
@@ -134,6 +140,39 @@
paint: { 'line-color': dark ? '#3987e5' : '#2a78d6', 'line-width': 2.5 }
});
+ // peaks as native layers - scales to thousands of points
+ map.addSource('peaks', { type: 'geojson', data: peaksGeojson() });
+ map.addLayer({
+ id: 'peaks-circles',
+ type: 'circle',
+ source: 'peaks',
+ paint: {
+ 'circle-radius': ['interpolate', ['linear'], ['zoom'], 5, 5, 12, 9],
+ 'circle-color': [
+ 'case',
+ ['get', 'climbed'],
+ '#0ca30c',
+ dark ? '#1a1a19' : '#fcfcfb'
+ ],
+ 'circle-stroke-width': 1.5,
+ 'circle-stroke-color': ['case', ['get', 'climbed'], '#0ca30c', dark ? '#898781' : '#898781']
+ }
+ });
+ map.addLayer({
+ id: 'peaks-glyphs',
+ type: 'symbol',
+ source: 'peaks',
+ layout: {
+ 'text-field': ['case', ['get', 'climbed'], '✓', '▲'],
+ 'text-size': ['interpolate', ['linear'], ['zoom'], 5, 7, 12, 10],
+ 'text-allow-overlap': true,
+ 'text-ignore-placement': true
+ },
+ paint: {
+ 'text-color': ['case', ['get', 'climbed'], '#ffffff', dark ? '#c3c2b7' : '#52514e']
+ }
+ });
+
// restore 3D terrain across style swaps
if (pendingTerrain) {
map.setTerrain(pendingTerrain as import('maplibre-gl').TerrainSpecification);
@@ -165,6 +204,33 @@
map.on('style.load', () => addLayers(currentDark ?? false));
+ // peak interaction: click to toggle, hover for tooltip
+ const popup = new maplibre.Popup({
+ closeButton: false,
+ closeOnClick: false,
+ offset: 12,
+ className: 'peak-tip'
+ });
+ map.on('click', 'peaks-circles', (e) => {
+ const feature = e.features?.[0];
+ if (feature) onpeakclick?.(feature.properties.id as number);
+ });
+ map.on('mousemove', 'peaks-circles', (e) => {
+ const feature = e.features?.[0];
+ if (!feature || !map) return;
+ map.getCanvas().style.cursor = 'pointer';
+ const p = feature.properties;
+ popup
+ .setLngLat((feature.geometry as Point).coordinates as [number, number])
+ .setText(`${p.name} · ${Number(p.elevation_m).toLocaleString('en-US')} m`)
+ .addTo(map);
+ });
+ map.on('mouseleave', 'peaks-circles', () => {
+ if (!map) return;
+ map.getCanvas().style.cursor = '';
+ popup.remove();
+ });
+
if (onviewport) {
const report = () => {
if (!map) return;
@@ -181,8 +247,6 @@
map.once('load', report);
}
- renderPeaks();
-
const bounds = new maplibre.LngLatBounds();
for (const track of tracks) for (const [lat, lon] of track.latlngs) bounds.extend([lon, lat]);
for (const p of peaks) bounds.extend([p.lon, p.lat]);
@@ -203,27 +267,46 @@
.map {
width: 100%;
}
- :global(.peak-marker) {
- width: 26px;
- height: 26px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- background: var(--surface-1);
- border: 1.5px solid var(--baseline);
- color: var(--text-secondary);
- font-size: 12px;
- font-weight: 700;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
- cursor: pointer;
- }
- :global(.peak-marker.climbed) {
- background: var(--good);
- border-color: var(--good);
- color: #fff;
- }
:global(.maplibregl-map) {
font: inherit;
}
+ /* theme the maplibre controls */
+ :global(.maplibregl-ctrl-group) {
+ background: var(--surface-1);
+ border-radius: 0.5rem;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
+ }
+ :global(.maplibregl-ctrl-group:not(:empty)) {
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
+ }
+ :global(.maplibregl-ctrl-group button + button) {
+ border-top: 1px solid var(--border);
+ }
+ :global(.maplibregl-ctrl button .maplibregl-ctrl-icon) {
+ filter: var(--map-icon-filter);
+ }
+ :global(.maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon) {
+ filter: none;
+ }
+ :global(.maplibregl-ctrl-attrib) {
+ background: color-mix(in srgb, var(--surface-1) 80%, transparent);
+ color: var(--text-muted);
+ }
+ :global(.maplibregl-ctrl-attrib a) {
+ color: var(--text-secondary);
+ }
+ :global(.maplibregl-popup.peak-tip .maplibregl-popup-content) {
+ background: var(--surface-1);
+ color: var(--text-primary);
+ border: 1px solid var(--border);
+ border-radius: 0.5rem;
+ padding: 0.3rem 0.6rem;
+ font-size: 0.82rem;
+ font-weight: 500;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+ }
+ :global(.maplibregl-popup.peak-tip .maplibregl-popup-tip) {
+ border-top-color: var(--surface-1);
+ border-bottom-color: var(--surface-1);
+ }
diff --git a/src/lib/server/db.ts b/src/lib/server/db.ts
index b948aad..9559e9e 100644
--- a/src/lib/server/db.ts
+++ b/src/lib/server/db.ts
@@ -72,6 +72,14 @@ db.exec(`
CREATE INDEX IF NOT EXISTS idx_ascents_user ON ascents(user_id);
`);
+// lightweight migrations for columns added after the initial schema
+const userCols = (db.prepare('PRAGMA table_info(users)').all() as { name: string }[]).map(
+ (c) => c.name
+);
+for (const col of ['bio', 'location', 'avatar']) {
+ if (!userCols.includes(col)) db.exec(`ALTER TABLE users ADD COLUMN ${col} TEXT`);
+}
+
// Seed the catalog with the curated list while no OSM import has run.
// Seed rows use osm_id "seed: